@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.js
CHANGED
|
@@ -3221,7 +3221,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3221
3221
|
};
|
|
3222
3222
|
}
|
|
3223
3223
|
};
|
|
3224
|
-
var Container$
|
|
3224
|
+
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) {
|
|
3225
3225
|
var backgroundColor = _a.backgroundColor;
|
|
3226
3226
|
return backgroundColor;
|
|
3227
3227
|
}, function (_a) {
|
|
@@ -3243,7 +3243,7 @@ var Container$1z = newStyled.div(templateObject_1$2F || (templateObject_1$2F = _
|
|
|
3243
3243
|
var size = _a.size;
|
|
3244
3244
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3245
3245
|
});
|
|
3246
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3246
|
+
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) {
|
|
3247
3247
|
var textColor = _a.textColor;
|
|
3248
3248
|
return textColor;
|
|
3249
3249
|
}, function (_a) {
|
|
@@ -3258,9 +3258,9 @@ var H3$2 = newStyled.h3(templateObject_2$1V || (templateObject_2$1V = __makeTemp
|
|
|
3258
3258
|
var ClubOfferTag = function (_a) {
|
|
3259
3259
|
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 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
3260
3260
|
var theme = useTheme();
|
|
3261
|
-
return (jsxRuntime.jsx(Container$
|
|
3261
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsx(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));
|
|
3262
3262
|
};
|
|
3263
|
-
var templateObject_1$
|
|
3263
|
+
var templateObject_1$2G, templateObject_2$1W;
|
|
3264
3264
|
|
|
3265
3265
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3266
3266
|
var _a, _b, _c;
|
|
@@ -3291,7 +3291,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3291
3291
|
};
|
|
3292
3292
|
}
|
|
3293
3293
|
};
|
|
3294
|
-
var Container$
|
|
3294
|
+
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) {
|
|
3295
3295
|
var backgroundColor = _a.backgroundColor;
|
|
3296
3296
|
return backgroundColor;
|
|
3297
3297
|
}, function (_a) {
|
|
@@ -3313,7 +3313,7 @@ var Container$1y = newStyled.div(templateObject_1$2E || (templateObject_1$2E = _
|
|
|
3313
3313
|
var size = _a.size;
|
|
3314
3314
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3315
3315
|
});
|
|
3316
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
3316
|
+
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) {
|
|
3317
3317
|
var textColor = _a.textColor;
|
|
3318
3318
|
return textColor;
|
|
3319
3319
|
}, function (_a) {
|
|
@@ -3328,9 +3328,9 @@ var H3$1 = newStyled.h3(templateObject_2$1U || (templateObject_2$1U = __makeTemp
|
|
|
3328
3328
|
var DiscountTag$4 = function (_a) {
|
|
3329
3329
|
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 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
3330
3330
|
var theme = useTheme();
|
|
3331
|
-
return (jsxRuntime.jsx(Container$
|
|
3331
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(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));
|
|
3332
3332
|
};
|
|
3333
|
-
var templateObject_1$
|
|
3333
|
+
var templateObject_1$2F, templateObject_2$1V;
|
|
3334
3334
|
|
|
3335
3335
|
var Viewports = {
|
|
3336
3336
|
mobile: 'mobile',
|
|
@@ -3399,8 +3399,8 @@ var useWindowDimensions = function (breakpoints, _a) {
|
|
|
3399
3399
|
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
3400
3400
|
};
|
|
3401
3401
|
|
|
3402
|
-
var Container$
|
|
3403
|
-
var Price$1 = newStyled.p(templateObject_2$
|
|
3402
|
+
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"])));
|
|
3403
|
+
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) {
|
|
3404
3404
|
var weight = _a.weight;
|
|
3405
3405
|
return (weight ? weight : '400');
|
|
3406
3406
|
}, function (_a) {
|
|
@@ -3424,7 +3424,7 @@ var Price$1 = newStyled.p(templateObject_2$1T || (templateObject_2$1T = __makeTe
|
|
|
3424
3424
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3425
3425
|
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3426
3426
|
});
|
|
3427
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3427
|
+
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) {
|
|
3428
3428
|
var _b;
|
|
3429
3429
|
var size = _a.size;
|
|
3430
3430
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3433,7 +3433,7 @@ var PriceContainer$3 = newStyled.div(templateObject_4$19 || (templateObject_4$19
|
|
|
3433
3433
|
var invertDirection = _a.invertDirection;
|
|
3434
3434
|
return (invertDirection ? 'row-reverse' : 'row');
|
|
3435
3435
|
});
|
|
3436
|
-
var templateObject_1$
|
|
3436
|
+
var templateObject_1$2E, templateObject_2$1U, templateObject_3$1u, templateObject_4$19;
|
|
3437
3437
|
|
|
3438
3438
|
var getStylesBySize$e = function (size, theme) {
|
|
3439
3439
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -3501,7 +3501,7 @@ var PriceLabel$1 = function (_a) {
|
|
|
3501
3501
|
: exports.ComponentSize.XSmall;
|
|
3502
3502
|
return (jsxRuntime.jsx(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));
|
|
3503
3503
|
};
|
|
3504
|
-
return (jsxRuntime.jsxs(Container$
|
|
3504
|
+
return (jsxRuntime.jsxs(Container$1y, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(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)) : (jsxRuntime.jsxs(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [jsxRuntime.jsx(Price$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }), void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3505
3505
|
};
|
|
3506
3506
|
|
|
3507
3507
|
var supportedCurrencies = ['AU$', 'CA$', '€', 'kr', '£', 'NZ$', 'S$'];
|
|
@@ -3512,7 +3512,7 @@ var getCurrencySymbol = function (finalPrice) {
|
|
|
3512
3512
|
return currencySymbol !== null && currencySymbol !== void 0 ? currencySymbol : currencySymbolFallback;
|
|
3513
3513
|
};
|
|
3514
3514
|
|
|
3515
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3515
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2D || (templateObject_1$2D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3516
3516
|
var PriceLabelV2$1 = function (_a) {
|
|
3517
3517
|
var _b;
|
|
3518
3518
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, _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"]);
|
|
@@ -3560,7 +3560,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3560
3560
|
var savetoString = saveto.toFixed(2);
|
|
3561
3561
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price$1, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3562
3562
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3563
|
-
return (jsxRuntime.jsxs(Container$
|
|
3563
|
+
return (jsxRuntime.jsxs(Container$1y, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3564
3564
|
? finalPriceArray[0]
|
|
3565
3565
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), showDecimals && (jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3566
3566
|
marginTop: '-6px',
|
|
@@ -3576,11 +3576,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3576
3576
|
lineHeight: '22px',
|
|
3577
3577
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3578
3578
|
};
|
|
3579
|
-
var templateObject_1$
|
|
3579
|
+
var templateObject_1$2D;
|
|
3580
3580
|
|
|
3581
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3582
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3583
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3581
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2C || (templateObject_1$2C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3582
|
+
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"])));
|
|
3583
|
+
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"])));
|
|
3584
3584
|
var PriceLabelV3 = function (_a) {
|
|
3585
3585
|
var _b;
|
|
3586
3586
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -3630,7 +3630,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3630
3630
|
return null;
|
|
3631
3631
|
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$2(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price$1, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price$1, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price$1, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3632
3632
|
};
|
|
3633
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$
|
|
3633
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$1y, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$1y, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3634
3634
|
marginTop: '-5px',
|
|
3635
3635
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(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), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3636
3636
|
marginTop: '-6px',
|
|
@@ -3646,10 +3646,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
3646
3646
|
lineHeight: '22px',
|
|
3647
3647
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3648
3648
|
};
|
|
3649
|
-
var templateObject_1$
|
|
3649
|
+
var templateObject_1$2C, templateObject_2$1T, templateObject_3$1t;
|
|
3650
3650
|
|
|
3651
|
-
var Container$
|
|
3652
|
-
var Price = newStyled.p(templateObject_2$
|
|
3651
|
+
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"])));
|
|
3652
|
+
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) {
|
|
3653
3653
|
var weight = _a.weight;
|
|
3654
3654
|
return weight !== null && weight !== void 0 ? weight : '400';
|
|
3655
3655
|
}, function (_a) {
|
|
@@ -3662,7 +3662,7 @@ var Price = newStyled.p(templateObject_2$1R || (templateObject_2$1R = __makeTemp
|
|
|
3662
3662
|
var underlined = _a.underlined;
|
|
3663
3663
|
return (underlined ? 'line-through' : 'none');
|
|
3664
3664
|
});
|
|
3665
|
-
var templateObject_1$
|
|
3665
|
+
var templateObject_1$2B, templateObject_2$1S;
|
|
3666
3666
|
|
|
3667
3667
|
function getTestId$1() {
|
|
3668
3668
|
var args = [];
|
|
@@ -3683,10 +3683,10 @@ var PriceLabelV5 = function (_a) {
|
|
|
3683
3683
|
color: color !== null && color !== void 0 ? color : theme.colors.pallete.secondary.color,
|
|
3684
3684
|
weight: 700,
|
|
3685
3685
|
};
|
|
3686
|
-
return (jsxRuntime.jsx(Container$
|
|
3686
|
+
return (jsxRuntime.jsx(Container$1x, __assign$1({}, rest, { id: "priceLabel" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && (jsxRuntime.jsx(OriginalPrice, { theme: theme, originalPriceUnderlined: originalPriceUnderlined, testId: testId, originalPrice: originalPrice }, void 0))] }, void 0) }), void 0));
|
|
3687
3687
|
};
|
|
3688
3688
|
|
|
3689
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3689
|
+
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"])));
|
|
3690
3690
|
var PriceLabel = function (_a) {
|
|
3691
3691
|
var _b;
|
|
3692
3692
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3709,15 +3709,15 @@ var PriceLabel = function (_a) {
|
|
|
3709
3709
|
};
|
|
3710
3710
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price$1, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3711
3711
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3712
|
-
return (jsxRuntime.jsxs(Container$
|
|
3712
|
+
return (jsxRuntime.jsxs(Container$1y, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3713
3713
|
marginTop: '-5px',
|
|
3714
3714
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(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), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3715
3715
|
marginTop: '-6px',
|
|
3716
3716
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3717
3717
|
};
|
|
3718
|
-
var templateObject_1$
|
|
3718
|
+
var templateObject_1$2A;
|
|
3719
3719
|
|
|
3720
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3720
|
+
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"])));
|
|
3721
3721
|
var PriceLabelV2 = function (_a) {
|
|
3722
3722
|
var _b;
|
|
3723
3723
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3743,13 +3743,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
3743
3743
|
var finalPriceString = finalPriceArray[0]
|
|
3744
3744
|
? finalPriceArray[0]
|
|
3745
3745
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3746
|
-
return (jsxRuntime.jsxs(Container$
|
|
3746
|
+
return (jsxRuntime.jsxs(Container$1y, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3747
3747
|
};
|
|
3748
|
-
var templateObject_1$
|
|
3748
|
+
var templateObject_1$2z;
|
|
3749
3749
|
|
|
3750
|
-
var ContainerWrapper$3 = newStyled.div(templateObject_1$
|
|
3751
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3752
|
-
var templateObject_1$
|
|
3750
|
+
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"])));
|
|
3751
|
+
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"])));
|
|
3752
|
+
var templateObject_1$2y, templateObject_2$1R;
|
|
3753
3753
|
|
|
3754
3754
|
var ClubPriceMemberLabel = function (_a) {
|
|
3755
3755
|
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"]);
|
|
@@ -3758,13 +3758,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3758
3758
|
return (jsxRuntime.jsx("div", { children: isClub ? (jsxRuntime.jsxs(ContainerWrapper$3, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsxRuntime.jsx(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: PriceComponent }, void 0)) }, void 0));
|
|
3759
3759
|
};
|
|
3760
3760
|
|
|
3761
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3761
|
+
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) {
|
|
3762
3762
|
var width = _a.width;
|
|
3763
3763
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3764
3764
|
});
|
|
3765
|
-
var templateObject_1$
|
|
3765
|
+
var templateObject_1$2x;
|
|
3766
3766
|
|
|
3767
|
-
var Container$
|
|
3767
|
+
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) {
|
|
3768
3768
|
var height = _a.height;
|
|
3769
3769
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3770
3770
|
}, function (_a) {
|
|
@@ -3789,11 +3789,11 @@ var Container$1v = newStyled.div(templateObject_1$2v || (templateObject_1$2v = _
|
|
|
3789
3789
|
var SkeletonBox = function (_a) {
|
|
3790
3790
|
var width = _a.width, height = _a.height;
|
|
3791
3791
|
var theme = useTheme();
|
|
3792
|
-
return jsxRuntime.jsx(Container$
|
|
3792
|
+
return jsxRuntime.jsx(Container$1w, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3793
3793
|
};
|
|
3794
|
-
var templateObject_1$
|
|
3794
|
+
var templateObject_1$2w;
|
|
3795
3795
|
|
|
3796
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3796
|
+
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) {
|
|
3797
3797
|
var width = _a.width;
|
|
3798
3798
|
return width;
|
|
3799
3799
|
}, function (_a) {
|
|
@@ -3809,7 +3809,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u
|
|
|
3809
3809
|
var opacity = _a.opacity;
|
|
3810
3810
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3811
3811
|
});
|
|
3812
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3812
|
+
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) {
|
|
3813
3813
|
var width = _a.width;
|
|
3814
3814
|
return width;
|
|
3815
3815
|
}, function (_a) {
|
|
@@ -3822,7 +3822,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$
|
|
|
3822
3822
|
var opacity = _a.opacity;
|
|
3823
3823
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3824
3824
|
});
|
|
3825
|
-
var templateObject_1$
|
|
3825
|
+
var templateObject_1$2v, templateObject_2$1Q;
|
|
3826
3826
|
|
|
3827
3827
|
/* eslint-disable no-undef */
|
|
3828
3828
|
var cache = new Map();
|
|
@@ -3998,7 +3998,7 @@ var buildImageUrl = function (_a) {
|
|
|
3998
3998
|
}
|
|
3999
3999
|
};
|
|
4000
4000
|
|
|
4001
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
4001
|
+
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; });
|
|
4002
4002
|
var Image$3 = function (_a) {
|
|
4003
4003
|
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"]);
|
|
4004
4004
|
var config = useTheme().config;
|
|
@@ -4007,15 +4007,15 @@ var Image$3 = function (_a) {
|
|
|
4007
4007
|
: src;
|
|
4008
4008
|
return (jsxRuntime.jsx(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));
|
|
4009
4009
|
};
|
|
4010
|
-
var templateObject_1$
|
|
4010
|
+
var templateObject_1$2u;
|
|
4011
4011
|
|
|
4012
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
4013
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
4014
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
4012
|
+
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"])));
|
|
4013
|
+
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"])));
|
|
4014
|
+
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) {
|
|
4015
4015
|
var $color = _a.$color;
|
|
4016
4016
|
return $color;
|
|
4017
4017
|
});
|
|
4018
|
-
var templateObject_1$
|
|
4018
|
+
var templateObject_1$2t, templateObject_2$1P, templateObject_3$1s;
|
|
4019
4019
|
|
|
4020
4020
|
var ToggleComponent = function (_a) {
|
|
4021
4021
|
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"]);
|
|
@@ -4897,9 +4897,9 @@ function jsxs(type, props, key) {
|
|
|
4897
4897
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4898
4898
|
// `variants` styles that are consistent through all themes.
|
|
4899
4899
|
var TAGS = {
|
|
4900
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4901
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4902
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4900
|
+
hero1: newStyled.h1(templateObject_1$2s || (templateObject_1$2s = __makeTemplateObject([""], [""]))),
|
|
4901
|
+
hero2: newStyled.h2(templateObject_2$1O || (templateObject_2$1O = __makeTemplateObject([""], [""]))),
|
|
4902
|
+
hero3: newStyled.h3(templateObject_3$1r || (templateObject_3$1r = __makeTemplateObject([""], [""]))),
|
|
4903
4903
|
display1: newStyled.h1(templateObject_4$18 || (templateObject_4$18 = __makeTemplateObject([""], [""]))),
|
|
4904
4904
|
display2: newStyled.h2(templateObject_5$T || (templateObject_5$T = __makeTemplateObject([""], [""]))),
|
|
4905
4905
|
display3: newStyled.h3(templateObject_6$K || (templateObject_6$K = __makeTemplateObject([""], [""]))),
|
|
@@ -5037,17 +5037,17 @@ var DEFAULTS = {
|
|
|
5037
5037
|
size: 'regular',
|
|
5038
5038
|
},
|
|
5039
5039
|
};
|
|
5040
|
-
var templateObject_1$
|
|
5040
|
+
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;
|
|
5041
5041
|
|
|
5042
|
-
var Container$
|
|
5043
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
5044
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
5042
|
+
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"])));
|
|
5043
|
+
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"])));
|
|
5044
|
+
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"])));
|
|
5045
5045
|
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"])));
|
|
5046
5046
|
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"])));
|
|
5047
5047
|
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"])));
|
|
5048
5048
|
var PackSelectorV2 = function (_a) {
|
|
5049
5049
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
5050
|
-
return (jsxRuntime.jsx(Container$
|
|
5050
|
+
return (jsxRuntime.jsx(Container$1v, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
5051
5051
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
5052
5052
|
}) }), void 0));
|
|
5053
5053
|
};
|
|
@@ -5069,27 +5069,27 @@ var PackCard$1 = function (_a) {
|
|
|
5069
5069
|
currency: currencyCode || 'USD',
|
|
5070
5070
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5071
5071
|
};
|
|
5072
|
-
var templateObject_1$
|
|
5072
|
+
var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$17, templateObject_5$S, templateObject_6$J;
|
|
5073
5073
|
|
|
5074
|
-
var Container$
|
|
5075
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
5074
|
+
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"])));
|
|
5075
|
+
var DropContainer = newStyled.div(templateObject_2$1M || (templateObject_2$1M = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5076
5076
|
var DropList = function (_a) {
|
|
5077
5077
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5078
|
-
return (jsxRuntime.jsx(Container$
|
|
5078
|
+
return (jsxRuntime.jsx(Container$1u, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5079
5079
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
5080
5080
|
}) }, void 0));
|
|
5081
5081
|
};
|
|
5082
|
-
var templateObject_1$
|
|
5082
|
+
var templateObject_1$2q, templateObject_2$1M;
|
|
5083
5083
|
|
|
5084
5084
|
var DROPS_TOTAL = 5;
|
|
5085
|
-
var Container$
|
|
5086
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5087
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
5085
|
+
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"])));
|
|
5086
|
+
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"])));
|
|
5087
|
+
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"])));
|
|
5088
5088
|
var AbsorbencyLevel = function (_a) {
|
|
5089
5089
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5090
|
-
return (jsxRuntime.jsxs(Container$
|
|
5090
|
+
return (jsxRuntime.jsxs(Container$1t, { children: [jsxRuntime.jsx(Title$b, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
5091
5091
|
};
|
|
5092
|
-
var templateObject_1$
|
|
5092
|
+
var templateObject_1$2p, templateObject_2$1L, templateObject_3$1p;
|
|
5093
5093
|
|
|
5094
5094
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
5095
5095
|
`),"","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(`
|
|
@@ -5165,7 +5165,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5165
5165
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5166
5166
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5167
5167
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5168
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5168
|
+
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"])));
|
|
5169
5169
|
var Accordion$1 = function (_a) {
|
|
5170
5170
|
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;
|
|
5171
5171
|
var theme = useTheme();
|
|
@@ -5189,9 +5189,9 @@ var Accordion$1 = function (_a) {
|
|
|
5189
5189
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5190
5190
|
} }), void 0));
|
|
5191
5191
|
};
|
|
5192
|
-
var templateObject_1$
|
|
5192
|
+
var templateObject_1$2o;
|
|
5193
5193
|
|
|
5194
|
-
var Container$
|
|
5194
|
+
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"])));
|
|
5195
5195
|
var AccordionOptions = function (_a) {
|
|
5196
5196
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5197
5197
|
var _b = React$2.useState({
|
|
@@ -5204,7 +5204,7 @@ var AccordionOptions = function (_a) {
|
|
|
5204
5204
|
}
|
|
5205
5205
|
return false;
|
|
5206
5206
|
};
|
|
5207
|
-
return (jsxRuntime.jsx(Container$
|
|
5207
|
+
return (jsxRuntime.jsx(Container$1s, { children: accordions.map(function (accordion, index) {
|
|
5208
5208
|
var forceOpenValue = getForceOpen(index);
|
|
5209
5209
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5210
5210
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5215,7 +5215,7 @@ var AccordionOptions = function (_a) {
|
|
|
5215
5215
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5216
5216
|
}) }, void 0));
|
|
5217
5217
|
};
|
|
5218
|
-
var templateObject_1$
|
|
5218
|
+
var templateObject_1$2n;
|
|
5219
5219
|
|
|
5220
5220
|
var isDangerouslySetInnerHTML = function (content) {
|
|
5221
5221
|
return content && typeof content === 'object' && '__html' in content;
|
|
@@ -5428,27 +5428,27 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5428
5428
|
literal: true,
|
|
5429
5429
|
});
|
|
5430
5430
|
|
|
5431
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5432
|
-
var FlexContainer$5 = newStyled.div(templateObject_2$
|
|
5433
|
-
var templateObject_1$
|
|
5431
|
+
var Bold = newStyled.span(templateObject_1$2m || (templateObject_1$2m = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5432
|
+
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"])));
|
|
5433
|
+
var templateObject_1$2m, templateObject_2$1K;
|
|
5434
5434
|
|
|
5435
|
-
var Container$
|
|
5435
|
+
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) {
|
|
5436
5436
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5437
5437
|
return width;
|
|
5438
5438
|
}, function (_a) {
|
|
5439
5439
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5440
5440
|
return height;
|
|
5441
5441
|
});
|
|
5442
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5443
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5442
|
+
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"])));
|
|
5443
|
+
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"])));
|
|
5444
5444
|
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"])));
|
|
5445
5445
|
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"])));
|
|
5446
|
-
var templateObject_1$
|
|
5446
|
+
var templateObject_1$2l, templateObject_2$1J, templateObject_3$1o, templateObject_4$16, templateObject_5$R;
|
|
5447
5447
|
|
|
5448
5448
|
var CouponCard = function (_a) {
|
|
5449
5449
|
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;
|
|
5450
5450
|
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5451
|
-
return (jsxRuntime.jsxs(Container$
|
|
5451
|
+
return (jsxRuntime.jsxs(Container$1r, __assign$1({ height: height, width: width }, { children: [jsxRuntime.jsx(LeftSide, { children: jsxRuntime.jsx(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxRuntime.jsxs(RightSide, { children: [jsxRuntime.jsxs(FlexStart, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsxRuntime.jsx(FlexCentered, { children: !showCoupon ? (jsxRuntime.jsx(ButtonPrimary, { type: "button", text: btnText, wide: true, size: exports.ComponentSize.Large, onClick: function () {
|
|
5452
5452
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5453
5453
|
setShowCoupon(function (prev) { return !prev; });
|
|
5454
5454
|
} }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: exports.ComponentSize.Small, icon: {
|
|
@@ -5531,14 +5531,14 @@ var isValidDate = function (value) {
|
|
|
5531
5531
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5532
5532
|
};
|
|
5533
5533
|
|
|
5534
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5535
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5534
|
+
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; });
|
|
5535
|
+
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"])));
|
|
5536
5536
|
var Error$1 = function (_a) {
|
|
5537
5537
|
var error = _a.error;
|
|
5538
5538
|
var theme = useTheme();
|
|
5539
5539
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5540
5540
|
};
|
|
5541
|
-
var templateObject_1$
|
|
5541
|
+
var templateObject_1$2k, templateObject_2$1I;
|
|
5542
5542
|
|
|
5543
5543
|
var BaseSelectButton = function (_a) {
|
|
5544
5544
|
var children = _a.children, as = _a.as;
|
|
@@ -5555,7 +5555,7 @@ function BaseSelectOption(_a) {
|
|
|
5555
5555
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5556
5556
|
}
|
|
5557
5557
|
|
|
5558
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5558
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$2j || (templateObject_1$2j = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5559
5559
|
function BaseSelect(_a) {
|
|
5560
5560
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5561
5561
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5565,7 +5565,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5565
5565
|
Options: BaseSelectOptions,
|
|
5566
5566
|
Option: BaseSelectOption,
|
|
5567
5567
|
});
|
|
5568
|
-
var templateObject_1$
|
|
5568
|
+
var templateObject_1$2j;
|
|
5569
5569
|
|
|
5570
5570
|
var CustomButton = newStyled.button(function (_a) {
|
|
5571
5571
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5604,7 +5604,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5604
5604
|
});
|
|
5605
5605
|
});
|
|
5606
5606
|
// TODO Remove this when we find the real solution
|
|
5607
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5607
|
+
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) {
|
|
5608
5608
|
var open = _a.open;
|
|
5609
5609
|
return open &&
|
|
5610
5610
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5624,7 +5624,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5624
5624
|
} }), void 0));
|
|
5625
5625
|
};
|
|
5626
5626
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5627
|
-
var templateObject_1$
|
|
5627
|
+
var templateObject_1$2i;
|
|
5628
5628
|
|
|
5629
5629
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5630
5630
|
var theme = _a.theme;
|
|
@@ -5791,7 +5791,7 @@ var CustomCheckboxStyles = {
|
|
|
5791
5791
|
},
|
|
5792
5792
|
};
|
|
5793
5793
|
|
|
5794
|
-
var Container$
|
|
5794
|
+
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"])));
|
|
5795
5795
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5796
5796
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5797
5797
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5802,7 +5802,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5802
5802
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5803
5803
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5804
5804
|
]; });
|
|
5805
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5805
|
+
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) {
|
|
5806
5806
|
var disabled = _a.disabled;
|
|
5807
5807
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5808
5808
|
});
|
|
@@ -5816,11 +5816,11 @@ var Checkbox = function (_a) {
|
|
|
5816
5816
|
}
|
|
5817
5817
|
onChange(e.target.checked);
|
|
5818
5818
|
};
|
|
5819
|
-
return (jsxRuntime.jsxs(Container$
|
|
5819
|
+
return (jsxRuntime.jsxs(Container$1q, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && (jsxRuntime.jsx(Icon.Actions.Check, { fill: text === 'White'
|
|
5820
5820
|
? theme.colors.shades['black'].color
|
|
5821
5821
|
: theme.colors.shades['white'].color }, void 0)) }), void 0), jsxRuntime.jsx(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));
|
|
5822
5822
|
};
|
|
5823
|
-
var templateObject_1$
|
|
5823
|
+
var templateObject_1$2h, templateObject_2$1H;
|
|
5824
5824
|
|
|
5825
5825
|
var CustomOption = newStyled.li(function (_a) {
|
|
5826
5826
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5869,9 +5869,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5869
5869
|
Option: BaseDropdownOption,
|
|
5870
5870
|
});
|
|
5871
5871
|
|
|
5872
|
-
var Container$
|
|
5873
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5874
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5872
|
+
var Container$1p = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject([""], [""])));
|
|
5873
|
+
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"])));
|
|
5874
|
+
var SelectedOption = newStyled.span(templateObject_3$1n || (templateObject_3$1n = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5875
5875
|
var fontWeight = _a.fontWeight;
|
|
5876
5876
|
return fontWeight || '';
|
|
5877
5877
|
});
|
|
@@ -5904,10 +5904,10 @@ function SimpleDropdown(_a) {
|
|
|
5904
5904
|
}
|
|
5905
5905
|
setSelectedValue(value);
|
|
5906
5906
|
}, [value, options, initialValue]);
|
|
5907
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5907
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1p : React$2.Fragment;
|
|
5908
5908
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5909
5909
|
}
|
|
5910
|
-
var templateObject_1$
|
|
5910
|
+
var templateObject_1$2g, templateObject_2$1G, templateObject_3$1n;
|
|
5911
5911
|
|
|
5912
5912
|
/* base styles & size variants */
|
|
5913
5913
|
var CustomRadioStyles$2 = {
|
|
@@ -5972,9 +5972,9 @@ var ContainerStyles$2 = {
|
|
|
5972
5972
|
},
|
|
5973
5973
|
};
|
|
5974
5974
|
|
|
5975
|
-
var Wrapper$
|
|
5976
|
-
var Container$
|
|
5977
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5975
|
+
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"])));
|
|
5976
|
+
var Container$1o = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5977
|
+
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) {
|
|
5978
5978
|
var disabled = _a.disabled;
|
|
5979
5979
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5980
5980
|
});
|
|
@@ -5982,7 +5982,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5982
5982
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5983
5983
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5984
5984
|
]; });
|
|
5985
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5985
|
+
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) {
|
|
5986
5986
|
var theme = _a.theme;
|
|
5987
5987
|
return theme.component.radio.textSize;
|
|
5988
5988
|
}, function (_a) {
|
|
@@ -6006,9 +6006,9 @@ var RadioInput = function (_a) {
|
|
|
6006
6006
|
var value = event.currentTarget.value;
|
|
6007
6007
|
onChange({ value: value, label: label });
|
|
6008
6008
|
};
|
|
6009
|
-
return (jsxRuntime.jsxs(Wrapper$
|
|
6009
|
+
return (jsxRuntime.jsxs(Wrapper$8, { children: [jsxRuntime.jsxs(Container$1o, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsxs(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
6010
6010
|
};
|
|
6011
|
-
var templateObject_1$
|
|
6011
|
+
var templateObject_1$2f, templateObject_2$1F, templateObject_3$1m, templateObject_4$15;
|
|
6012
6012
|
|
|
6013
6013
|
var useOnClickOutside = function (ref, handler) {
|
|
6014
6014
|
React$2.useEffect(function () {
|
|
@@ -6101,7 +6101,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6101
6101
|
}
|
|
6102
6102
|
};
|
|
6103
6103
|
|
|
6104
|
-
var Wrapper$
|
|
6104
|
+
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) {
|
|
6105
6105
|
var position = _a.position;
|
|
6106
6106
|
return getWrapperFlexDirection(position);
|
|
6107
6107
|
}, function (_a) {
|
|
@@ -6111,7 +6111,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __ma
|
|
|
6111
6111
|
var disableHover = _a.disableHover;
|
|
6112
6112
|
return (disableHover ? 0 : 1);
|
|
6113
6113
|
});
|
|
6114
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6114
|
+
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) {
|
|
6115
6115
|
var position = _a.position;
|
|
6116
6116
|
return getContainerFlexDirection(position);
|
|
6117
6117
|
}, function (_a) {
|
|
@@ -6139,7 +6139,7 @@ var TooltipContainer = newStyled.div(templateObject_2$1D || (templateObject_2$1D
|
|
|
6139
6139
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6140
6140
|
return actual === expected ? margin : '0';
|
|
6141
6141
|
};
|
|
6142
|
-
var ContentWrapper$1 = newStyled.div(templateObject_3$
|
|
6142
|
+
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) {
|
|
6143
6143
|
var borderColor = _a.borderColor;
|
|
6144
6144
|
return borderColor;
|
|
6145
6145
|
}, function (_a) {
|
|
@@ -6166,7 +6166,7 @@ var CloseToolTip = newStyled.button(templateObject_8$s || (templateObject_8$s =
|
|
|
6166
6166
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6167
6167
|
return right;
|
|
6168
6168
|
});
|
|
6169
|
-
var templateObject_1$
|
|
6169
|
+
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;
|
|
6170
6170
|
|
|
6171
6171
|
var Tooltip = function (_a) {
|
|
6172
6172
|
var _b;
|
|
@@ -6186,7 +6186,7 @@ var Tooltip = function (_a) {
|
|
|
6186
6186
|
var ref = tooltipRef.current;
|
|
6187
6187
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
6188
6188
|
}, [tooltipRef]);
|
|
6189
|
-
return (jsxRuntime.jsxs(Wrapper$
|
|
6189
|
+
return (jsxRuntime.jsxs(Wrapper$7, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("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), jsxRuntime.jsxs(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) && (jsxRuntime.jsx(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsxRuntime.jsx(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)), jsxRuntime.jsxs(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 && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsxRuntime.jsx(IconContainer$6, { children: React__default["default"].createElement(header.Icon, {
|
|
6190
6190
|
testId: 'HeaderIcon',
|
|
6191
6191
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
6192
6192
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
@@ -6209,8 +6209,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
6209
6209
|
};
|
|
6210
6210
|
};
|
|
6211
6211
|
|
|
6212
|
-
var FlexContainer$4 = newStyled.div(templateObject_1$
|
|
6213
|
-
var ContainerBase$5 = newStyled.div(templateObject_2$
|
|
6212
|
+
var FlexContainer$4 = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6213
|
+
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) {
|
|
6214
6214
|
var selected = _a.selected, theme = _a.theme;
|
|
6215
6215
|
return selected
|
|
6216
6216
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6224,7 +6224,7 @@ var ContainerBase$5 = newStyled.div(templateObject_2$1C || (templateObject_2$1C
|
|
|
6224
6224
|
var theme = _a.theme;
|
|
6225
6225
|
return theme.colors.pallete.primary.color;
|
|
6226
6226
|
});
|
|
6227
|
-
var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$
|
|
6227
|
+
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) {
|
|
6228
6228
|
var onClick = _a.onClick;
|
|
6229
6229
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6230
6230
|
});
|
|
@@ -6246,8 +6246,8 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6246
6246
|
var selected = _a.selected, theme = _a.theme;
|
|
6247
6247
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6248
6248
|
});
|
|
6249
|
-
var Container$
|
|
6250
|
-
var templateObject_1$
|
|
6249
|
+
var Container$1n = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6250
|
+
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;
|
|
6251
6251
|
|
|
6252
6252
|
var radioIds$3 = {
|
|
6253
6253
|
oneTime: {
|
|
@@ -6297,17 +6297,17 @@ var Autoship = function (_a) {
|
|
|
6297
6297
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6298
6298
|
};
|
|
6299
6299
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6300
|
-
return (jsxRuntime.jsxs(Container$
|
|
6300
|
+
return (jsxRuntime.jsxs(Container$1n, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(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: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$4, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$3.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer$5, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$3.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader$5, __assign$1({ onClick: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$4, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$3.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer$4, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$4, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$3.autoship.id === radioCheck.id
|
|
6301
6301
|
? benefitsColor.selected
|
|
6302
6302
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$4, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$3.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$4, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$4, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6303
6303
|
};
|
|
6304
6304
|
|
|
6305
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6305
|
+
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) {
|
|
6306
6306
|
var theme = _a.theme;
|
|
6307
6307
|
return theme.name === 'TheSpaDr' &&
|
|
6308
6308
|
"\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 ";
|
|
6309
6309
|
});
|
|
6310
|
-
var DiscountTag$3 = newStyled.div(templateObject_2$
|
|
6310
|
+
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) {
|
|
6311
6311
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6312
6312
|
return isSelected
|
|
6313
6313
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6323,7 +6323,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6323
6323
|
}
|
|
6324
6324
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6325
6325
|
};
|
|
6326
|
-
var ContainerBase$4 = newStyled.div(templateObject_3$
|
|
6326
|
+
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) {
|
|
6327
6327
|
var borderRadiusValue = _a.borderRadiusValue;
|
|
6328
6328
|
return borderRadiusValue !== null && borderRadiusValue !== void 0 ? borderRadiusValue : '8px';
|
|
6329
6329
|
}, function (_a) {
|
|
@@ -6358,13 +6358,13 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_11$8 || (templateOb
|
|
|
6358
6358
|
var selected = _a.selected, theme = _a.theme;
|
|
6359
6359
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6360
6360
|
});
|
|
6361
|
-
var Container$
|
|
6361
|
+
var Container$1m = newStyled.div(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6362
6362
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6363
6363
|
var theme = _a.theme;
|
|
6364
6364
|
return theme.component.autoship.tooltip.margin;
|
|
6365
6365
|
});
|
|
6366
6366
|
var BulletIconWrapper = newStyled.div(templateObject_14$3 || (templateObject_14$3 = __makeTemplateObject(["\n margin-right: 9px;\n"], ["\n margin-right: 9px;\n"])));
|
|
6367
|
-
var templateObject_1$
|
|
6367
|
+
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;
|
|
6368
6368
|
|
|
6369
6369
|
var radioIds$2 = {
|
|
6370
6370
|
oneTime: {
|
|
@@ -6424,7 +6424,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6424
6424
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6425
6425
|
};
|
|
6426
6426
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6427
|
-
return (jsxRuntime.jsxs(Container$
|
|
6427
|
+
return (jsxRuntime.jsxs(Container$1m, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(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: [jsxRuntime.jsx(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), jsxRuntime.jsxs(SubscriptionHeader$4, { children: [jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$2.autoship.id) }, void 0), jsxRuntime.jsx(TooltipWrapper$1, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer$3, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$3, { children: [hasInfoBulletIcons && (jsxRuntime.jsx(BulletIconWrapper, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6428
6428
|
? benefitsColor.selected
|
|
6429
6429
|
: benefitsColor.base }, void 0) }, void 0)), jsxRuntime.jsx(BenefitText$3, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(FlexContainer$3, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Delivery Every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxRuntime.jsxs(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: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$2.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6430
6430
|
};
|
|
@@ -6443,13 +6443,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6443
6443
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6444
6444
|
_a$2);
|
|
6445
6445
|
|
|
6446
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6447
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6448
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6446
|
+
var CustomerDetails = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject([""], [""])));
|
|
6447
|
+
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"])));
|
|
6448
|
+
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"])));
|
|
6449
6449
|
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"])));
|
|
6450
6450
|
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"])));
|
|
6451
6451
|
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"])));
|
|
6452
|
-
var templateObject_1$
|
|
6452
|
+
var templateObject_1$2b, templateObject_2$1B, templateObject_3$1i, templateObject_4$11, templateObject_5$N, templateObject_6$F;
|
|
6453
6453
|
|
|
6454
6454
|
var NameWithStars = function (_a) {
|
|
6455
6455
|
var name = _a.name, size = _a.size;
|
|
@@ -6467,9 +6467,9 @@ var ResultFeedback = function (_a) {
|
|
|
6467
6467
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6468
6468
|
};
|
|
6469
6469
|
|
|
6470
|
-
var Container$
|
|
6471
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6472
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6470
|
+
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; });
|
|
6471
|
+
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"])));
|
|
6472
|
+
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; });
|
|
6473
6473
|
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) {
|
|
6474
6474
|
var theme = _a.theme;
|
|
6475
6475
|
return theme.colors.pallete.secondary.color;
|
|
@@ -6480,7 +6480,7 @@ var UserInfoText = newStyled.div(templateObject_4$10 || (templateObject_4$10 = _
|
|
|
6480
6480
|
var theme = _a.theme, size = _a.size;
|
|
6481
6481
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6482
6482
|
});
|
|
6483
|
-
var templateObject_1$
|
|
6483
|
+
var templateObject_1$2a, templateObject_2$1A, templateObject_3$1h, templateObject_4$10;
|
|
6484
6484
|
|
|
6485
6485
|
/* base styles & size variants */
|
|
6486
6486
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6555,10 +6555,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6555
6555
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6556
6556
|
var infoText = buildInfoText(name, age, months);
|
|
6557
6557
|
var Component = componentByVariant[variant];
|
|
6558
|
-
return (jsxRuntime.jsxs(Container$
|
|
6558
|
+
return (jsxRuntime.jsxs(Container$1l, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6559
6559
|
};
|
|
6560
6560
|
|
|
6561
|
-
var Section = newStyled.div(templateObject_1$
|
|
6561
|
+
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) {
|
|
6562
6562
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6563
6563
|
});
|
|
6564
6564
|
var CardHeader = function (_a) {
|
|
@@ -6569,16 +6569,16 @@ var CardFooter = function (_a) {
|
|
|
6569
6569
|
var children = _a.children;
|
|
6570
6570
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6571
6571
|
};
|
|
6572
|
-
var templateObject_1$
|
|
6572
|
+
var templateObject_1$29;
|
|
6573
6573
|
|
|
6574
|
-
var Body$3 = newStyled.div(templateObject_1$
|
|
6574
|
+
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"])));
|
|
6575
6575
|
var CardBody$1 = function (_a) {
|
|
6576
6576
|
var children = _a.children;
|
|
6577
6577
|
return jsxRuntime.jsx(Body$3, { children: children }, void 0);
|
|
6578
6578
|
};
|
|
6579
|
-
var templateObject_1$
|
|
6579
|
+
var templateObject_1$28;
|
|
6580
6580
|
|
|
6581
|
-
var Container$
|
|
6581
|
+
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) {
|
|
6582
6582
|
var flex = _a.flex;
|
|
6583
6583
|
return flex &&
|
|
6584
6584
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6593,23 +6593,23 @@ var Container$1j = newStyled.div(templateObject_1$26 || (templateObject_1$26 = _
|
|
|
6593
6593
|
var Card$2 = function (_a) {
|
|
6594
6594
|
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;
|
|
6595
6595
|
var theme = useTheme();
|
|
6596
|
-
return (jsxRuntime.jsx(Container$
|
|
6596
|
+
return (jsxRuntime.jsx(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));
|
|
6597
6597
|
};
|
|
6598
6598
|
var Card$3 = Object.assign(Card$2, {
|
|
6599
6599
|
Header: CardHeader,
|
|
6600
6600
|
Footer: CardFooter,
|
|
6601
6601
|
Body: CardBody$1,
|
|
6602
6602
|
});
|
|
6603
|
-
var templateObject_1$
|
|
6603
|
+
var templateObject_1$27;
|
|
6604
6604
|
|
|
6605
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6606
|
-
var StyledContainer$1 = newStyled.div(templateObject_2$
|
|
6607
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6605
|
+
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"])));
|
|
6606
|
+
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"])));
|
|
6607
|
+
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) {
|
|
6608
6608
|
var color = _a.color;
|
|
6609
6609
|
return color;
|
|
6610
6610
|
});
|
|
6611
6611
|
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"])));
|
|
6612
|
-
var templateObject_1$
|
|
6612
|
+
var templateObject_1$26, templateObject_2$1z, templateObject_3$1g, templateObject_4$$;
|
|
6613
6613
|
|
|
6614
6614
|
var Minimalistic = function (_a) {
|
|
6615
6615
|
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;
|
|
@@ -6617,24 +6617,24 @@ var Minimalistic = function (_a) {
|
|
|
6617
6617
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer$1, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer$1, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer$1, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6618
6618
|
};
|
|
6619
6619
|
|
|
6620
|
-
var StyledContainer = newStyled.div(templateObject_1$
|
|
6621
|
-
var templateObject_1$
|
|
6620
|
+
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"])));
|
|
6621
|
+
var templateObject_1$25;
|
|
6622
6622
|
|
|
6623
6623
|
var Motivator = function (_a) {
|
|
6624
6624
|
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;
|
|
6625
6625
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: true, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsx(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: typeof content === 'string' ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: content }), void 0)) : (content) }), void 0) }), void 0));
|
|
6626
6626
|
};
|
|
6627
6627
|
|
|
6628
|
-
var Container$
|
|
6629
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6630
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6628
|
+
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"])));
|
|
6629
|
+
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; });
|
|
6630
|
+
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; });
|
|
6631
6631
|
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"])));
|
|
6632
6632
|
var Simple = function (_a) {
|
|
6633
6633
|
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;
|
|
6634
6634
|
var theme = useTheme();
|
|
6635
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
6635
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$1j, { children: [jsxRuntime.jsx(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6636
6636
|
};
|
|
6637
|
-
var templateObject_1$
|
|
6637
|
+
var templateObject_1$24, templateObject_2$1y, templateObject_3$1f, templateObject_4$_;
|
|
6638
6638
|
|
|
6639
6639
|
var Bundle = {
|
|
6640
6640
|
Minimalistic: Minimalistic,
|
|
@@ -6642,12 +6642,12 @@ var Bundle = {
|
|
|
6642
6642
|
Motivator: Motivator,
|
|
6643
6643
|
};
|
|
6644
6644
|
|
|
6645
|
-
var Container$
|
|
6645
|
+
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) {
|
|
6646
6646
|
var displayBNPL = _a.displayBNPL;
|
|
6647
6647
|
return (displayBNPL ? 'flex' : 'none');
|
|
6648
6648
|
});
|
|
6649
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6650
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6649
|
+
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"])));
|
|
6650
|
+
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"])));
|
|
6651
6651
|
var BuyNowPayLater = function (_a) {
|
|
6652
6652
|
var _b;
|
|
6653
6653
|
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;
|
|
@@ -6667,16 +6667,16 @@ var BuyNowPayLater = function (_a) {
|
|
|
6667
6667
|
else {
|
|
6668
6668
|
dynamicText = "or 4 interest-free payments of ";
|
|
6669
6669
|
}
|
|
6670
|
-
return (jsxRuntime.jsx(Container$
|
|
6670
|
+
return (jsxRuntime.jsx(Container$1i, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: [jsxRuntime.jsxs("div", { children: [dynamicText, jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold", style: {
|
|
6671
6671
|
display: 'inline',
|
|
6672
6672
|
fontSize: fontSize,
|
|
6673
6673
|
paddingLeft: '0.25rem',
|
|
6674
6674
|
paddingRight: '0.25rem',
|
|
6675
6675
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsxRuntime.jsx(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsxRuntime.jsx(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));
|
|
6676
6676
|
};
|
|
6677
|
-
var templateObject_1$
|
|
6677
|
+
var templateObject_1$23, templateObject_2$1x, templateObject_3$1e;
|
|
6678
6678
|
|
|
6679
|
-
var Text$6 = newStyled.h3(templateObject_1$
|
|
6679
|
+
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) {
|
|
6680
6680
|
var backgroundColor = _a.backgroundColor;
|
|
6681
6681
|
return backgroundColor;
|
|
6682
6682
|
}, function (_a) {
|
|
@@ -6691,47 +6691,47 @@ var OfferBanner = function (_a) {
|
|
|
6691
6691
|
var theme = useTheme();
|
|
6692
6692
|
return (jsxRuntime.jsx(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));
|
|
6693
6693
|
};
|
|
6694
|
-
var templateObject_1$
|
|
6694
|
+
var templateObject_1$22;
|
|
6695
6695
|
|
|
6696
|
-
var Container$
|
|
6696
|
+
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"); });
|
|
6697
6697
|
var CloseButton$1 = function (_a) {
|
|
6698
6698
|
var onClick = _a.onClick, size = _a.size;
|
|
6699
6699
|
var theme = useTheme();
|
|
6700
|
-
return (jsxRuntime.jsx(Container$
|
|
6700
|
+
return (jsxRuntime.jsx(Container$1h, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6701
6701
|
};
|
|
6702
|
-
var templateObject_1$
|
|
6702
|
+
var templateObject_1$21;
|
|
6703
6703
|
|
|
6704
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6704
|
+
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; });
|
|
6705
6705
|
var Description$1 = function (_a) {
|
|
6706
6706
|
var text = _a.text;
|
|
6707
6707
|
var theme = useTheme();
|
|
6708
6708
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6709
6709
|
};
|
|
6710
|
-
var templateObject_1$
|
|
6710
|
+
var templateObject_1$20;
|
|
6711
6711
|
|
|
6712
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6712
|
+
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; });
|
|
6713
6713
|
var Promo = function (_a) {
|
|
6714
6714
|
var text = _a.text;
|
|
6715
6715
|
var theme = useTheme();
|
|
6716
6716
|
return (jsxRuntime.jsx(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6717
6717
|
};
|
|
6718
|
-
var templateObject_1$
|
|
6718
|
+
var templateObject_1$1$;
|
|
6719
6719
|
|
|
6720
|
-
var Text$4 = newStyled.span(templateObject_1$
|
|
6720
|
+
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; });
|
|
6721
6721
|
var Title$8 = function (_a) {
|
|
6722
6722
|
var title = _a.title;
|
|
6723
6723
|
var theme = useTheme();
|
|
6724
6724
|
return jsxRuntime.jsx(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6725
6725
|
};
|
|
6726
|
-
var templateObject_1$
|
|
6726
|
+
var templateObject_1$1_;
|
|
6727
6727
|
|
|
6728
|
-
var Container$
|
|
6729
|
-
var templateObject_1$
|
|
6728
|
+
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"); });
|
|
6729
|
+
var templateObject_1$1Z;
|
|
6730
6730
|
|
|
6731
6731
|
var TrashButton = function (_a) {
|
|
6732
6732
|
var onClick = _a.onClick, size = _a.size;
|
|
6733
6733
|
useTheme();
|
|
6734
|
-
return (jsxRuntime.jsx(Container$
|
|
6734
|
+
return (jsxRuntime.jsx(Container$1g, __assign$1({ onClick: onClick, "data-testid": "CartProductItemTrashBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Trash, { width: size, height: size, fill: "#292929" }, void 0) }), void 0));
|
|
6735
6735
|
};
|
|
6736
6736
|
|
|
6737
6737
|
var CartProductItem = {
|
|
@@ -6743,9 +6743,9 @@ var CartProductItem = {
|
|
|
6743
6743
|
TrashButton: TrashButton,
|
|
6744
6744
|
};
|
|
6745
6745
|
|
|
6746
|
-
var Container$
|
|
6747
|
-
var MobileContainer = newStyled(Container$
|
|
6748
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6746
|
+
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"])));
|
|
6747
|
+
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"])));
|
|
6748
|
+
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"])));
|
|
6749
6749
|
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"])));
|
|
6750
6750
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$M || (templateObject_5$M = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6751
6751
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$E || (templateObject_6$E = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6754,9 +6754,9 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$p || (t
|
|
|
6754
6754
|
var ClubPriceLabel = function (_a) {
|
|
6755
6755
|
var clubPrice = _a.clubPrice;
|
|
6756
6756
|
var isMobile = useWindowDimensions().isMobile;
|
|
6757
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$
|
|
6757
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$1f, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6758
6758
|
};
|
|
6759
|
-
var templateObject_1$
|
|
6759
|
+
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;
|
|
6760
6760
|
|
|
6761
6761
|
var Spacing = function (_a) {
|
|
6762
6762
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6764,9 +6764,9 @@ var Spacing = function (_a) {
|
|
|
6764
6764
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6765
6765
|
};
|
|
6766
6766
|
|
|
6767
|
-
var Container$
|
|
6768
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6769
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6767
|
+
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"])));
|
|
6768
|
+
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"])));
|
|
6769
|
+
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"])));
|
|
6770
6770
|
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) {
|
|
6771
6771
|
var index = _a.index;
|
|
6772
6772
|
return "".concat(6 + 3 * index, "px");
|
|
@@ -6776,12 +6776,12 @@ var Bar$2 = newStyled('div')(templateObject_4$Y || (templateObject_4$Y = __makeT
|
|
|
6776
6776
|
});
|
|
6777
6777
|
var StrengthBars = function (_a) {
|
|
6778
6778
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6779
|
-
return (jsxRuntime.jsxs(Container$
|
|
6779
|
+
return (jsxRuntime.jsxs(Container$1e, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6780
6780
|
};
|
|
6781
|
-
var templateObject_1$
|
|
6781
|
+
var templateObject_1$1X, templateObject_2$1v, templateObject_3$1c, templateObject_4$Y;
|
|
6782
6782
|
|
|
6783
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6784
|
-
var templateObject_1$
|
|
6783
|
+
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"])));
|
|
6784
|
+
var templateObject_1$1W;
|
|
6785
6785
|
|
|
6786
6786
|
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;}}";
|
|
6787
6787
|
|
|
@@ -6803,10 +6803,10 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6803
6803
|
|
|
6804
6804
|
var STARTS_NUMBER = 5;
|
|
6805
6805
|
|
|
6806
|
-
var Container$
|
|
6807
|
-
var templateObject_1$
|
|
6806
|
+
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"])));
|
|
6807
|
+
var templateObject_1$1V;
|
|
6808
6808
|
|
|
6809
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6809
|
+
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) {
|
|
6810
6810
|
var marginRight = _a.marginRight;
|
|
6811
6811
|
return marginRight;
|
|
6812
6812
|
});
|
|
@@ -6818,11 +6818,11 @@ var StarList = function (_a) {
|
|
|
6818
6818
|
width: theme.component.stars.element[size].width,
|
|
6819
6819
|
height: theme.component.stars.element[size].height,
|
|
6820
6820
|
};
|
|
6821
|
-
return (jsxRuntime.jsx(Container$
|
|
6821
|
+
return (jsxRuntime.jsx(Container$1d, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6822
6822
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6823
6823
|
}) }, void 0));
|
|
6824
6824
|
};
|
|
6825
|
-
var templateObject_1$
|
|
6825
|
+
var templateObject_1$1U;
|
|
6826
6826
|
|
|
6827
6827
|
/* base styles & size variants */
|
|
6828
6828
|
var LabelStyles = {
|
|
@@ -6870,7 +6870,7 @@ var LabelStyles = {
|
|
|
6870
6870
|
});
|
|
6871
6871
|
},
|
|
6872
6872
|
};
|
|
6873
|
-
var Container$
|
|
6873
|
+
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"])));
|
|
6874
6874
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6875
6875
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6876
6876
|
return [
|
|
@@ -6889,8 +6889,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6889
6889
|
}),
|
|
6890
6890
|
];
|
|
6891
6891
|
});
|
|
6892
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6893
|
-
var templateObject_1$
|
|
6892
|
+
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; });
|
|
6893
|
+
var templateObject_1$1T, templateObject_2$1u;
|
|
6894
6894
|
|
|
6895
6895
|
var Rating = function (_a) {
|
|
6896
6896
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6911,22 +6911,22 @@ var Rating = function (_a) {
|
|
|
6911
6911
|
href: reviewsContainerId,
|
|
6912
6912
|
}
|
|
6913
6913
|
: {};
|
|
6914
|
-
return (jsxRuntime.jsxs(Container$
|
|
6914
|
+
return (jsxRuntime.jsxs(Container$1c, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), (reviews || reviewsText) && (jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0))] }), void 0));
|
|
6915
6915
|
};
|
|
6916
6916
|
|
|
6917
|
-
var ImageWrapper$4 = newStyled.div(templateObject_1$
|
|
6917
|
+
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) {
|
|
6918
6918
|
var width = _a.width;
|
|
6919
6919
|
return width !== null && width !== void 0 ? width : '30%';
|
|
6920
6920
|
}, function (_a) {
|
|
6921
6921
|
var height = _a.height;
|
|
6922
6922
|
return height !== null && height !== void 0 ? height : 'auto';
|
|
6923
6923
|
});
|
|
6924
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6925
|
-
var RatingText = newStyled.span(templateObject_3$
|
|
6924
|
+
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"])));
|
|
6925
|
+
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) {
|
|
6926
6926
|
var fontSize = _a.fontSize;
|
|
6927
6927
|
return fontSize;
|
|
6928
6928
|
});
|
|
6929
|
-
var templateObject_1$
|
|
6929
|
+
var templateObject_1$1S, templateObject_2$1t, templateObject_3$1b;
|
|
6930
6930
|
|
|
6931
6931
|
var OfferAtCartImage = function (_a) {
|
|
6932
6932
|
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width, height = _a.height;
|
|
@@ -6944,8 +6944,8 @@ var OfferAtCartTitle = function (_a) {
|
|
|
6944
6944
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: content }, void 0);
|
|
6945
6945
|
};
|
|
6946
6946
|
|
|
6947
|
-
var Arrow$1 = newStyled.div(templateObject_1$
|
|
6948
|
-
var templateObject_1$
|
|
6947
|
+
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"])));
|
|
6948
|
+
var templateObject_1$1R;
|
|
6949
6949
|
|
|
6950
6950
|
var ArrowTip$1 = function (_a) {
|
|
6951
6951
|
var _b = _a.isRight, isRight = _b === void 0 ? false : _b;
|
|
@@ -6984,9 +6984,9 @@ var getDropdownOptions = function (frequency) {
|
|
|
6984
6984
|
}); });
|
|
6985
6985
|
};
|
|
6986
6986
|
|
|
6987
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
6988
|
-
var BenefitText$2 = newStyled(Text$7)(templateObject_2$
|
|
6989
|
-
var templateObject_1$
|
|
6987
|
+
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"])));
|
|
6988
|
+
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"])));
|
|
6989
|
+
var templateObject_1$1Q, templateObject_2$1s;
|
|
6990
6990
|
|
|
6991
6991
|
var BenefitsList = function (_a) {
|
|
6992
6992
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6997,15 +6997,15 @@ var BenefitsList = function (_a) {
|
|
|
6997
6997
|
}) }, void 0));
|
|
6998
6998
|
};
|
|
6999
6999
|
|
|
7000
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
7000
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7001
7001
|
var timerColor = _a.timerColor;
|
|
7002
7002
|
return timerColor || '';
|
|
7003
7003
|
});
|
|
7004
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
7004
|
+
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) {
|
|
7005
7005
|
var timerColor = _a.timerColor;
|
|
7006
7006
|
return timerColor || '';
|
|
7007
7007
|
});
|
|
7008
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
7008
|
+
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) {
|
|
7009
7009
|
var theme = _a.theme;
|
|
7010
7010
|
return theme.colors.shades.white.color;
|
|
7011
7011
|
}, function (_a) {
|
|
@@ -7013,7 +7013,7 @@ var UnitBlock = newStyled(Text$7)(templateObject_3$19 || (templateObject_3$19 =
|
|
|
7013
7013
|
return theme.colors.shades.white.color;
|
|
7014
7014
|
});
|
|
7015
7015
|
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"])));
|
|
7016
|
-
var templateObject_1$
|
|
7016
|
+
var templateObject_1$1P, templateObject_2$1r, templateObject_3$1a, templateObject_4$X;
|
|
7017
7017
|
|
|
7018
7018
|
var HRS = 'HRS';
|
|
7019
7019
|
var MIN = 'MIN';
|
|
@@ -7054,7 +7054,7 @@ var Timer = function (_a) {
|
|
|
7054
7054
|
return (jsxRuntime.jsxs(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));
|
|
7055
7055
|
};
|
|
7056
7056
|
|
|
7057
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
7057
|
+
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) {
|
|
7058
7058
|
var textPosition = _a.textPosition;
|
|
7059
7059
|
return textPosition;
|
|
7060
7060
|
}, function (_a) {
|
|
@@ -7067,7 +7067,7 @@ var TimerContainer = newStyled.div(templateObject_1$1N || (templateObject_1$1N =
|
|
|
7067
7067
|
var borderRadius = _a.borderRadius;
|
|
7068
7068
|
return borderRadius || '8px';
|
|
7069
7069
|
});
|
|
7070
|
-
var templateObject_1$
|
|
7070
|
+
var templateObject_1$1O;
|
|
7071
7071
|
|
|
7072
7072
|
var getDefaultCountdown = function () {
|
|
7073
7073
|
var tomorrowDate = new Date();
|
|
@@ -7083,7 +7083,7 @@ var HurryUp = function (_a) {
|
|
|
7083
7083
|
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
7084
7084
|
};
|
|
7085
7085
|
|
|
7086
|
-
var Container$
|
|
7086
|
+
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) {
|
|
7087
7087
|
var size = _a.size;
|
|
7088
7088
|
return (size ? size : '100%');
|
|
7089
7089
|
}, function (_a) {
|
|
@@ -7098,7 +7098,7 @@ var borderSize = {
|
|
|
7098
7098
|
large: '3px',
|
|
7099
7099
|
};
|
|
7100
7100
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
7101
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
7101
|
+
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) {
|
|
7102
7102
|
var size = _a.size;
|
|
7103
7103
|
return borderSize[size];
|
|
7104
7104
|
}, function (_a) {
|
|
@@ -7111,29 +7111,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1p || (templateObject_2$1p =
|
|
|
7111
7111
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
7112
7112
|
return duration;
|
|
7113
7113
|
});
|
|
7114
|
-
var templateObject_1$
|
|
7114
|
+
var templateObject_1$1N, templateObject_2$1q;
|
|
7115
7115
|
|
|
7116
7116
|
var Spinner = function (_a) {
|
|
7117
7117
|
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;
|
|
7118
|
-
return (jsxRuntime.jsx(Container$
|
|
7118
|
+
return (jsxRuntime.jsx(Container$1b, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsxRuntime.jsx(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : exports.ComponentSize.Small }, void 0)) }), void 0));
|
|
7119
7119
|
};
|
|
7120
7120
|
|
|
7121
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
7122
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
7123
|
-
var templateObject_1$
|
|
7121
|
+
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); });
|
|
7122
|
+
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; });
|
|
7123
|
+
var templateObject_1$1M, templateObject_2$1p;
|
|
7124
7124
|
|
|
7125
7125
|
var ProgressBar$1 = function (_a) {
|
|
7126
7126
|
var progress = _a.progress, hide = _a.hide;
|
|
7127
7127
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
7128
7128
|
};
|
|
7129
7129
|
|
|
7130
|
-
var Container$
|
|
7131
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
7132
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
7130
|
+
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"])));
|
|
7131
|
+
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; });
|
|
7132
|
+
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"])));
|
|
7133
7133
|
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"])));
|
|
7134
7134
|
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"])));
|
|
7135
7135
|
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"])));
|
|
7136
|
-
var templateObject_1$
|
|
7136
|
+
var templateObject_1$1L, templateObject_2$1o, templateObject_3$19, templateObject_4$W, templateObject_5$L, templateObject_6$D;
|
|
7137
7137
|
|
|
7138
7138
|
var Video$1 = function (_a) {
|
|
7139
7139
|
var _b, _c;
|
|
@@ -7184,9 +7184,78 @@ var Video$1 = function (_a) {
|
|
|
7184
7184
|
}
|
|
7185
7185
|
setIsLoading(false);
|
|
7186
7186
|
};
|
|
7187
|
-
return (jsxRuntime.jsxs(Container$
|
|
7187
|
+
return (jsxRuntime.jsxs(Container$1a, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxRuntime.jsxs(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_off", testId: "sound-off-icon" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on", testId: "sound-on-icon" }, void 0)] }), void 0)), jsxRuntime.jsxs(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: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
7188
7188
|
};
|
|
7189
7189
|
|
|
7190
|
+
var Container$19 = newStyled.div(function (props) { return ({
|
|
7191
|
+
height: 'auto',
|
|
7192
|
+
textAlign: 'center',
|
|
7193
|
+
justifyContent: 'center',
|
|
7194
|
+
alignItems: 'center',
|
|
7195
|
+
display: props.textPosition !== 'bottom' ? 'flex' : 'inherit',
|
|
7196
|
+
flexDirection: props.textPosition === 'right'
|
|
7197
|
+
? 'row'
|
|
7198
|
+
: props.textPosition === 'top'
|
|
7199
|
+
? 'column-reverse'
|
|
7200
|
+
: props.textPosition === 'left'
|
|
7201
|
+
? 'row-reverse'
|
|
7202
|
+
: 'row',
|
|
7203
|
+
}); });
|
|
7204
|
+
var IconWrapper = newStyled.div(function (props) { return ({
|
|
7205
|
+
borderRadius: '500px',
|
|
7206
|
+
width: "".concat(props.iconSize * 30, "px"),
|
|
7207
|
+
height: "".concat(props.iconSize * 30, "px"),
|
|
7208
|
+
margin: '0 auto 10px',
|
|
7209
|
+
display: 'flex',
|
|
7210
|
+
alignItems: 'center',
|
|
7211
|
+
justifyContent: 'center',
|
|
7212
|
+
backgroundColor: props.backgroundColor,
|
|
7213
|
+
}); });
|
|
7214
|
+
var IconsWithTitle = function (_a) {
|
|
7215
|
+
var _b;
|
|
7216
|
+
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;
|
|
7217
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
7218
|
+
// @ts-ignore
|
|
7219
|
+
var IconComponent = (_b = Icon[iconFolder][iconName]) !== null && _b !== void 0 ? _b : (function () { return 'Not found'; });
|
|
7220
|
+
if (IconComponent == null) {
|
|
7221
|
+
console.error('Icon', iconName, 'not found');
|
|
7222
|
+
return null;
|
|
7223
|
+
}
|
|
7224
|
+
var parseStringStyle = function (style) {
|
|
7225
|
+
try {
|
|
7226
|
+
return JSON.parse(style);
|
|
7227
|
+
}
|
|
7228
|
+
catch (e) {
|
|
7229
|
+
return undefined;
|
|
7230
|
+
}
|
|
7231
|
+
};
|
|
7232
|
+
var titleStyles = parseStringStyle(iconTitleStyle);
|
|
7233
|
+
var iconStyles = parseStringStyle(iconStyle);
|
|
7234
|
+
var defaultTitleStyle = {
|
|
7235
|
+
fontSize: '14px',
|
|
7236
|
+
textTransform: 'uppercase',
|
|
7237
|
+
textAlign: 'center',
|
|
7238
|
+
lineHeight: '18px',
|
|
7239
|
+
};
|
|
7240
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$19, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
7241
|
+
};
|
|
7242
|
+
|
|
7243
|
+
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'; });
|
|
7244
|
+
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"])));
|
|
7245
|
+
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'; });
|
|
7246
|
+
var templateObject_1$1K, templateObject_2$1n, templateObject_3$18;
|
|
7247
|
+
|
|
7248
|
+
function IconsWithTitleList(_a) {
|
|
7249
|
+
var list = _a.list, loading = _a.loading, dividerWidth = _a.dividerWidth, dividerHeight = _a.dividerHeight, skeletonHeight = _a.skeletonHeight, itemsGapDesktop = _a.itemsGapDesktop, itemsGapMobile = _a.itemsGapMobile;
|
|
7250
|
+
if (loading) {
|
|
7251
|
+
return jsxRuntime.jsx(SkeletonBox, { height: skeletonHeight !== null && skeletonHeight !== void 0 ? skeletonHeight : '56px' }, void 0);
|
|
7252
|
+
}
|
|
7253
|
+
return (jsxRuntime.jsx(Container$18, __assign$1({ desktopGap: itemsGapDesktop, mobileGap: itemsGapMobile }, { children: list === null || list === void 0 ? void 0 : list.map(function (item, index) {
|
|
7254
|
+
var _a, _b, _c, _d, _e, _f;
|
|
7255
|
+
return (jsxRuntime.jsxs(Wrapper$6, { children: [jsxRuntime.jsx(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 && (jsxRuntime.jsx(DesktopDivider, { width: dividerWidth, height: dividerHeight, "data-testid": "desktop-divider" }, void 0))] }, item.text));
|
|
7256
|
+
}) }), void 0));
|
|
7257
|
+
}
|
|
7258
|
+
|
|
7190
7259
|
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) {
|
|
7191
7260
|
var theme = _a.theme;
|
|
7192
7261
|
return theme.colors.shades.black.color;
|
|
@@ -7231,7 +7300,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7231
7300
|
};
|
|
7232
7301
|
}
|
|
7233
7302
|
};
|
|
7234
|
-
var Container$
|
|
7303
|
+
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) {
|
|
7235
7304
|
var backgroundColor = _a.backgroundColor;
|
|
7236
7305
|
return backgroundColor;
|
|
7237
7306
|
}, function (_a) {
|
|
@@ -7272,7 +7341,7 @@ var IconButton = function (_a) {
|
|
|
7272
7341
|
var _b, _c;
|
|
7273
7342
|
var children = _a.children, disabled = _a.disabled, _d = _a.size, size = _d === void 0 ? exports.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;
|
|
7274
7343
|
var theme = useTheme();
|
|
7275
|
-
return (jsxRuntime.jsx(Container$
|
|
7344
|
+
return (jsxRuntime.jsx(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));
|
|
7276
7345
|
};
|
|
7277
7346
|
var templateObject_1$1I;
|
|
7278
7347
|
|
|
@@ -7336,7 +7405,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7336
7405
|
: exports.ComponentSize.XSmall;
|
|
7337
7406
|
return (jsxRuntime.jsx(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));
|
|
7338
7407
|
};
|
|
7339
|
-
return (jsxRuntime.jsxs(Container$
|
|
7408
|
+
return (jsxRuntime.jsxs(Container$1y, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price$1, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsxs(PriceContainerV2, { children: [jsxRuntime.jsx(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), jsxRuntime.jsxs(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
7340
7409
|
? finalPriceArray[0]
|
|
7341
7410
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7342
7411
|
};
|
|
@@ -7414,7 +7483,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7414
7483
|
});
|
|
7415
7484
|
});
|
|
7416
7485
|
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"])));
|
|
7417
|
-
var Container$
|
|
7486
|
+
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"])));
|
|
7418
7487
|
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"])));
|
|
7419
7488
|
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) {
|
|
7420
7489
|
var theme = _a.theme;
|
|
@@ -7576,12 +7645,12 @@ var ProductItemMobile = function (_a) {
|
|
|
7576
7645
|
setIsLiked(function (prev) { return !prev; });
|
|
7577
7646
|
likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.onClick(e);
|
|
7578
7647
|
};
|
|
7579
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7648
|
+
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: {
|
|
7580
7649
|
background: {
|
|
7581
7650
|
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,
|
|
7582
7651
|
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,
|
|
7583
7652
|
},
|
|
7584
|
-
} }, 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$
|
|
7653
|
+
} }, 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: exports.ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$4, __assign$1({}, discountTag, { size: exports.ComponentSize.Medium, style: {
|
|
7585
7654
|
letterSpacing: '-0.05rem',
|
|
7586
7655
|
} }), 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: exports.ComponentSize.Small, width: "100%", onClick: function (e) {
|
|
7587
7656
|
e.preventDefault();
|
|
@@ -7602,7 +7671,7 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7602
7671
|
});
|
|
7603
7672
|
});
|
|
7604
7673
|
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; });
|
|
7605
|
-
var Container$
|
|
7674
|
+
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"])));
|
|
7606
7675
|
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"])));
|
|
7607
7676
|
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; });
|
|
7608
7677
|
var getStylesBySize$a = function (size) {
|
|
@@ -7684,9 +7753,9 @@ var ProductItemTK = function (_a) {
|
|
|
7684
7753
|
: undefined }, void 0));
|
|
7685
7754
|
};
|
|
7686
7755
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
7687
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7756
|
+
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: {
|
|
7688
7757
|
cursor: 'pointer',
|
|
7689
|
-
} }, { 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$
|
|
7758
|
+
} }, { 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 () {
|
|
7690
7759
|
if (!colorPicker.shouldStopCardClick) {
|
|
7691
7760
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7692
7761
|
}
|
|
@@ -7704,7 +7773,7 @@ var ProductItemTK = function (_a) {
|
|
|
7704
7773
|
if (colorPicker.shouldStopCardClick) {
|
|
7705
7774
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7706
7775
|
}
|
|
7707
|
-
} }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0)] }), void 0), jsx(Container$
|
|
7776
|
+
} }, { 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 () {
|
|
7708
7777
|
if (!colorPicker.shouldStopCardClick) {
|
|
7709
7778
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
7710
7779
|
}
|
|
@@ -7714,10 +7783,10 @@ var ProductItemTK = function (_a) {
|
|
|
7714
7783
|
};
|
|
7715
7784
|
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;
|
|
7716
7785
|
|
|
7717
|
-
var Container$
|
|
7786
|
+
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"])));
|
|
7718
7787
|
function withProductGrid(ProductItemComponent, data) {
|
|
7719
7788
|
function WithProductGrid(props) {
|
|
7720
|
-
return (jsxRuntime.jsx(Container$
|
|
7789
|
+
return (jsxRuntime.jsx(Container$14, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
7721
7790
|
}
|
|
7722
7791
|
/* istanbul ignore next */
|
|
7723
7792
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
@@ -7795,7 +7864,7 @@ var OutOfStock = function (_a) {
|
|
|
7795
7864
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7796
7865
|
};
|
|
7797
7866
|
|
|
7798
|
-
var Container$
|
|
7867
|
+
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) {
|
|
7799
7868
|
var borderColor = _a.borderColor;
|
|
7800
7869
|
return borderColor;
|
|
7801
7870
|
}, function (_a) {
|
|
@@ -7807,7 +7876,7 @@ var PatternSelector = function (_a) {
|
|
|
7807
7876
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7808
7877
|
var theme = useTheme();
|
|
7809
7878
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7810
|
-
return (jsxRuntime.jsx(Container$
|
|
7879
|
+
return (jsxRuntime.jsx(Container$13, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7811
7880
|
};
|
|
7812
7881
|
var templateObject_1$1C, templateObject_2$1h;
|
|
7813
7882
|
|
|
@@ -8066,14 +8135,14 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
8066
8135
|
return jsx(BaseCTA, __assign$1({}, props, { css: getStyle(theme) }), void 0);
|
|
8067
8136
|
};
|
|
8068
8137
|
|
|
8069
|
-
var Container$
|
|
8138
|
+
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; });
|
|
8070
8139
|
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"])));
|
|
8071
8140
|
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; });
|
|
8072
8141
|
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; });
|
|
8073
8142
|
var Note = function (_a) {
|
|
8074
8143
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
8075
8144
|
var theme = useTheme();
|
|
8076
|
-
return (jsxRuntime.jsxs(Container$
|
|
8145
|
+
return (jsxRuntime.jsxs(Container$12, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$5, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
8077
8146
|
};
|
|
8078
8147
|
var templateObject_1$1y, templateObject_2$1d, templateObject_3$12, templateObject_4$Q;
|
|
8079
8148
|
|
|
@@ -8347,12 +8416,12 @@ var SelectorSecondary = function (_a) {
|
|
|
8347
8416
|
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; });
|
|
8348
8417
|
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; });
|
|
8349
8418
|
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"])));
|
|
8350
|
-
var Container$
|
|
8419
|
+
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'); });
|
|
8351
8420
|
var Accordion = function (_a) {
|
|
8352
8421
|
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;
|
|
8353
8422
|
var theme = useTheme();
|
|
8354
8423
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8355
|
-
return (jsxRuntime.jsxs(Container$
|
|
8424
|
+
return (jsxRuntime.jsxs(Container$11, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
8356
8425
|
};
|
|
8357
8426
|
var templateObject_1$1s, templateObject_2$17, templateObject_3$Z, templateObject_4$L;
|
|
8358
8427
|
|
|
@@ -8517,7 +8586,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8517
8586
|
};
|
|
8518
8587
|
|
|
8519
8588
|
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"])));
|
|
8520
|
-
var Container$
|
|
8589
|
+
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"])));
|
|
8521
8590
|
var FitGuarantee = function (_a) {
|
|
8522
8591
|
var _b;
|
|
8523
8592
|
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;
|
|
@@ -8528,7 +8597,7 @@ var FitGuarantee = function (_a) {
|
|
|
8528
8597
|
console.error('Icon', iconName, 'not found');
|
|
8529
8598
|
return null;
|
|
8530
8599
|
}
|
|
8531
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$
|
|
8600
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$10, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsxRuntime.jsx(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxRuntime.jsxs(Container$10, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
8532
8601
|
margin: '0.1rem 0',
|
|
8533
8602
|
width: '100%',
|
|
8534
8603
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
@@ -8537,7 +8606,7 @@ var FitGuarantee = function (_a) {
|
|
|
8537
8606
|
};
|
|
8538
8607
|
var templateObject_1$1p, templateObject_2$14;
|
|
8539
8608
|
|
|
8540
|
-
var Container
|
|
8609
|
+
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"])));
|
|
8541
8610
|
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; });
|
|
8542
8611
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8543
8612
|
border: 'none',
|
|
@@ -8551,7 +8620,7 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
8551
8620
|
var FitPredictor = function (_a) {
|
|
8552
8621
|
var onClick = _a.onClick;
|
|
8553
8622
|
var theme = useTheme();
|
|
8554
|
-
return (jsxs(Container
|
|
8623
|
+
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));
|
|
8555
8624
|
};
|
|
8556
8625
|
var templateObject_1$1o, templateObject_2$13;
|
|
8557
8626
|
|
|
@@ -12891,7 +12960,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
12891
12960
|
|
|
12892
12961
|
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"])));
|
|
12893
12962
|
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"])));
|
|
12894
|
-
var Container
|
|
12963
|
+
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) {
|
|
12895
12964
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12896
12965
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12897
12966
|
}, function (_a) {
|
|
@@ -12935,7 +13004,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12935
13004
|
var element = document.querySelector(".imageListContainer");
|
|
12936
13005
|
element.scrollBy(0, 200);
|
|
12937
13006
|
};
|
|
12938
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container
|
|
13007
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$_, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
12939
13008
|
arrowWidth: 0.75,
|
|
12940
13009
|
arrowHeight: 1.25,
|
|
12941
13010
|
arrowPadding: 1.625,
|
|
@@ -14535,7 +14604,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14535
14604
|
afterZoomOut: PropTypes.func
|
|
14536
14605
|
} : {};
|
|
14537
14606
|
|
|
14538
|
-
var Container$
|
|
14607
|
+
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) {
|
|
14539
14608
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14540
14609
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14541
14610
|
});
|
|
@@ -14568,7 +14637,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14568
14637
|
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;
|
|
14569
14638
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14570
14639
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
14571
|
-
return (jsxRuntime.jsxs(Container$
|
|
14640
|
+
return (jsxRuntime.jsxs(Container$Z, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [withZoom ? (jsxRuntime.jsx(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
14572
14641
|
alt: content.alt,
|
|
14573
14642
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
14574
14643
|
loading: 'eager',
|
|
@@ -14576,7 +14645,7 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14576
14645
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsxRuntime.jsx(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsxRuntime.jsx(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && (jsxRuntime.jsx(TopRightTagWrapper, { children: jsxRuntime.jsx(TopRightTagContainer$2, { children: topRightTag }, void 0) }, void 0))] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
14577
14646
|
};
|
|
14578
14647
|
|
|
14579
|
-
var Container$
|
|
14648
|
+
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"])));
|
|
14580
14649
|
var templateObject_1$1j;
|
|
14581
14650
|
|
|
14582
14651
|
var getInitialIndex = function (images, selectedValue) {
|
|
@@ -14603,7 +14672,7 @@ var ProductGallery = function (_a) {
|
|
|
14603
14672
|
setActiveIndex(index);
|
|
14604
14673
|
};
|
|
14605
14674
|
var selectedImage = images[activeIndex];
|
|
14606
|
-
return (jsxRuntime.jsxs(Container$
|
|
14675
|
+
return (jsxRuntime.jsxs(Container$Y, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsxRuntime.jsx(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));
|
|
14607
14676
|
};
|
|
14608
14677
|
|
|
14609
14678
|
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; });
|
|
@@ -14617,59 +14686,6 @@ var PaypalButton = function (_a) {
|
|
|
14617
14686
|
};
|
|
14618
14687
|
var templateObject_1$1i;
|
|
14619
14688
|
|
|
14620
|
-
var Container$Y = newStyled.div(function (props) { return ({
|
|
14621
|
-
height: 'auto',
|
|
14622
|
-
textAlign: 'center',
|
|
14623
|
-
justifyContent: 'center',
|
|
14624
|
-
alignItems: 'center',
|
|
14625
|
-
display: props.textPosition !== 'bottom' ? 'flex' : 'inherit',
|
|
14626
|
-
flexDirection: props.textPosition === 'right'
|
|
14627
|
-
? 'row'
|
|
14628
|
-
: props.textPosition === 'top'
|
|
14629
|
-
? 'column-reverse'
|
|
14630
|
-
: props.textPosition === 'left'
|
|
14631
|
-
? 'row-reverse'
|
|
14632
|
-
: 'row',
|
|
14633
|
-
}); });
|
|
14634
|
-
var IconWrapper = newStyled.div(function (props) { return ({
|
|
14635
|
-
borderRadius: '500px',
|
|
14636
|
-
width: "".concat(props.iconSize * 30, "px"),
|
|
14637
|
-
height: "".concat(props.iconSize * 30, "px"),
|
|
14638
|
-
margin: '0 auto 10px',
|
|
14639
|
-
display: 'flex',
|
|
14640
|
-
alignItems: 'center',
|
|
14641
|
-
justifyContent: 'center',
|
|
14642
|
-
backgroundColor: props.backgroundColor,
|
|
14643
|
-
}); });
|
|
14644
|
-
var IconsWithTitle = function (_a) {
|
|
14645
|
-
var _b;
|
|
14646
|
-
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;
|
|
14647
|
-
var isMobile = useWindowDimensions().isMobile;
|
|
14648
|
-
// @ts-ignore
|
|
14649
|
-
var IconComponent = (_b = Icon[iconFolder][iconName]) !== null && _b !== void 0 ? _b : (function () { return 'Not found'; });
|
|
14650
|
-
if (IconComponent == null) {
|
|
14651
|
-
console.error('Icon', iconName, 'not found');
|
|
14652
|
-
return null;
|
|
14653
|
-
}
|
|
14654
|
-
var parseStringStyle = function (style) {
|
|
14655
|
-
try {
|
|
14656
|
-
return JSON.parse(style);
|
|
14657
|
-
}
|
|
14658
|
-
catch (e) {
|
|
14659
|
-
return undefined;
|
|
14660
|
-
}
|
|
14661
|
-
};
|
|
14662
|
-
var titleStyles = parseStringStyle(iconTitleStyle);
|
|
14663
|
-
var iconStyles = parseStringStyle(iconStyle);
|
|
14664
|
-
var defaultTitleStyle = {
|
|
14665
|
-
fontSize: '14px',
|
|
14666
|
-
textTransform: 'uppercase',
|
|
14667
|
-
textAlign: 'center',
|
|
14668
|
-
lineHeight: '18px',
|
|
14669
|
-
};
|
|
14670
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$Y, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
14671
|
-
};
|
|
14672
|
-
|
|
14673
14689
|
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'); });
|
|
14674
14690
|
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'); });
|
|
14675
14691
|
var StyledTitle = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
@@ -22944,6 +22960,7 @@ exports.HurryUp = HurryUp;
|
|
|
22944
22960
|
exports.Icon = Icon;
|
|
22945
22961
|
exports.IconButton = IconButton;
|
|
22946
22962
|
exports.IconsWithTitle = IconsWithTitle;
|
|
22963
|
+
exports.IconsWithTitleList = IconsWithTitleList;
|
|
22947
22964
|
exports.Image = Image$3;
|
|
22948
22965
|
exports.ImageCardWithDescription = ImageCardWithDescription;
|
|
22949
22966
|
exports.Input = Input$3;
|