@trafilea/afrodita-components 6.49.8 → 6.50.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 +17 -1
- package/build/index.esm.js +621 -609
- package/build/index.esm.js.map +1 -1
- package/build/index.js +621 -608
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3215,7 +3215,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3215
3215
|
};
|
|
3216
3216
|
}
|
|
3217
3217
|
};
|
|
3218
|
-
var Container$
|
|
3218
|
+
var Container$1w = newStyled.div(templateObject_1$2x || (templateObject_1$2x = __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) {
|
|
3219
3219
|
var backgroundColor = _a.backgroundColor;
|
|
3220
3220
|
return backgroundColor;
|
|
3221
3221
|
}, function (_a) {
|
|
@@ -3237,7 +3237,7 @@ var Container$1v = newStyled.div(templateObject_1$2w || (templateObject_1$2w = _
|
|
|
3237
3237
|
var size = _a.size;
|
|
3238
3238
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3239
3239
|
});
|
|
3240
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3240
|
+
var H3$2 = newStyled.h3(templateObject_2$1P || (templateObject_2$1P = __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) {
|
|
3241
3241
|
var textColor = _a.textColor;
|
|
3242
3242
|
return textColor;
|
|
3243
3243
|
}, function (_a) {
|
|
@@ -3252,9 +3252,9 @@ var H3$2 = newStyled.h3(templateObject_2$1O || (templateObject_2$1O = __makeTemp
|
|
|
3252
3252
|
var ClubOfferTag = function (_a) {
|
|
3253
3253
|
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;
|
|
3254
3254
|
var theme = useTheme();
|
|
3255
|
-
return (jsxRuntime.jsx(Container$
|
|
3255
|
+
return (jsxRuntime.jsx(Container$1w, __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));
|
|
3256
3256
|
};
|
|
3257
|
-
var templateObject_1$
|
|
3257
|
+
var templateObject_1$2x, templateObject_2$1P;
|
|
3258
3258
|
|
|
3259
3259
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3260
3260
|
var _a, _b, _c;
|
|
@@ -3285,7 +3285,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3285
3285
|
};
|
|
3286
3286
|
}
|
|
3287
3287
|
};
|
|
3288
|
-
var Container$
|
|
3288
|
+
var Container$1v = newStyled.div(templateObject_1$2w || (templateObject_1$2w = __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) {
|
|
3289
3289
|
var backgroundColor = _a.backgroundColor;
|
|
3290
3290
|
return backgroundColor;
|
|
3291
3291
|
}, function (_a) {
|
|
@@ -3307,7 +3307,7 @@ var Container$1u = newStyled.div(templateObject_1$2v || (templateObject_1$2v = _
|
|
|
3307
3307
|
var size = _a.size;
|
|
3308
3308
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3309
3309
|
});
|
|
3310
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
3310
|
+
var H3$1 = newStyled.h3(templateObject_2$1O || (templateObject_2$1O = __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) {
|
|
3311
3311
|
var textColor = _a.textColor;
|
|
3312
3312
|
return textColor;
|
|
3313
3313
|
}, function (_a) {
|
|
@@ -3322,9 +3322,9 @@ var H3$1 = newStyled.h3(templateObject_2$1N || (templateObject_2$1N = __makeTemp
|
|
|
3322
3322
|
var DiscountTag$4 = function (_a) {
|
|
3323
3323
|
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;
|
|
3324
3324
|
var theme = useTheme();
|
|
3325
|
-
return (jsxRuntime.jsx(Container$
|
|
3325
|
+
return (jsxRuntime.jsx(Container$1v, __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));
|
|
3326
3326
|
};
|
|
3327
|
-
var templateObject_1$
|
|
3327
|
+
var templateObject_1$2w, templateObject_2$1O;
|
|
3328
3328
|
|
|
3329
3329
|
var Viewports = {
|
|
3330
3330
|
mobile: 'mobile',
|
|
@@ -3433,8 +3433,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3433
3433
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3434
3434
|
}
|
|
3435
3435
|
};
|
|
3436
|
-
var Container$
|
|
3437
|
-
var Price$1 = newStyled.p(templateObject_2$
|
|
3436
|
+
var Container$1u = newStyled.div(templateObject_1$2v || (templateObject_1$2v = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3437
|
+
var Price$1 = newStyled.p(templateObject_2$1N || (templateObject_2$1N = __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) {
|
|
3438
3438
|
var weight = _a.weight;
|
|
3439
3439
|
return (weight ? weight : '400');
|
|
3440
3440
|
}, function (_a) {
|
|
@@ -3458,7 +3458,7 @@ var Price$1 = newStyled.p(templateObject_2$1M || (templateObject_2$1M = __makeTe
|
|
|
3458
3458
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3459
3459
|
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3460
3460
|
});
|
|
3461
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3461
|
+
var TagContainer = newStyled.div(templateObject_3$1o || (templateObject_3$1o = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3462
3462
|
var _b;
|
|
3463
3463
|
var size = _a.size;
|
|
3464
3464
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3489,11 +3489,11 @@ var PriceLabel$1 = function (_a) {
|
|
|
3489
3489
|
: exports.ComponentSize.XSmall;
|
|
3490
3490
|
return (jsxRuntime.jsx(Price$1, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3491
3491
|
};
|
|
3492
|
-
return (jsxRuntime.jsxs(Container$
|
|
3492
|
+
return (jsxRuntime.jsxs(Container$1u, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { 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(jsxRuntime.Fragment, { children: [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), !!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));
|
|
3493
3493
|
};
|
|
3494
|
-
var templateObject_1$
|
|
3494
|
+
var templateObject_1$2v, templateObject_2$1N, templateObject_3$1o;
|
|
3495
3495
|
|
|
3496
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3496
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2u || (templateObject_1$2u = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3497
3497
|
var PriceLabelV2$1 = function (_a) {
|
|
3498
3498
|
var _b;
|
|
3499
3499
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3546,7 +3546,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3546
3546
|
var savetoString = saveto.toFixed(2);
|
|
3547
3547
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price$1, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3548
3548
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3549
|
-
return (jsxRuntime.jsxs(Container$
|
|
3549
|
+
return (jsxRuntime.jsxs(Container$1u, __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]
|
|
3550
3550
|
? finalPriceArray[0]
|
|
3551
3551
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3552
3552
|
marginTop: '-6px',
|
|
@@ -3562,11 +3562,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3562
3562
|
lineHeight: '22px',
|
|
3563
3563
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3564
3564
|
};
|
|
3565
|
-
var templateObject_1$
|
|
3565
|
+
var templateObject_1$2u;
|
|
3566
3566
|
|
|
3567
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3568
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3569
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3567
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2t || (templateObject_1$2t = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3568
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1M || (templateObject_2$1M = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3569
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1n || (templateObject_3$1n = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3570
3570
|
var PriceLabelV3 = function (_a) {
|
|
3571
3571
|
var _b;
|
|
3572
3572
|
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"]);
|
|
@@ -3621,7 +3621,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3621
3621
|
return null;
|
|
3622
3622
|
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));
|
|
3623
3623
|
};
|
|
3624
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$
|
|
3624
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$1u, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$1u, { 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: {
|
|
3625
3625
|
marginTop: '-5px',
|
|
3626
3626
|
} }, 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: {
|
|
3627
3627
|
marginTop: '-6px',
|
|
@@ -3637,10 +3637,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
3637
3637
|
lineHeight: '22px',
|
|
3638
3638
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3639
3639
|
};
|
|
3640
|
-
var templateObject_1$
|
|
3640
|
+
var templateObject_1$2t, templateObject_2$1M, templateObject_3$1n;
|
|
3641
3641
|
|
|
3642
|
-
var Container$
|
|
3643
|
-
var Price = newStyled.p(templateObject_2$
|
|
3642
|
+
var Container$1t = newStyled.div(templateObject_1$2s || (templateObject_1$2s = __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"])));
|
|
3643
|
+
var Price = newStyled.p(templateObject_2$1L || (templateObject_2$1L = __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) {
|
|
3644
3644
|
var weight = _a.weight;
|
|
3645
3645
|
return weight !== null && weight !== void 0 ? weight : '400';
|
|
3646
3646
|
}, function (_a) {
|
|
@@ -3653,7 +3653,7 @@ var Price = newStyled.p(templateObject_2$1K || (templateObject_2$1K = __makeTemp
|
|
|
3653
3653
|
var underlined = _a.underlined;
|
|
3654
3654
|
return (underlined ? 'line-through' : 'none');
|
|
3655
3655
|
});
|
|
3656
|
-
var templateObject_1$
|
|
3656
|
+
var templateObject_1$2s, templateObject_2$1L;
|
|
3657
3657
|
|
|
3658
3658
|
function getTestId$1() {
|
|
3659
3659
|
var args = [];
|
|
@@ -3674,10 +3674,10 @@ var PriceLabelV5 = function (_a) {
|
|
|
3674
3674
|
color: color !== null && color !== void 0 ? color : theme.colors.pallete.secondary.color,
|
|
3675
3675
|
weight: 700,
|
|
3676
3676
|
};
|
|
3677
|
-
return (jsxRuntime.jsx(Container$
|
|
3677
|
+
return (jsxRuntime.jsx(Container$1t, __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));
|
|
3678
3678
|
};
|
|
3679
3679
|
|
|
3680
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3680
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2r || (templateObject_1$2r = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3681
3681
|
var PriceLabel = function (_a) {
|
|
3682
3682
|
var _b;
|
|
3683
3683
|
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"]);
|
|
@@ -3705,15 +3705,15 @@ var PriceLabel = function (_a) {
|
|
|
3705
3705
|
};
|
|
3706
3706
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price$1, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3707
3707
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3708
|
-
return (jsxRuntime.jsxs(Container$
|
|
3708
|
+
return (jsxRuntime.jsxs(Container$1u, __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: {
|
|
3709
3709
|
marginTop: '-5px',
|
|
3710
3710
|
} }, 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: {
|
|
3711
3711
|
marginTop: '-6px',
|
|
3712
3712
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3713
3713
|
};
|
|
3714
|
-
var templateObject_1$
|
|
3714
|
+
var templateObject_1$2r;
|
|
3715
3715
|
|
|
3716
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3716
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3717
3717
|
var PriceLabelV2 = function (_a) {
|
|
3718
3718
|
var _b;
|
|
3719
3719
|
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"]);
|
|
@@ -3744,13 +3744,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
3744
3744
|
var finalPriceString = finalPriceArray[0]
|
|
3745
3745
|
? finalPriceArray[0]
|
|
3746
3746
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3747
|
-
return (jsxRuntime.jsxs(Container$
|
|
3747
|
+
return (jsxRuntime.jsxs(Container$1u, __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));
|
|
3748
3748
|
};
|
|
3749
|
-
var templateObject_1$
|
|
3749
|
+
var templateObject_1$2q;
|
|
3750
3750
|
|
|
3751
|
-
var ContainerWrapper$3 = newStyled.div(templateObject_1$
|
|
3752
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3753
|
-
var templateObject_1$
|
|
3751
|
+
var ContainerWrapper$3 = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __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"])));
|
|
3752
|
+
var ImgWrapper = newStyled.div(templateObject_2$1K || (templateObject_2$1K = __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"])));
|
|
3753
|
+
var templateObject_1$2p, templateObject_2$1K;
|
|
3754
3754
|
|
|
3755
3755
|
var ClubPriceMemberLabel = function (_a) {
|
|
3756
3756
|
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"]);
|
|
@@ -3759,13 +3759,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3759
3759
|
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));
|
|
3760
3760
|
};
|
|
3761
3761
|
|
|
3762
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3762
|
+
var HorizontalDivider = newStyled.div(templateObject_1$2o || (templateObject_1$2o = __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) {
|
|
3763
3763
|
var width = _a.width;
|
|
3764
3764
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3765
3765
|
});
|
|
3766
|
-
var templateObject_1$
|
|
3766
|
+
var templateObject_1$2o;
|
|
3767
3767
|
|
|
3768
|
-
var Container$
|
|
3768
|
+
var Container$1s = newStyled.div(templateObject_1$2n || (templateObject_1$2n = __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) {
|
|
3769
3769
|
var height = _a.height;
|
|
3770
3770
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3771
3771
|
}, function (_a) {
|
|
@@ -3790,11 +3790,11 @@ var Container$1r = newStyled.div(templateObject_1$2m || (templateObject_1$2m = _
|
|
|
3790
3790
|
var SkeletonBox = function (_a) {
|
|
3791
3791
|
var width = _a.width, height = _a.height;
|
|
3792
3792
|
var theme = useTheme();
|
|
3793
|
-
return jsxRuntime.jsx(Container$
|
|
3793
|
+
return jsxRuntime.jsx(Container$1s, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3794
3794
|
};
|
|
3795
|
-
var templateObject_1$
|
|
3795
|
+
var templateObject_1$2n;
|
|
3796
3796
|
|
|
3797
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3797
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2m || (templateObject_1$2m = __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) {
|
|
3798
3798
|
var width = _a.width;
|
|
3799
3799
|
return width;
|
|
3800
3800
|
}, function (_a) {
|
|
@@ -3810,7 +3810,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2l || (templateObject_1$2l
|
|
|
3810
3810
|
var opacity = _a.opacity;
|
|
3811
3811
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3812
3812
|
});
|
|
3813
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3813
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1J || (templateObject_2$1J = __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) {
|
|
3814
3814
|
var width = _a.width;
|
|
3815
3815
|
return width;
|
|
3816
3816
|
}, function (_a) {
|
|
@@ -3823,7 +3823,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1I || (templateObject_2$
|
|
|
3823
3823
|
var opacity = _a.opacity;
|
|
3824
3824
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3825
3825
|
});
|
|
3826
|
-
var templateObject_1$
|
|
3826
|
+
var templateObject_1$2m, templateObject_2$1J;
|
|
3827
3827
|
|
|
3828
3828
|
/* eslint-disable no-undef */
|
|
3829
3829
|
var cache = new Map();
|
|
@@ -3999,7 +3999,7 @@ var buildImageUrl = function (_a) {
|
|
|
3999
3999
|
}
|
|
4000
4000
|
};
|
|
4001
4001
|
|
|
4002
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
4002
|
+
var Img$1 = newStyled.img(templateObject_1$2l || (templateObject_1$2l = __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; });
|
|
4003
4003
|
var Image$3 = function (_a) {
|
|
4004
4004
|
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"]);
|
|
4005
4005
|
var config = useTheme().config;
|
|
@@ -4008,15 +4008,15 @@ var Image$3 = function (_a) {
|
|
|
4008
4008
|
: src;
|
|
4009
4009
|
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));
|
|
4010
4010
|
};
|
|
4011
|
-
var templateObject_1$
|
|
4011
|
+
var templateObject_1$2l;
|
|
4012
4012
|
|
|
4013
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
4014
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
4015
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
4013
|
+
var LabelWrapper = newStyled.label(templateObject_1$2k || (templateObject_1$2k = __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"])));
|
|
4014
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1I || (templateObject_2$1I = __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"])));
|
|
4015
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1m || (templateObject_3$1m = __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) {
|
|
4016
4016
|
var $color = _a.$color;
|
|
4017
4017
|
return $color;
|
|
4018
4018
|
});
|
|
4019
|
-
var templateObject_1$
|
|
4019
|
+
var templateObject_1$2k, templateObject_2$1I, templateObject_3$1m;
|
|
4020
4020
|
|
|
4021
4021
|
var ToggleComponent = function (_a) {
|
|
4022
4022
|
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"]);
|
|
@@ -4898,10 +4898,10 @@ function jsxs(type, props, key) {
|
|
|
4898
4898
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4899
4899
|
// `variants` styles that are consistent through all themes.
|
|
4900
4900
|
var TAGS = {
|
|
4901
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4902
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4903
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4904
|
-
display1: newStyled.h1(templateObject_4$
|
|
4901
|
+
hero1: newStyled.h1(templateObject_1$2j || (templateObject_1$2j = __makeTemplateObject([""], [""]))),
|
|
4902
|
+
hero2: newStyled.h2(templateObject_2$1H || (templateObject_2$1H = __makeTemplateObject([""], [""]))),
|
|
4903
|
+
hero3: newStyled.h3(templateObject_3$1l || (templateObject_3$1l = __makeTemplateObject([""], [""]))),
|
|
4904
|
+
display1: newStyled.h1(templateObject_4$14 || (templateObject_4$14 = __makeTemplateObject([""], [""]))),
|
|
4905
4905
|
display2: newStyled.h2(templateObject_5$Q || (templateObject_5$Q = __makeTemplateObject([""], [""]))),
|
|
4906
4906
|
display3: newStyled.h3(templateObject_6$I || (templateObject_6$I = __makeTemplateObject([""], [""]))),
|
|
4907
4907
|
heading1: newStyled.h1(templateObject_7$z || (templateObject_7$z = __makeTemplateObject([""], [""]))),
|
|
@@ -5038,17 +5038,17 @@ var DEFAULTS = {
|
|
|
5038
5038
|
size: 'regular',
|
|
5039
5039
|
},
|
|
5040
5040
|
};
|
|
5041
|
-
var templateObject_1$
|
|
5041
|
+
var templateObject_1$2j, templateObject_2$1H, templateObject_3$1l, templateObject_4$14, templateObject_5$Q, templateObject_6$I, templateObject_7$z, templateObject_8$s, templateObject_9$f, templateObject_10$e, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
5042
5042
|
|
|
5043
|
-
var Container$
|
|
5044
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
5045
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
5046
|
-
var Label$7 = newStyled.div(templateObject_4$
|
|
5043
|
+
var Container$1r = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __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"])));
|
|
5044
|
+
var Card$4 = newStyled.div(templateObject_2$1G || (templateObject_2$1G = __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"])));
|
|
5045
|
+
var Tag$2 = newStyled.div(templateObject_3$1k || (templateObject_3$1k = __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"])));
|
|
5046
|
+
var Label$7 = newStyled.div(templateObject_4$13 || (templateObject_4$13 = __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"])));
|
|
5047
5047
|
var Check$1 = newStyled.div(templateObject_5$P || (templateObject_5$P = __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"])));
|
|
5048
5048
|
var DiscountContainer$1 = newStyled.div(templateObject_6$H || (templateObject_6$H = __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"])));
|
|
5049
5049
|
var PackSelectorV2 = function (_a) {
|
|
5050
5050
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
5051
|
-
return (jsxRuntime.jsx(Container$
|
|
5051
|
+
return (jsxRuntime.jsx(Container$1r, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
5052
5052
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
5053
5053
|
}) }), void 0));
|
|
5054
5054
|
};
|
|
@@ -5070,27 +5070,27 @@ var PackCard$1 = function (_a) {
|
|
|
5070
5070
|
currency: currencyCode || 'USD',
|
|
5071
5071
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5072
5072
|
};
|
|
5073
|
-
var templateObject_1$
|
|
5073
|
+
var templateObject_1$2i, templateObject_2$1G, templateObject_3$1k, templateObject_4$13, templateObject_5$P, templateObject_6$H;
|
|
5074
5074
|
|
|
5075
|
-
var Container$
|
|
5076
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
5075
|
+
var Container$1q = newStyled.div(templateObject_1$2h || (templateObject_1$2h = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5076
|
+
var DropContainer = newStyled.div(templateObject_2$1F || (templateObject_2$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5077
5077
|
var DropList = function (_a) {
|
|
5078
5078
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5079
|
-
return (jsxRuntime.jsx(Container$
|
|
5079
|
+
return (jsxRuntime.jsx(Container$1q, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5080
5080
|
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));
|
|
5081
5081
|
}) }, void 0));
|
|
5082
5082
|
};
|
|
5083
|
-
var templateObject_1$
|
|
5083
|
+
var templateObject_1$2h, templateObject_2$1F;
|
|
5084
5084
|
|
|
5085
5085
|
var DROPS_TOTAL = 5;
|
|
5086
|
-
var Container$
|
|
5087
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5088
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
5086
|
+
var Container$1p = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5087
|
+
var Title$b = newStyled.p(templateObject_2$1E || (templateObject_2$1E = __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"])));
|
|
5088
|
+
var Description$3 = newStyled.p(templateObject_3$1j || (templateObject_3$1j = __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"])));
|
|
5089
5089
|
var AbsorbencyLevel = function (_a) {
|
|
5090
5090
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5091
|
-
return (jsxRuntime.jsxs(Container$
|
|
5091
|
+
return (jsxRuntime.jsxs(Container$1p, { 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));
|
|
5092
5092
|
};
|
|
5093
|
-
var templateObject_1$
|
|
5093
|
+
var templateObject_1$2g, templateObject_2$1E, templateObject_3$1j;
|
|
5094
5094
|
|
|
5095
5095
|
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(`
|
|
5096
5096
|
`),"","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(`
|
|
@@ -5166,7 +5166,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5166
5166
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5167
5167
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5168
5168
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5169
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5169
|
+
var StyledContent$1 = newStyled.button(templateObject_1$2f || (templateObject_1$2f = __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"])));
|
|
5170
5170
|
var Accordion$1 = function (_a) {
|
|
5171
5171
|
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;
|
|
5172
5172
|
var theme = useTheme();
|
|
@@ -5190,9 +5190,9 @@ var Accordion$1 = function (_a) {
|
|
|
5190
5190
|
} }, { 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));
|
|
5191
5191
|
} }), void 0));
|
|
5192
5192
|
};
|
|
5193
|
-
var templateObject_1$
|
|
5193
|
+
var templateObject_1$2f;
|
|
5194
5194
|
|
|
5195
|
-
var Container$
|
|
5195
|
+
var Container$1o = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5196
5196
|
var AccordionOptions = function (_a) {
|
|
5197
5197
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5198
5198
|
var _b = React$2.useState({
|
|
@@ -5205,7 +5205,7 @@ var AccordionOptions = function (_a) {
|
|
|
5205
5205
|
}
|
|
5206
5206
|
return false;
|
|
5207
5207
|
};
|
|
5208
|
-
return (jsxRuntime.jsx(Container$
|
|
5208
|
+
return (jsxRuntime.jsx(Container$1o, { children: accordions.map(function (accordion, index) {
|
|
5209
5209
|
var forceOpenValue = getForceOpen(index);
|
|
5210
5210
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5211
5211
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5216,7 +5216,7 @@ var AccordionOptions = function (_a) {
|
|
|
5216
5216
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5217
5217
|
}) }, void 0));
|
|
5218
5218
|
};
|
|
5219
|
-
var templateObject_1$
|
|
5219
|
+
var templateObject_1$2e;
|
|
5220
5220
|
|
|
5221
5221
|
/**
|
|
5222
5222
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5352,27 +5352,27 @@ var isValidDate = function (value) {
|
|
|
5352
5352
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5353
5353
|
};
|
|
5354
5354
|
|
|
5355
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5356
|
-
var FlexContainer$5 = newStyled.div(templateObject_2$
|
|
5357
|
-
var templateObject_1$
|
|
5355
|
+
var Bold = newStyled.span(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5356
|
+
var FlexContainer$5 = newStyled.div(templateObject_2$1D || (templateObject_2$1D = __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"])));
|
|
5357
|
+
var templateObject_1$2d, templateObject_2$1D;
|
|
5358
5358
|
|
|
5359
|
-
var Container$
|
|
5359
|
+
var Container$1n = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __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) {
|
|
5360
5360
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5361
5361
|
return width;
|
|
5362
5362
|
}, function (_a) {
|
|
5363
5363
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5364
5364
|
return height;
|
|
5365
5365
|
});
|
|
5366
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5367
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5368
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5366
|
+
var FlexCentered = newStyled.div(templateObject_2$1C || (templateObject_2$1C = __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"])));
|
|
5367
|
+
var LeftSide = newStyled.div(templateObject_3$1i || (templateObject_3$1i = __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"])));
|
|
5368
|
+
var RightSide = newStyled.div(templateObject_4$12 || (templateObject_4$12 = __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"])));
|
|
5369
5369
|
var FlexStart = newStyled.div(templateObject_5$O || (templateObject_5$O = __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"])));
|
|
5370
|
-
var templateObject_1$
|
|
5370
|
+
var templateObject_1$2c, templateObject_2$1C, templateObject_3$1i, templateObject_4$12, templateObject_5$O;
|
|
5371
5371
|
|
|
5372
5372
|
var CouponCard = function (_a) {
|
|
5373
5373
|
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;
|
|
5374
5374
|
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5375
|
-
return (jsxRuntime.jsxs(Container$
|
|
5375
|
+
return (jsxRuntime.jsxs(Container$1n, __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 () {
|
|
5376
5376
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5377
5377
|
setShowCoupon(function (prev) { return !prev; });
|
|
5378
5378
|
} }, 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: {
|
|
@@ -5520,14 +5520,14 @@ var sizeOptions = [
|
|
|
5520
5520
|
},
|
|
5521
5521
|
];
|
|
5522
5522
|
|
|
5523
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5524
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5523
|
+
var ErrorText = newStyled.h3(templateObject_1$2b || (templateObject_1$2b = __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; });
|
|
5524
|
+
var ErrorContainer = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __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"])));
|
|
5525
5525
|
var Error$1 = function (_a) {
|
|
5526
5526
|
var error = _a.error;
|
|
5527
5527
|
var theme = useTheme();
|
|
5528
5528
|
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));
|
|
5529
5529
|
};
|
|
5530
|
-
var templateObject_1$
|
|
5530
|
+
var templateObject_1$2b, templateObject_2$1B;
|
|
5531
5531
|
|
|
5532
5532
|
var BaseSelectButton = function (_a) {
|
|
5533
5533
|
var children = _a.children, as = _a.as;
|
|
@@ -5544,7 +5544,7 @@ function BaseSelectOption(_a) {
|
|
|
5544
5544
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5545
5545
|
}
|
|
5546
5546
|
|
|
5547
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5547
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5548
5548
|
function BaseSelect(_a) {
|
|
5549
5549
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5550
5550
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5554,7 +5554,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5554
5554
|
Options: BaseSelectOptions,
|
|
5555
5555
|
Option: BaseSelectOption,
|
|
5556
5556
|
});
|
|
5557
|
-
var templateObject_1$
|
|
5557
|
+
var templateObject_1$2a;
|
|
5558
5558
|
|
|
5559
5559
|
var CustomButton = newStyled.button(function (_a) {
|
|
5560
5560
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5593,7 +5593,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5593
5593
|
});
|
|
5594
5594
|
});
|
|
5595
5595
|
// TODO Remove this when we find the real solution
|
|
5596
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5596
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5597
5597
|
var open = _a.open;
|
|
5598
5598
|
return open &&
|
|
5599
5599
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5613,7 +5613,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5613
5613
|
} }), void 0));
|
|
5614
5614
|
};
|
|
5615
5615
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5616
|
-
var templateObject_1$
|
|
5616
|
+
var templateObject_1$29;
|
|
5617
5617
|
|
|
5618
5618
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5619
5619
|
var theme = _a.theme;
|
|
@@ -5780,7 +5780,7 @@ var CustomCheckboxStyles = {
|
|
|
5780
5780
|
},
|
|
5781
5781
|
};
|
|
5782
5782
|
|
|
5783
|
-
var Container$
|
|
5783
|
+
var Container$1m = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __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"])));
|
|
5784
5784
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5785
5785
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5786
5786
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5791,7 +5791,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5791
5791
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5792
5792
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5793
5793
|
]; });
|
|
5794
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5794
|
+
var Input$5 = newStyled.input(templateObject_2$1A || (templateObject_2$1A = __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) {
|
|
5795
5795
|
var disabled = _a.disabled;
|
|
5796
5796
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5797
5797
|
});
|
|
@@ -5805,9 +5805,9 @@ var Checkbox = function (_a) {
|
|
|
5805
5805
|
}
|
|
5806
5806
|
onChange(e.target.checked);
|
|
5807
5807
|
};
|
|
5808
|
-
return (jsxRuntime.jsxs(Container$
|
|
5808
|
+
return (jsxRuntime.jsxs(Container$1m, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$6, __assign$1({ "data-testid": "checkbox-text", size: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5809
5809
|
};
|
|
5810
|
-
var templateObject_1$
|
|
5810
|
+
var templateObject_1$28, templateObject_2$1A;
|
|
5811
5811
|
|
|
5812
5812
|
var CustomOption = newStyled.li(function (_a) {
|
|
5813
5813
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5856,9 +5856,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5856
5856
|
Option: BaseDropdownOption,
|
|
5857
5857
|
});
|
|
5858
5858
|
|
|
5859
|
-
var Container$
|
|
5860
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5861
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5859
|
+
var Container$1l = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject([""], [""])));
|
|
5860
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1z || (templateObject_2$1z = __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"])));
|
|
5861
|
+
var SelectedOption = newStyled.span(templateObject_3$1h || (templateObject_3$1h = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5862
5862
|
var fontWeight = _a.fontWeight;
|
|
5863
5863
|
return fontWeight || '';
|
|
5864
5864
|
});
|
|
@@ -5891,10 +5891,10 @@ function SimpleDropdown(_a) {
|
|
|
5891
5891
|
}
|
|
5892
5892
|
setSelectedValue(value);
|
|
5893
5893
|
}, [value, options, initialValue]);
|
|
5894
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5894
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1l : React$2.Fragment;
|
|
5895
5895
|
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));
|
|
5896
5896
|
}
|
|
5897
|
-
var templateObject_1$
|
|
5897
|
+
var templateObject_1$27, templateObject_2$1z, templateObject_3$1h;
|
|
5898
5898
|
|
|
5899
5899
|
/* base styles & size variants */
|
|
5900
5900
|
var CustomRadioStyles$2 = {
|
|
@@ -5959,9 +5959,9 @@ var ContainerStyles$2 = {
|
|
|
5959
5959
|
},
|
|
5960
5960
|
};
|
|
5961
5961
|
|
|
5962
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5963
|
-
var Container$
|
|
5964
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5962
|
+
var Wrapper$7 = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5963
|
+
var Container$1k = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5964
|
+
var Input$4 = newStyled.input(templateObject_2$1y || (templateObject_2$1y = __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) {
|
|
5965
5965
|
var disabled = _a.disabled;
|
|
5966
5966
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5967
5967
|
});
|
|
@@ -5969,14 +5969,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5969
5969
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5970
5970
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5971
5971
|
]; });
|
|
5972
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5972
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$1g || (templateObject_3$1g = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5973
5973
|
var theme = _a.theme;
|
|
5974
5974
|
return theme.component.radio.textSize;
|
|
5975
5975
|
}, function (_a) {
|
|
5976
5976
|
var theme = _a.theme;
|
|
5977
5977
|
return theme.component.radio.lineHeight;
|
|
5978
5978
|
});
|
|
5979
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5979
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$11 || (templateObject_4$11 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"])), function (_a) {
|
|
5980
5980
|
var theme = _a.theme;
|
|
5981
5981
|
return theme.component.radio.textSize;
|
|
5982
5982
|
}, function (_a) {
|
|
@@ -5993,9 +5993,9 @@ var RadioInput = function (_a) {
|
|
|
5993
5993
|
var value = event.currentTarget.value;
|
|
5994
5994
|
onChange({ value: value, label: label });
|
|
5995
5995
|
};
|
|
5996
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5996
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$1k, __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));
|
|
5997
5997
|
};
|
|
5998
|
-
var templateObject_1$
|
|
5998
|
+
var templateObject_1$26, templateObject_2$1y, templateObject_3$1g, templateObject_4$11;
|
|
5999
5999
|
|
|
6000
6000
|
var useOnClickOutside = function (ref, handler) {
|
|
6001
6001
|
React$2.useEffect(function () {
|
|
@@ -6088,7 +6088,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6088
6088
|
}
|
|
6089
6089
|
};
|
|
6090
6090
|
|
|
6091
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
6091
|
+
var Wrapper$6 = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __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) {
|
|
6092
6092
|
var position = _a.position;
|
|
6093
6093
|
return getWrapperFlexDirection(position);
|
|
6094
6094
|
}, function (_a) {
|
|
@@ -6098,7 +6098,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __ma
|
|
|
6098
6098
|
var disableHover = _a.disableHover;
|
|
6099
6099
|
return (disableHover ? 0 : 1);
|
|
6100
6100
|
});
|
|
6101
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6101
|
+
var TooltipContainer = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __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) {
|
|
6102
6102
|
var position = _a.position;
|
|
6103
6103
|
return getContainerFlexDirection(position);
|
|
6104
6104
|
}, function (_a) {
|
|
@@ -6126,14 +6126,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1w || (templateObject_2$1w
|
|
|
6126
6126
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6127
6127
|
return actual === expected ? margin : '0';
|
|
6128
6128
|
};
|
|
6129
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
6129
|
+
var ContentWrapper = newStyled.div(templateObject_3$1f || (templateObject_3$1f = __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) {
|
|
6130
6130
|
var borderColor = _a.borderColor;
|
|
6131
6131
|
return borderColor;
|
|
6132
6132
|
}, function (_a) {
|
|
6133
6133
|
var backgroundColor = _a.backgroundColor;
|
|
6134
6134
|
return backgroundColor;
|
|
6135
6135
|
});
|
|
6136
|
-
var TooltipText = newStyled.div(templateObject_4
|
|
6136
|
+
var TooltipText = newStyled.div(templateObject_4$10 || (templateObject_4$10 = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
|
|
6137
6137
|
var theme = _a.theme;
|
|
6138
6138
|
return theme.component.autoship.tooltip.text.alignment;
|
|
6139
6139
|
}, function (_a) {
|
|
@@ -6153,7 +6153,7 @@ var CloseToolTip = newStyled.button(templateObject_8$r || (templateObject_8$r =
|
|
|
6153
6153
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6154
6154
|
return right;
|
|
6155
6155
|
});
|
|
6156
|
-
var templateObject_1$
|
|
6156
|
+
var templateObject_1$25, templateObject_2$1x, templateObject_3$1f, templateObject_4$10, templateObject_5$N, templateObject_6$G, templateObject_7$y, templateObject_8$r;
|
|
6157
6157
|
|
|
6158
6158
|
var Tooltip = function (_a) {
|
|
6159
6159
|
var _b;
|
|
@@ -6196,8 +6196,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
6196
6196
|
};
|
|
6197
6197
|
};
|
|
6198
6198
|
|
|
6199
|
-
var FlexContainer$4 = newStyled.div(templateObject_1$
|
|
6200
|
-
var ContainerBase$5 = newStyled.div(templateObject_2$
|
|
6199
|
+
var FlexContainer$4 = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6200
|
+
var ContainerBase$5 = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __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) {
|
|
6201
6201
|
var selected = _a.selected, theme = _a.theme;
|
|
6202
6202
|
return selected
|
|
6203
6203
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6211,11 +6211,11 @@ var ContainerBase$5 = newStyled.div(templateObject_2$1v || (templateObject_2$1v
|
|
|
6211
6211
|
var theme = _a.theme;
|
|
6212
6212
|
return theme.colors.pallete.primary.color;
|
|
6213
6213
|
});
|
|
6214
|
-
var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$
|
|
6214
|
+
var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$1e || (templateObject_3$1e = __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) {
|
|
6215
6215
|
var onClick = _a.onClick;
|
|
6216
6216
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6217
6217
|
});
|
|
6218
|
-
var SubscriptionContainer$5 = newStyled(ContainerBase$5)(templateObject_4
|
|
6218
|
+
var SubscriptionContainer$5 = newStyled(ContainerBase$5)(templateObject_4$$ || (templateObject_4$$ = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6219
6219
|
var SubscriptionHeader$5 = newStyled.div(templateObject_5$M || (templateObject_5$M = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6220
6220
|
var theme = _a.theme;
|
|
6221
6221
|
return theme.colors.shades[200].color;
|
|
@@ -6233,8 +6233,8 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6233
6233
|
var selected = _a.selected, theme = _a.theme;
|
|
6234
6234
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6235
6235
|
});
|
|
6236
|
-
var Container$
|
|
6237
|
-
var templateObject_1$
|
|
6236
|
+
var Container$1j = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6237
|
+
var templateObject_1$24, templateObject_2$1w, templateObject_3$1e, templateObject_4$$, templateObject_5$M, templateObject_6$F, templateObject_7$x, templateObject_8$q, templateObject_9$e, templateObject_10$d, templateObject_11$9, templateObject_12$6, templateObject_13$5;
|
|
6238
6238
|
|
|
6239
6239
|
var radioIds$3 = {
|
|
6240
6240
|
oneTime: {
|
|
@@ -6284,17 +6284,17 @@ var Autoship = function (_a) {
|
|
|
6284
6284
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6285
6285
|
};
|
|
6286
6286
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6287
|
-
return (jsxRuntime.jsxs(Container$
|
|
6287
|
+
return (jsxRuntime.jsxs(Container$1j, __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
|
|
6288
6288
|
? benefitsColor.selected
|
|
6289
6289
|
: 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));
|
|
6290
6290
|
};
|
|
6291
6291
|
|
|
6292
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6292
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6293
6293
|
var theme = _a.theme;
|
|
6294
6294
|
return theme.name === 'TheSpaDr' &&
|
|
6295
6295
|
"\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 ";
|
|
6296
6296
|
});
|
|
6297
|
-
var DiscountTag$3 = newStyled.div(templateObject_2$
|
|
6297
|
+
var DiscountTag$3 = newStyled.div(templateObject_2$1v || (templateObject_2$1v = __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) {
|
|
6298
6298
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6299
6299
|
return isSelected
|
|
6300
6300
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6310,7 +6310,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6310
6310
|
}
|
|
6311
6311
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6312
6312
|
};
|
|
6313
|
-
var ContainerBase$4 = newStyled.div(templateObject_3$
|
|
6313
|
+
var ContainerBase$4 = newStyled.div(templateObject_3$1d || (templateObject_3$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) {
|
|
6314
6314
|
var selected = _a.selected, theme = _a.theme;
|
|
6315
6315
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6316
6316
|
}, function (_a) {
|
|
@@ -6322,7 +6322,7 @@ var ContainerBase$4 = newStyled.div(templateObject_3$1c || (templateObject_3$1c
|
|
|
6322
6322
|
var theme = _a.theme;
|
|
6323
6323
|
return theme.colors.pallete.primary.color;
|
|
6324
6324
|
});
|
|
6325
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4$
|
|
6325
|
+
var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4$_ || (templateObject_4$_ = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
6326
6326
|
var onClick = _a.onClick;
|
|
6327
6327
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6328
6328
|
});
|
|
@@ -6342,12 +6342,12 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_11$8 || (templateOb
|
|
|
6342
6342
|
var selected = _a.selected, theme = _a.theme;
|
|
6343
6343
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6344
6344
|
});
|
|
6345
|
-
var Container$
|
|
6345
|
+
var Container$1i = newStyled.div(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6346
6346
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6347
6347
|
var theme = _a.theme;
|
|
6348
6348
|
return theme.component.autoship.tooltip.margin;
|
|
6349
6349
|
});
|
|
6350
|
-
var templateObject_1$
|
|
6350
|
+
var templateObject_1$23, templateObject_2$1v, templateObject_3$1d, templateObject_4$_, templateObject_5$L, templateObject_6$E, templateObject_7$w, templateObject_8$p, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$4;
|
|
6351
6351
|
|
|
6352
6352
|
var radioIds$2 = {
|
|
6353
6353
|
oneTime: {
|
|
@@ -6407,7 +6407,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6407
6407
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6408
6408
|
};
|
|
6409
6409
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6410
|
-
return (jsxRuntime.jsxs(Container$
|
|
6410
|
+
return (jsxRuntime.jsxs(Container$1i, __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 }, { 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: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6411
6411
|
? benefitsColor.selected
|
|
6412
6412
|
: benefitsColor.base }, 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, 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));
|
|
6413
6413
|
};
|
|
@@ -6426,13 +6426,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6426
6426
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6427
6427
|
_a$2);
|
|
6428
6428
|
|
|
6429
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6430
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6431
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6432
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6429
|
+
var CustomerDetails = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject([""], [""])));
|
|
6430
|
+
var CustomerInfo = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __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"])));
|
|
6431
|
+
var Name = newStyled.h4(templateObject_3$1c || (templateObject_3$1c = __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"])));
|
|
6432
|
+
var StarIconContainer = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __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"])));
|
|
6433
6433
|
var Description$2 = newStyled.p(templateObject_5$K || (templateObject_5$K = __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"])));
|
|
6434
6434
|
var ReviewDays = newStyled.span(templateObject_6$D || (templateObject_6$D = __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"])));
|
|
6435
|
-
var templateObject_1$
|
|
6435
|
+
var templateObject_1$22, templateObject_2$1u, templateObject_3$1c, templateObject_4$Z, templateObject_5$K, templateObject_6$D;
|
|
6436
6436
|
|
|
6437
6437
|
var NameWithStars = function (_a) {
|
|
6438
6438
|
var name = _a.name, size = _a.size;
|
|
@@ -6450,10 +6450,10 @@ var ResultFeedback = function (_a) {
|
|
|
6450
6450
|
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));
|
|
6451
6451
|
};
|
|
6452
6452
|
|
|
6453
|
-
var Container$
|
|
6454
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6455
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6456
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6453
|
+
var Container$1h = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __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; });
|
|
6454
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __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"])));
|
|
6455
|
+
var ImageCard = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __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; });
|
|
6456
|
+
var UserInfoText = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __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) {
|
|
6457
6457
|
var theme = _a.theme;
|
|
6458
6458
|
return theme.colors.pallete.secondary.color;
|
|
6459
6459
|
}, function (_a) {
|
|
@@ -6463,7 +6463,7 @@ var UserInfoText = newStyled.div(templateObject_4$X || (templateObject_4$X = __m
|
|
|
6463
6463
|
var theme = _a.theme, size = _a.size;
|
|
6464
6464
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6465
6465
|
});
|
|
6466
|
-
var templateObject_1$
|
|
6466
|
+
var templateObject_1$21, templateObject_2$1t, templateObject_3$1b, templateObject_4$Y;
|
|
6467
6467
|
|
|
6468
6468
|
/* base styles & size variants */
|
|
6469
6469
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6538,10 +6538,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6538
6538
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6539
6539
|
var infoText = buildInfoText(name, age, months);
|
|
6540
6540
|
var Component = componentByVariant[variant];
|
|
6541
|
-
return (jsxRuntime.jsxs(Container$
|
|
6541
|
+
return (jsxRuntime.jsxs(Container$1h, __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));
|
|
6542
6542
|
};
|
|
6543
6543
|
|
|
6544
|
-
var Section = newStyled.div(templateObject_1$
|
|
6544
|
+
var Section = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __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) {
|
|
6545
6545
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6546
6546
|
});
|
|
6547
6547
|
var CardHeader = function (_a) {
|
|
@@ -6552,16 +6552,16 @@ var CardFooter = function (_a) {
|
|
|
6552
6552
|
var children = _a.children;
|
|
6553
6553
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6554
6554
|
};
|
|
6555
|
-
var templateObject_1$
|
|
6555
|
+
var templateObject_1$20;
|
|
6556
6556
|
|
|
6557
|
-
var Body$1 = newStyled.div(templateObject_1$
|
|
6557
|
+
var Body$1 = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __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"])));
|
|
6558
6558
|
var CardBody$1 = function (_a) {
|
|
6559
6559
|
var children = _a.children;
|
|
6560
6560
|
return jsxRuntime.jsx(Body$1, { children: children }, void 0);
|
|
6561
6561
|
};
|
|
6562
|
-
var templateObject_1$
|
|
6562
|
+
var templateObject_1$1$;
|
|
6563
6563
|
|
|
6564
|
-
var Container$
|
|
6564
|
+
var Container$1g = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __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) {
|
|
6565
6565
|
var flex = _a.flex;
|
|
6566
6566
|
return flex &&
|
|
6567
6567
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6576,23 +6576,23 @@ var Container$1f = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = _
|
|
|
6576
6576
|
var Card$2 = function (_a) {
|
|
6577
6577
|
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;
|
|
6578
6578
|
var theme = useTheme();
|
|
6579
|
-
return (jsxRuntime.jsx(Container$
|
|
6579
|
+
return (jsxRuntime.jsx(Container$1g, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6580
6580
|
};
|
|
6581
6581
|
var Card$3 = Object.assign(Card$2, {
|
|
6582
6582
|
Header: CardHeader,
|
|
6583
6583
|
Footer: CardFooter,
|
|
6584
6584
|
Body: CardBody$1,
|
|
6585
6585
|
});
|
|
6586
|
-
var templateObject_1$
|
|
6586
|
+
var templateObject_1$1_;
|
|
6587
6587
|
|
|
6588
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6589
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6590
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6588
|
+
var StyledWrapper = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __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"])));
|
|
6589
|
+
var StyledContainer = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __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"])));
|
|
6590
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$1a || (templateObject_3$1a = __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) {
|
|
6591
6591
|
var color = _a.color;
|
|
6592
6592
|
return color;
|
|
6593
6593
|
});
|
|
6594
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6595
|
-
var templateObject_1$
|
|
6594
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$X || (templateObject_4$X = __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"])));
|
|
6595
|
+
var templateObject_1$1Z, templateObject_2$1s, templateObject_3$1a, templateObject_4$X;
|
|
6596
6596
|
|
|
6597
6597
|
var Minimalistic = function (_a) {
|
|
6598
6598
|
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;
|
|
@@ -6600,28 +6600,28 @@ var Minimalistic = function (_a) {
|
|
|
6600
6600
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6601
6601
|
};
|
|
6602
6602
|
|
|
6603
|
-
var Container$
|
|
6604
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6605
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6606
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6603
|
+
var Container$1f = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6604
|
+
var Title$9 = newStyled.h1(templateObject_2$1r || (templateObject_2$1r = __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; });
|
|
6605
|
+
var Details$1 = newStyled.span(templateObject_3$19 || (templateObject_3$19 = __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; });
|
|
6606
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$W || (templateObject_4$W = __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"])));
|
|
6607
6607
|
var Simple = function (_a) {
|
|
6608
6608
|
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;
|
|
6609
6609
|
var theme = useTheme();
|
|
6610
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
6610
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$1f, { 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));
|
|
6611
6611
|
};
|
|
6612
|
-
var templateObject_1$
|
|
6612
|
+
var templateObject_1$1Y, templateObject_2$1r, templateObject_3$19, templateObject_4$W;
|
|
6613
6613
|
|
|
6614
6614
|
var Bundle = {
|
|
6615
6615
|
Minimalistic: Minimalistic,
|
|
6616
6616
|
Simple: Simple,
|
|
6617
6617
|
};
|
|
6618
6618
|
|
|
6619
|
-
var Container$
|
|
6619
|
+
var Container$1e = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
6620
6620
|
var displayBNPL = _a.displayBNPL;
|
|
6621
6621
|
return (displayBNPL ? 'flex' : 'none');
|
|
6622
6622
|
});
|
|
6623
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6624
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6623
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"])));
|
|
6624
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6625
6625
|
var BuyNowPayLater = function (_a) {
|
|
6626
6626
|
var _b;
|
|
6627
6627
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize, _f = _a.bnplWithAfterPay, bnplWithAfterPay = _f === void 0 ? false : _f, textTemplate = _a.textTemplate;
|
|
@@ -6641,16 +6641,16 @@ var BuyNowPayLater = function (_a) {
|
|
|
6641
6641
|
else {
|
|
6642
6642
|
dynamicText = "or 4 interest-free payments of ";
|
|
6643
6643
|
}
|
|
6644
|
-
return (jsxRuntime.jsx(Container$
|
|
6644
|
+
return (jsxRuntime.jsx(Container$1e, __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: {
|
|
6645
6645
|
display: 'inline',
|
|
6646
6646
|
fontSize: fontSize,
|
|
6647
6647
|
paddingLeft: '0.25rem',
|
|
6648
6648
|
paddingRight: '0.25rem',
|
|
6649
6649
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (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));
|
|
6650
6650
|
};
|
|
6651
|
-
var templateObject_1$
|
|
6651
|
+
var templateObject_1$1X, templateObject_2$1q, templateObject_3$18;
|
|
6652
6652
|
|
|
6653
|
-
var Text$6 = newStyled.h3(templateObject_1$
|
|
6653
|
+
var Text$6 = newStyled.h3(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
6654
6654
|
var backgroundColor = _a.backgroundColor;
|
|
6655
6655
|
return backgroundColor;
|
|
6656
6656
|
}, function (_a) {
|
|
@@ -6665,47 +6665,47 @@ var OfferBanner = function (_a) {
|
|
|
6665
6665
|
var theme = useTheme();
|
|
6666
6666
|
return (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));
|
|
6667
6667
|
};
|
|
6668
|
-
var templateObject_1$
|
|
6668
|
+
var templateObject_1$1W;
|
|
6669
6669
|
|
|
6670
|
-
var Container$
|
|
6670
|
+
var Container$1d = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6671
6671
|
var CloseButton$1 = function (_a) {
|
|
6672
6672
|
var onClick = _a.onClick, size = _a.size;
|
|
6673
6673
|
var theme = useTheme();
|
|
6674
|
-
return (jsxRuntime.jsx(Container$
|
|
6674
|
+
return (jsxRuntime.jsx(Container$1d, __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));
|
|
6675
6675
|
};
|
|
6676
|
-
var templateObject_1$
|
|
6676
|
+
var templateObject_1$1V;
|
|
6677
6677
|
|
|
6678
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6678
|
+
var Text$5 = newStyled.span(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6679
6679
|
var Description$1 = function (_a) {
|
|
6680
6680
|
var text = _a.text;
|
|
6681
6681
|
var theme = useTheme();
|
|
6682
6682
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6683
6683
|
};
|
|
6684
|
-
var templateObject_1$
|
|
6684
|
+
var templateObject_1$1U;
|
|
6685
6685
|
|
|
6686
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6686
|
+
var P$4 = newStyled.p(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6687
6687
|
var Promo = function (_a) {
|
|
6688
6688
|
var text = _a.text;
|
|
6689
6689
|
var theme = useTheme();
|
|
6690
6690
|
return (jsxRuntime.jsx(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6691
6691
|
};
|
|
6692
|
-
var templateObject_1$
|
|
6692
|
+
var templateObject_1$1T;
|
|
6693
6693
|
|
|
6694
|
-
var Text$4 = newStyled.span(templateObject_1$
|
|
6694
|
+
var Text$4 = newStyled.span(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6695
6695
|
var Title$8 = function (_a) {
|
|
6696
6696
|
var title = _a.title;
|
|
6697
6697
|
var theme = useTheme();
|
|
6698
6698
|
return jsxRuntime.jsx(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6699
6699
|
};
|
|
6700
|
-
var templateObject_1$
|
|
6700
|
+
var templateObject_1$1S;
|
|
6701
6701
|
|
|
6702
|
-
var Container$
|
|
6703
|
-
var templateObject_1$
|
|
6702
|
+
var Container$1c = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"], ["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"])), function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6703
|
+
var templateObject_1$1R;
|
|
6704
6704
|
|
|
6705
6705
|
var TrashButton = function (_a) {
|
|
6706
6706
|
var onClick = _a.onClick, size = _a.size;
|
|
6707
6707
|
useTheme();
|
|
6708
|
-
return (jsxRuntime.jsx(Container$
|
|
6708
|
+
return (jsxRuntime.jsx(Container$1c, __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));
|
|
6709
6709
|
};
|
|
6710
6710
|
|
|
6711
6711
|
var CartProductItem = {
|
|
@@ -6717,10 +6717,10 @@ var CartProductItem = {
|
|
|
6717
6717
|
TrashButton: TrashButton,
|
|
6718
6718
|
};
|
|
6719
6719
|
|
|
6720
|
-
var Container$
|
|
6721
|
-
var MobileContainer = newStyled(Container$
|
|
6722
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6723
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6720
|
+
var Container$1b = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
6721
|
+
var MobileContainer = newStyled(Container$1b)(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6722
|
+
var DollarPart = newStyled.span(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6723
|
+
var ClubMembersText = newStyled.span(templateObject_4$V || (templateObject_4$V = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6724
6724
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$J || (templateObject_5$J = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6725
6725
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$C || (templateObject_6$C = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6726
6726
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6728,9 +6728,9 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$o || (t
|
|
|
6728
6728
|
var ClubPriceLabel = function (_a) {
|
|
6729
6729
|
var clubPrice = _a.clubPrice;
|
|
6730
6730
|
var isMobile = useWindowDimensions().isMobile;
|
|
6731
|
-
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$
|
|
6731
|
+
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$1b, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6732
6732
|
};
|
|
6733
|
-
var templateObject_1$
|
|
6733
|
+
var templateObject_1$1Q, templateObject_2$1p, templateObject_3$17, templateObject_4$V, templateObject_5$J, templateObject_6$C, templateObject_7$v, templateObject_8$o;
|
|
6734
6734
|
|
|
6735
6735
|
var Spacing = function (_a) {
|
|
6736
6736
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6738,10 +6738,10 @@ var Spacing = function (_a) {
|
|
|
6738
6738
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6739
6739
|
};
|
|
6740
6740
|
|
|
6741
|
-
var Container$
|
|
6742
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6743
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6744
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6741
|
+
var Container$1a = newStyled('div')(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6742
|
+
var Content$2 = newStyled('div')(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6743
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6744
|
+
var Bar$2 = newStyled('div')(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6745
6745
|
var index = _a.index;
|
|
6746
6746
|
return "".concat(6 + 3 * index, "px");
|
|
6747
6747
|
}, function (_a) {
|
|
@@ -6750,12 +6750,12 @@ var Bar$2 = newStyled('div')(templateObject_4$T || (templateObject_4$T = __makeT
|
|
|
6750
6750
|
});
|
|
6751
6751
|
var StrengthBars = function (_a) {
|
|
6752
6752
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6753
|
-
return (jsxRuntime.jsxs(Container$
|
|
6753
|
+
return (jsxRuntime.jsxs(Container$1a, __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));
|
|
6754
6754
|
};
|
|
6755
|
-
var templateObject_1$
|
|
6755
|
+
var templateObject_1$1P, templateObject_2$1o, templateObject_3$16, templateObject_4$U;
|
|
6756
6756
|
|
|
6757
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6758
|
-
var templateObject_1$
|
|
6757
|
+
var Benefit$2 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
6758
|
+
var templateObject_1$1O;
|
|
6759
6759
|
|
|
6760
6760
|
var style = ".benefit{font-size:14px;line-height:22px;display:inline-block;margin:0;@media screen and (max-width:768px){font-size:12px;line-height:16px;}}";
|
|
6761
6761
|
|
|
@@ -6777,10 +6777,10 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6777
6777
|
|
|
6778
6778
|
var STARTS_NUMBER = 5;
|
|
6779
6779
|
|
|
6780
|
-
var Container$
|
|
6781
|
-
var templateObject_1$
|
|
6780
|
+
var Container$19 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6781
|
+
var templateObject_1$1N;
|
|
6782
6782
|
|
|
6783
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6783
|
+
var StarContainer = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6784
6784
|
var marginRight = _a.marginRight;
|
|
6785
6785
|
return marginRight;
|
|
6786
6786
|
});
|
|
@@ -6792,11 +6792,11 @@ var StarList = function (_a) {
|
|
|
6792
6792
|
width: theme.component.stars.element[size].width,
|
|
6793
6793
|
height: theme.component.stars.element[size].height,
|
|
6794
6794
|
};
|
|
6795
|
-
return (jsxRuntime.jsx(Container$
|
|
6795
|
+
return (jsxRuntime.jsx(Container$19, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6796
6796
|
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)));
|
|
6797
6797
|
}) }, void 0));
|
|
6798
6798
|
};
|
|
6799
|
-
var templateObject_1$
|
|
6799
|
+
var templateObject_1$1M;
|
|
6800
6800
|
|
|
6801
6801
|
/* base styles & size variants */
|
|
6802
6802
|
var LabelStyles = {
|
|
@@ -6844,7 +6844,7 @@ var LabelStyles = {
|
|
|
6844
6844
|
});
|
|
6845
6845
|
},
|
|
6846
6846
|
};
|
|
6847
|
-
var Container$
|
|
6847
|
+
var Container$18 = newStyled.a(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6848
6848
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6849
6849
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6850
6850
|
return [
|
|
@@ -6863,8 +6863,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6863
6863
|
}),
|
|
6864
6864
|
];
|
|
6865
6865
|
});
|
|
6866
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6867
|
-
var templateObject_1$
|
|
6866
|
+
var RatingLabel = newStyled.span(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6867
|
+
var templateObject_1$1L, templateObject_2$1n;
|
|
6868
6868
|
|
|
6869
6869
|
var Rating = function (_a) {
|
|
6870
6870
|
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;
|
|
@@ -6885,19 +6885,19 @@ var Rating = function (_a) {
|
|
|
6885
6885
|
href: reviewsContainerId,
|
|
6886
6886
|
}
|
|
6887
6887
|
: {};
|
|
6888
|
-
return (jsxRuntime.jsxs(Container$
|
|
6888
|
+
return (jsxRuntime.jsxs(Container$18, __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), 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));
|
|
6889
6889
|
};
|
|
6890
6890
|
|
|
6891
|
-
var ImageWrapper$4 = newStyled.div(templateObject_1$
|
|
6891
|
+
var ImageWrapper$4 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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"], ["\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"])), function (_a) {
|
|
6892
6892
|
var width = _a.width;
|
|
6893
6893
|
return width !== null && width !== void 0 ? width : '30%';
|
|
6894
6894
|
});
|
|
6895
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6896
|
-
var RatingText = newStyled.span(templateObject_3$
|
|
6895
|
+
var RatingWrapper = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __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"])));
|
|
6896
|
+
var RatingText = newStyled.span(templateObject_3$15 || (templateObject_3$15 = __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) {
|
|
6897
6897
|
var fontSize = _a.fontSize;
|
|
6898
6898
|
return fontSize;
|
|
6899
6899
|
});
|
|
6900
|
-
var templateObject_1$
|
|
6900
|
+
var templateObject_1$1K, templateObject_2$1m, templateObject_3$15;
|
|
6901
6901
|
|
|
6902
6902
|
var OfferAtCartImage = function (_a) {
|
|
6903
6903
|
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width;
|
|
@@ -6944,9 +6944,9 @@ var getDropdownOptions = function (frequency) {
|
|
|
6944
6944
|
}); });
|
|
6945
6945
|
};
|
|
6946
6946
|
|
|
6947
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
6948
|
-
var BenefitText$2 = newStyled(Text$7)(templateObject_2$
|
|
6949
|
-
var templateObject_1$
|
|
6947
|
+
var Benefit$1 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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"])));
|
|
6948
|
+
var BenefitText$2 = newStyled(Text$7)(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6949
|
+
var templateObject_1$1J, templateObject_2$1l;
|
|
6950
6950
|
|
|
6951
6951
|
var BenefitsList = function (_a) {
|
|
6952
6952
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6957,23 +6957,23 @@ var BenefitsList = function (_a) {
|
|
|
6957
6957
|
}) }, void 0));
|
|
6958
6958
|
};
|
|
6959
6959
|
|
|
6960
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6960
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6961
6961
|
var timerColor = _a.timerColor;
|
|
6962
6962
|
return timerColor || '';
|
|
6963
6963
|
});
|
|
6964
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
6964
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __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) {
|
|
6965
6965
|
var timerColor = _a.timerColor;
|
|
6966
6966
|
return timerColor || '';
|
|
6967
6967
|
});
|
|
6968
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
6968
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$14 || (templateObject_3$14 = __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) {
|
|
6969
6969
|
var theme = _a.theme;
|
|
6970
6970
|
return theme.colors.shades.white.color;
|
|
6971
6971
|
}, function (_a) {
|
|
6972
6972
|
var theme = _a.theme;
|
|
6973
6973
|
return theme.colors.shades.white.color;
|
|
6974
6974
|
});
|
|
6975
|
-
var Unit = newStyled.p(templateObject_4$
|
|
6976
|
-
var templateObject_1$
|
|
6975
|
+
var Unit = newStyled.p(templateObject_4$T || (templateObject_4$T = __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"])));
|
|
6976
|
+
var templateObject_1$1I, templateObject_2$1k, templateObject_3$14, templateObject_4$T;
|
|
6977
6977
|
|
|
6978
6978
|
var HRS = 'HRS';
|
|
6979
6979
|
var MIN = 'MIN';
|
|
@@ -7014,7 +7014,7 @@ var Timer = function (_a) {
|
|
|
7014
7014
|
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));
|
|
7015
7015
|
};
|
|
7016
7016
|
|
|
7017
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
7017
|
+
var TimerContainer = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __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) {
|
|
7018
7018
|
var textPosition = _a.textPosition;
|
|
7019
7019
|
return textPosition;
|
|
7020
7020
|
}, function (_a) {
|
|
@@ -7027,7 +7027,7 @@ var TimerContainer = newStyled.div(templateObject_1$1G || (templateObject_1$1G =
|
|
|
7027
7027
|
var borderRadius = _a.borderRadius;
|
|
7028
7028
|
return borderRadius || '8px';
|
|
7029
7029
|
});
|
|
7030
|
-
var templateObject_1$
|
|
7030
|
+
var templateObject_1$1H;
|
|
7031
7031
|
|
|
7032
7032
|
var getDefaultCountdown = function () {
|
|
7033
7033
|
var tomorrowDate = new Date();
|
|
@@ -7043,7 +7043,7 @@ var HurryUp = function (_a) {
|
|
|
7043
7043
|
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));
|
|
7044
7044
|
};
|
|
7045
7045
|
|
|
7046
|
-
var Container$
|
|
7046
|
+
var Container$17 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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) {
|
|
7047
7047
|
var size = _a.size;
|
|
7048
7048
|
return (size ? size : '100%');
|
|
7049
7049
|
}, function (_a) {
|
|
@@ -7058,7 +7058,7 @@ var borderSize = {
|
|
|
7058
7058
|
large: '3px',
|
|
7059
7059
|
};
|
|
7060
7060
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
7061
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
7061
|
+
var StyledSpinner = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __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) {
|
|
7062
7062
|
var size = _a.size;
|
|
7063
7063
|
return borderSize[size];
|
|
7064
7064
|
}, function (_a) {
|
|
@@ -7071,29 +7071,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1i || (templateObject_2$1i =
|
|
|
7071
7071
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
7072
7072
|
return duration;
|
|
7073
7073
|
});
|
|
7074
|
-
var templateObject_1$
|
|
7074
|
+
var templateObject_1$1G, templateObject_2$1j;
|
|
7075
7075
|
|
|
7076
7076
|
var Spinner = function (_a) {
|
|
7077
7077
|
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;
|
|
7078
|
-
return (jsxRuntime.jsx(Container$
|
|
7078
|
+
return (jsxRuntime.jsx(Container$17, __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));
|
|
7079
7079
|
};
|
|
7080
7080
|
|
|
7081
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
7082
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
7083
|
-
var templateObject_1$
|
|
7081
|
+
var ProgressContainer = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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); });
|
|
7082
|
+
var ProgressFiller = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __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; });
|
|
7083
|
+
var templateObject_1$1F, templateObject_2$1i;
|
|
7084
7084
|
|
|
7085
7085
|
var ProgressBar$1 = function (_a) {
|
|
7086
7086
|
var progress = _a.progress, hide = _a.hide;
|
|
7087
7087
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
7088
7088
|
};
|
|
7089
7089
|
|
|
7090
|
-
var Container$
|
|
7091
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
7092
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
7093
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
7090
|
+
var Container$16 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
7091
|
+
var HTMLVideo = newStyled.video(templateObject_2$1h || (templateObject_2$1h = __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; });
|
|
7092
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$13 || (templateObject_3$13 = __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"])));
|
|
7093
|
+
var PlayContainer = newStyled.div(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
7094
7094
|
var PauseContainer = newStyled.div(templateObject_5$I || (templateObject_5$I = __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"])));
|
|
7095
7095
|
var MuteButton = newStyled.button(templateObject_6$B || (templateObject_6$B = __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"])));
|
|
7096
|
-
var templateObject_1$
|
|
7096
|
+
var templateObject_1$1E, templateObject_2$1h, templateObject_3$13, templateObject_4$S, templateObject_5$I, templateObject_6$B;
|
|
7097
7097
|
|
|
7098
7098
|
var Video$1 = function (_a) {
|
|
7099
7099
|
var _b, _c, _d, _e;
|
|
@@ -7143,14 +7143,14 @@ var Video$1 = function (_a) {
|
|
|
7143
7143
|
setVideoProgress(videoRef.current.currentTime);
|
|
7144
7144
|
}
|
|
7145
7145
|
};
|
|
7146
|
-
return (jsxRuntime.jsxs(Container$
|
|
7146
|
+
return (jsxRuntime.jsxs(Container$16, __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" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on" }, 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: function () { return setIsLoading(false); }, 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));
|
|
7147
7147
|
};
|
|
7148
7148
|
|
|
7149
|
-
var LikeCount = newStyled.span(templateObject_1$
|
|
7149
|
+
var LikeCount = newStyled.span(templateObject_1$1D || (templateObject_1$1D = __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) {
|
|
7150
7150
|
var theme = _a.theme;
|
|
7151
7151
|
return theme.colors.shades.black.color;
|
|
7152
7152
|
});
|
|
7153
|
-
var LikeBtnContainer = newStyled.button(templateObject_2$
|
|
7153
|
+
var LikeBtnContainer = newStyled.button(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n position: ", ";\n top: ", ";\n right: ", ";\n z-index: ", ";\n padding: ", ";\n box-sizing: ", ";\n background-color: transparent;\n border: none;\n"], ["\n position: ", ";\n top: ", ";\n right: ", ";\n z-index: ", ";\n padding: ", ";\n box-sizing: ", ";\n background-color: transparent;\n border: none;\n"])), function (_a) {
|
|
7154
7154
|
var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
|
|
7155
7155
|
return position;
|
|
7156
7156
|
}, function (_a) {
|
|
@@ -7169,7 +7169,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1f || (templateObject_2
|
|
|
7169
7169
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
7170
7170
|
return boxSizing;
|
|
7171
7171
|
});
|
|
7172
|
-
var templateObject_1$
|
|
7172
|
+
var templateObject_1$1D, templateObject_2$1g;
|
|
7173
7173
|
|
|
7174
7174
|
var getStylesBySize$c = function (size) {
|
|
7175
7175
|
switch (size) {
|
|
@@ -7190,7 +7190,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7190
7190
|
};
|
|
7191
7191
|
}
|
|
7192
7192
|
};
|
|
7193
|
-
var Container$
|
|
7193
|
+
var Container$15 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __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) {
|
|
7194
7194
|
var backgroundColor = _a.backgroundColor;
|
|
7195
7195
|
return backgroundColor;
|
|
7196
7196
|
}, function (_a) {
|
|
@@ -7231,9 +7231,9 @@ var IconButton = function (_a) {
|
|
|
7231
7231
|
var _b, _c;
|
|
7232
7232
|
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;
|
|
7233
7233
|
var theme = useTheme();
|
|
7234
|
-
return (jsxRuntime.jsx(Container$
|
|
7234
|
+
return (jsxRuntime.jsx(Container$15, __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));
|
|
7235
7235
|
};
|
|
7236
|
-
var templateObject_1$
|
|
7236
|
+
var templateObject_1$1C;
|
|
7237
7237
|
|
|
7238
7238
|
var LikeButton = function (_a) {
|
|
7239
7239
|
var _b;
|
|
@@ -7246,10 +7246,10 @@ var LikeButton = function (_a) {
|
|
|
7246
7246
|
return (jsxRuntime.jsx(LikeBtnContainer, __assign$1({ className: className }, containerProps, { children: jsxRuntime.jsxs(IconButton, __assign$1({ onClick: onClick, backgroundColor: background, hasText: !!likes, boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)" }, { children: [jsxRuntime.jsx(Icon$1, { name: isLiked ? 'actions/like_solid' : 'actions/like', fill: isLiked ? iconFill.solid : (_b = iconFill.regular) !== null && _b !== void 0 ? _b : iconFill.solid, width: "24px", height: "24px" }, void 0), !!likes && jsxRuntime.jsx(LikeCount, __assign$1({ className: "like-count" }, { children: likes }), void 0)] }), isLiked.toString()) }), void 0));
|
|
7247
7247
|
};
|
|
7248
7248
|
|
|
7249
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
7250
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
7251
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
7252
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
7249
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
7250
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
7251
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7252
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7253
7253
|
var PriceWithTagContainer = newStyled.span(templateObject_5$H || (templateObject_5$H = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
7254
7254
|
var RegularPriceTag = function () {
|
|
7255
7255
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
@@ -7300,11 +7300,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
7300
7300
|
: exports.ComponentSize.XSmall;
|
|
7301
7301
|
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));
|
|
7302
7302
|
};
|
|
7303
|
-
return (jsxRuntime.jsxs(Container$
|
|
7303
|
+
return (jsxRuntime.jsxs(Container$1u, __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]
|
|
7304
7304
|
? finalPriceArray[0]
|
|
7305
7305
|
: (_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));
|
|
7306
7306
|
};
|
|
7307
|
-
var templateObject_1$
|
|
7307
|
+
var templateObject_1$1B, templateObject_2$1f, templateObject_3$12, templateObject_4$R, templateObject_5$H;
|
|
7308
7308
|
|
|
7309
7309
|
var STYLES_BY_THEME = {
|
|
7310
7310
|
TheSpaDr: {
|
|
@@ -7377,10 +7377,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7377
7377
|
height: height,
|
|
7378
7378
|
});
|
|
7379
7379
|
});
|
|
7380
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
7381
|
-
var Container$
|
|
7382
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
7383
|
-
var Title$7 = newStyled.h2(templateObject_4$
|
|
7380
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1A || (templateObject_1$1A = __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"])));
|
|
7381
|
+
var Container$14 = newStyled.a(templateObject_2$1e || (templateObject_2$1e = __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"])));
|
|
7382
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$11 || (templateObject_3$11 = __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"])));
|
|
7383
|
+
var Title$7 = newStyled.h2(templateObject_4$Q || (templateObject_4$Q = __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) {
|
|
7384
7384
|
var theme = _a.theme;
|
|
7385
7385
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
7386
7386
|
}, function (_a) {
|
|
@@ -7441,7 +7441,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$A || (templateObject_6
|
|
|
7441
7441
|
});
|
|
7442
7442
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$u || (templateObject_7$u = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7443
7443
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$n || (templateObject_8$n = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7444
|
-
var templateObject_1$
|
|
7444
|
+
var templateObject_1$1A, templateObject_2$1e, templateObject_3$11, templateObject_4$Q, templateObject_5$G, templateObject_6$A, templateObject_7$u, templateObject_8$n;
|
|
7445
7445
|
|
|
7446
7446
|
var ProductItemMobile = function (_a) {
|
|
7447
7447
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7533,12 +7533,12 @@ var ProductItemMobile = function (_a) {
|
|
|
7533
7533
|
setIsLiked(function (prev) { return !prev; });
|
|
7534
7534
|
likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.onClick(e);
|
|
7535
7535
|
};
|
|
7536
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7536
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$14, __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: {
|
|
7537
7537
|
background: {
|
|
7538
7538
|
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,
|
|
7539
7539
|
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,
|
|
7540
7540
|
},
|
|
7541
|
-
} }, 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$
|
|
7541
|
+
} }, 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$14, __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), 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)) : (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: {
|
|
7542
7542
|
letterSpacing: '-0.05rem',
|
|
7543
7543
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), !ratingOnTop && 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) {
|
|
7544
7544
|
e.preventDefault();
|
|
@@ -7558,10 +7558,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7558
7558
|
height: height,
|
|
7559
7559
|
});
|
|
7560
7560
|
});
|
|
7561
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
7562
|
-
var Container$
|
|
7563
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3
|
|
7564
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
7561
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1z || (templateObject_1$1z = __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; });
|
|
7562
|
+
var Container$13 = newStyled.a(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
7563
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __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"])));
|
|
7564
|
+
var Title$6 = newStyled.p(templateObject_4$P || (templateObject_4$P = __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; });
|
|
7565
7565
|
var getStylesBySize$a = function (size) {
|
|
7566
7566
|
switch (size) {
|
|
7567
7567
|
case exports.ComponentSize.Medium:
|
|
@@ -7640,26 +7640,26 @@ var ProductItemTK = function (_a) {
|
|
|
7640
7640
|
: undefined }, void 0));
|
|
7641
7641
|
};
|
|
7642
7642
|
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)); };
|
|
7643
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7643
|
+
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$13, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag || !!topRightTag ? (jsxs(ImageContainer$5, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%", 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$13, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
7644
7644
|
// @ts-ignore
|
|
7645
7645
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
7646
7646
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
7647
7647
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7648
7648
|
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
7649
7649
|
};
|
|
7650
|
-
var templateObject_1$
|
|
7650
|
+
var templateObject_1$1z, templateObject_2$1d, templateObject_3$10, templateObject_4$P, templateObject_5$F, templateObject_6$z, templateObject_7$t, templateObject_8$m;
|
|
7651
7651
|
|
|
7652
|
-
var Container$
|
|
7652
|
+
var Container$12 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
7653
7653
|
function withProductGrid(ProductItemComponent, data) {
|
|
7654
7654
|
function WithProductGrid(props) {
|
|
7655
|
-
return (jsxRuntime.jsx(Container$
|
|
7655
|
+
return (jsxRuntime.jsx(Container$12, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
7656
7656
|
}
|
|
7657
7657
|
/* istanbul ignore next */
|
|
7658
7658
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
7659
7659
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7660
7660
|
return WithProductGrid;
|
|
7661
7661
|
}
|
|
7662
|
-
var templateObject_1$
|
|
7662
|
+
var templateObject_1$1y;
|
|
7663
7663
|
|
|
7664
7664
|
var Collection = {
|
|
7665
7665
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7667,10 +7667,10 @@ var Collection = {
|
|
|
7667
7667
|
ProductItemTK: ProductItemTK,
|
|
7668
7668
|
};
|
|
7669
7669
|
|
|
7670
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7671
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7672
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3
|
|
7673
|
-
var Span = newStyled.span(templateObject_4$
|
|
7670
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7671
|
+
newStyled(lt.Label)(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7672
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
7673
|
+
var Span = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7674
7674
|
var OptionsContainer = newStyled.div(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
7675
7675
|
var Label$5 = function (_a) {
|
|
7676
7676
|
var label = _a.label, values = _a.values;
|
|
@@ -7689,7 +7689,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7689
7689
|
Option: Option,
|
|
7690
7690
|
OptionsContainer: OptionsContainer,
|
|
7691
7691
|
});
|
|
7692
|
-
var templateObject_1$
|
|
7692
|
+
var templateObject_1$1x, templateObject_2$1c, templateObject_3$$, templateObject_4$O, templateObject_5$E;
|
|
7693
7693
|
|
|
7694
7694
|
var OneColorSelector = function (_a) {
|
|
7695
7695
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7730,21 +7730,21 @@ var OutOfStock = function (_a) {
|
|
|
7730
7730
|
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));
|
|
7731
7731
|
};
|
|
7732
7732
|
|
|
7733
|
-
var Container$
|
|
7733
|
+
var Container$11 = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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) {
|
|
7734
7734
|
var borderColor = _a.borderColor;
|
|
7735
7735
|
return borderColor;
|
|
7736
7736
|
}, function (_a) {
|
|
7737
7737
|
var noStock = _a.noStock;
|
|
7738
7738
|
return (noStock ? '0.4' : '1');
|
|
7739
7739
|
});
|
|
7740
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7740
|
+
var Image$2 = newStyled.img(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7741
7741
|
var PatternSelector = function (_a) {
|
|
7742
7742
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7743
7743
|
var theme = useTheme();
|
|
7744
7744
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7745
|
-
return (jsxRuntime.jsx(Container$
|
|
7745
|
+
return (jsxRuntime.jsx(Container$11, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7746
7746
|
};
|
|
7747
|
-
var templateObject_1$
|
|
7747
|
+
var templateObject_1$1w, templateObject_2$1b;
|
|
7748
7748
|
|
|
7749
7749
|
var renderOptions$1 = function (options, showCross) {
|
|
7750
7750
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7772,10 +7772,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7772
7772
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7773
7773
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7774
7774
|
var showCloseIcon = (tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {}).showCloseIcon;
|
|
7775
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7775
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7776
7776
|
return (jsxs(ColorPickerWrapper, __assign$1({ className: className, value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ showCloseIcon: showCloseIcon, position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7777
7777
|
};
|
|
7778
|
-
var templateObject_1$
|
|
7778
|
+
var templateObject_1$1v;
|
|
7779
7779
|
|
|
7780
7780
|
var renderOptions = function (selectedColor, options) {
|
|
7781
7781
|
if (options == null || options.length === 0) {
|
|
@@ -7813,13 +7813,13 @@ var MultiColorPicker = function (_a) {
|
|
|
7813
7813
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7814
7814
|
};
|
|
7815
7815
|
|
|
7816
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7817
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7818
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7816
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
7817
|
+
var Col$1 = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7818
|
+
var Row$2 = newStyled.div(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"])), function (props) {
|
|
7819
7819
|
return props.rightToLeft &&
|
|
7820
7820
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7821
7821
|
});
|
|
7822
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7822
|
+
var H5 = newStyled.h5(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7823
7823
|
var H3 = newStyled.h3(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7824
7824
|
var FreeShipping = newStyled.span(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7825
7825
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -7827,7 +7827,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7827
7827
|
var theme = useTheme();
|
|
7828
7828
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7829
7829
|
};
|
|
7830
|
-
var templateObject_1$
|
|
7830
|
+
var templateObject_1$1u, templateObject_2$1a, templateObject_3$_, templateObject_4$N, templateObject_5$D, templateObject_6$y;
|
|
7831
7831
|
|
|
7832
7832
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7833
7833
|
__proto__: null,
|
|
@@ -7856,7 +7856,7 @@ var sizeMapper = (_a = {},
|
|
|
7856
7856
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7857
7857
|
_a[exports.ComponentSize.XXSmall] = 'small',
|
|
7858
7858
|
_a);
|
|
7859
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7859
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n ", "\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n ", "\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7860
7860
|
var wide = _a.wide;
|
|
7861
7861
|
return (wide ? '100%' : 'fit-content');
|
|
7862
7862
|
}, function (_a) {
|
|
@@ -7881,11 +7881,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1s || (templateObj
|
|
|
7881
7881
|
var theme = _a.theme;
|
|
7882
7882
|
return theme.colors.text.disabled;
|
|
7883
7883
|
});
|
|
7884
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7884
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7885
7885
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7886
7886
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7887
7887
|
});
|
|
7888
|
-
var templateObject_1$
|
|
7888
|
+
var templateObject_1$1t, templateObject_2$19;
|
|
7889
7889
|
|
|
7890
7890
|
var BaseCTA = function (_a) {
|
|
7891
7891
|
var _b, _c, _d;
|
|
@@ -7976,26 +7976,26 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7976
7976
|
} }), void 0));
|
|
7977
7977
|
};
|
|
7978
7978
|
|
|
7979
|
-
var Container
|
|
7980
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
7981
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7982
|
-
var Details = newStyled.span(templateObject_4$
|
|
7979
|
+
var Container$10 = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
7980
|
+
var IconContainer$5 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __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"])));
|
|
7981
|
+
var Text$3 = newStyled.p(templateObject_3$Z || (templateObject_3$Z = __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; });
|
|
7982
|
+
var Details = newStyled.span(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7983
7983
|
var Note = function (_a) {
|
|
7984
7984
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7985
7985
|
var theme = useTheme();
|
|
7986
|
-
return (jsxRuntime.jsxs(Container
|
|
7986
|
+
return (jsxRuntime.jsxs(Container$10, __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));
|
|
7987
7987
|
};
|
|
7988
|
-
var templateObject_1$
|
|
7988
|
+
var templateObject_1$1s, templateObject_2$18, templateObject_3$Z, templateObject_4$M;
|
|
7989
7989
|
|
|
7990
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7990
|
+
var Title$5 = newStyled.h1(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
7991
7991
|
var theme = _a.theme;
|
|
7992
7992
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
7993
7993
|
});
|
|
7994
|
-
var Line = newStyled.div(templateObject_2$
|
|
7995
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7994
|
+
var Line = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7995
|
+
var Row$1 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
7996
7996
|
flexDirection: ['column', 'row'],
|
|
7997
7997
|
}));
|
|
7998
|
-
var Col = newStyled.div(templateObject_4$
|
|
7998
|
+
var Col = newStyled.div(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
7999
7999
|
margin: ['0', '0 1.25rem'],
|
|
8000
8000
|
marginBottom: ['1.875rem', '0'],
|
|
8001
8001
|
alignItems: ['center', 'flex-start'],
|
|
@@ -8030,16 +8030,16 @@ var DeliveryDetails = function (_a) {
|
|
|
8030
8030
|
var theme = useTheme();
|
|
8031
8031
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
8032
8032
|
};
|
|
8033
|
-
var templateObject_1$
|
|
8033
|
+
var templateObject_1$1r, templateObject_2$17, templateObject_3$Y, templateObject_4$L, templateObject_5$C, templateObject_6$x, templateObject_7$s, templateObject_8$l;
|
|
8034
8034
|
|
|
8035
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
8035
|
+
var Backdrop = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
8036
8036
|
var top = _a.top;
|
|
8037
8037
|
return top;
|
|
8038
8038
|
}, function (_a) {
|
|
8039
8039
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
8040
8040
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
8041
8041
|
});
|
|
8042
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
8042
|
+
var Sidebar = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
8043
8043
|
var height = _a.height;
|
|
8044
8044
|
return height;
|
|
8045
8045
|
}, function (_a) {
|
|
@@ -8086,20 +8086,20 @@ var Drawer = function (_a) {
|
|
|
8086
8086
|
}, [isOpen, onClose, onOpen]);
|
|
8087
8087
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
8088
8088
|
};
|
|
8089
|
-
var templateObject_1$
|
|
8089
|
+
var templateObject_1$1q, templateObject_2$16;
|
|
8090
8090
|
|
|
8091
8091
|
var TooltipArrow = function (_a) {
|
|
8092
8092
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
8093
8093
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
8094
8094
|
};
|
|
8095
8095
|
|
|
8096
|
-
var List = newStyled.ul(templateObject_1$
|
|
8097
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
8098
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
8099
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
8096
|
+
var List = newStyled.ul(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
8097
|
+
var Item$2 = newStyled.li(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
8098
|
+
var DropdownWrapper = newStyled.div(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
8099
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
8100
8100
|
var StyledDropdown = newStyled.ul(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
8101
8101
|
var DropdownItem = newStyled.li(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
8102
|
-
var templateObject_1$
|
|
8102
|
+
var templateObject_1$1p, templateObject_2$15, templateObject_3$X, templateObject_4$K, templateObject_5$B, templateObject_6$w;
|
|
8103
8103
|
|
|
8104
8104
|
var DropdownListIcons = function (_a) {
|
|
8105
8105
|
var items = _a.items;
|
|
@@ -8112,13 +8112,13 @@ var Dropdown = function (_a) {
|
|
|
8112
8112
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
8113
8113
|
};
|
|
8114
8114
|
|
|
8115
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
8116
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
8117
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
8118
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
8115
|
+
var DropdownContainer = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
8116
|
+
var DropdownLabel = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
8117
|
+
var SizeLabel = newStyled.span(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8118
|
+
var DetailLabel = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
8119
8119
|
var DropdownOptions = newStyled.div(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
8120
8120
|
var DropdownOption = newStyled.div(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
8121
|
-
var templateObject_1$
|
|
8121
|
+
var templateObject_1$1o, templateObject_2$14, templateObject_3$W, templateObject_4$J, templateObject_5$A, templateObject_6$v;
|
|
8122
8122
|
|
|
8123
8123
|
var SizeDropdown = function (_a) {
|
|
8124
8124
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8141,14 +8141,14 @@ var SizeDropdown = function (_a) {
|
|
|
8141
8141
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
8142
8142
|
};
|
|
8143
8143
|
|
|
8144
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
8145
|
-
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$
|
|
8146
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_3$
|
|
8144
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
8145
|
+
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
8146
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) {
|
|
8147
8147
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
8148
8148
|
}, function (props) {
|
|
8149
8149
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8150
8150
|
});
|
|
8151
|
-
var DialogDropdownListItem = newStyled.li(templateObject_4$
|
|
8151
|
+
var DialogDropdownListItem = newStyled.li(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
8152
8152
|
var DialogDropdownLink = newStyled.a(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
8153
8153
|
var DropdownDialog = function (_a) {
|
|
8154
8154
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, containerPosRight = _b.containerPosRight, containerPosTop = _b.containerPosTop, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
|
|
@@ -8158,7 +8158,7 @@ var DropdownDialog = function (_a) {
|
|
|
8158
8158
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8159
8159
|
}) }), void 0) }), void 0));
|
|
8160
8160
|
};
|
|
8161
|
-
var templateObject_1$
|
|
8161
|
+
var templateObject_1$1n, templateObject_2$13, templateObject_3$V, templateObject_4$I, templateObject_5$z;
|
|
8162
8162
|
|
|
8163
8163
|
function FilteringDropdown(_a) {
|
|
8164
8164
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -8191,29 +8191,29 @@ function FilteringDropdown(_a) {
|
|
|
8191
8191
|
}) }, void 0)] }), void 0));
|
|
8192
8192
|
}
|
|
8193
8193
|
|
|
8194
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
8195
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
8196
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
8197
|
-
var Container
|
|
8194
|
+
var Title$4 = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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; });
|
|
8195
|
+
var P$3 = newStyled.p(templateObject_2$12 || (templateObject_2$12 = __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; });
|
|
8196
|
+
var ArrowContainer = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
8197
|
+
var Container$$ = newStyled.div(templateObject_4$H || (templateObject_4$H = __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'); });
|
|
8198
8198
|
var Accordion = function (_a) {
|
|
8199
8199
|
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;
|
|
8200
8200
|
var theme = useTheme();
|
|
8201
8201
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8202
|
-
return (jsxRuntime.jsxs(Container
|
|
8202
|
+
return (jsxRuntime.jsxs(Container$$, __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));
|
|
8203
8203
|
};
|
|
8204
|
-
var templateObject_1$
|
|
8204
|
+
var templateObject_1$1m, templateObject_2$12, templateObject_3$U, templateObject_4$H;
|
|
8205
8205
|
|
|
8206
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
8207
|
-
var Header$3 = newStyled.div(templateObject_2$
|
|
8208
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
8209
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
8206
|
+
var SectionContent = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
8207
|
+
var Header$3 = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
8208
|
+
var MobileHeader = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
8209
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
8210
8210
|
var H4 = newStyled.h4(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
8211
8211
|
var FilterLink = newStyled.a(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
8212
8212
|
var OptionContainer = newStyled.div(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
8213
8213
|
var ClearAll = newStyled.span(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
8214
8214
|
var MobileFooter = newStyled.div(templateObject_9$c || (templateObject_9$c = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
8215
8215
|
var MobileClearContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
8216
|
-
var templateObject_1$
|
|
8216
|
+
var templateObject_1$1l, templateObject_2$11, templateObject_3$T, templateObject_4$G, templateObject_5$y, templateObject_6$u, templateObject_7$r, templateObject_8$k, templateObject_9$c, templateObject_10$b;
|
|
8217
8217
|
|
|
8218
8218
|
var getStylesBySize$9 = function (size, theme) {
|
|
8219
8219
|
switch (size) {
|
|
@@ -8278,9 +8278,9 @@ var SelectorSecondary = function (_a) {
|
|
|
8278
8278
|
} }), id: id }, void 0));
|
|
8279
8279
|
};
|
|
8280
8280
|
|
|
8281
|
-
var UL = newStyled.ul(templateObject_1$
|
|
8282
|
-
var LI = newStyled.li(templateObject_2
|
|
8283
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
8281
|
+
var UL = newStyled.ul(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
8282
|
+
var LI = newStyled.li(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
8283
|
+
var CloseIconContainer = newStyled.div(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
8284
8284
|
var Tags = function (_a) {
|
|
8285
8285
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
8286
8286
|
var theme = useTheme();
|
|
@@ -8288,7 +8288,7 @@ var Tags = function (_a) {
|
|
|
8288
8288
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
8289
8289
|
}) }), void 0));
|
|
8290
8290
|
};
|
|
8291
|
-
var templateObject_1$
|
|
8291
|
+
var templateObject_1$1k, templateObject_2$10, templateObject_3$S;
|
|
8292
8292
|
|
|
8293
8293
|
var Filters = function (_a) {
|
|
8294
8294
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -8424,8 +8424,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8424
8424
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
8425
8425
|
};
|
|
8426
8426
|
|
|
8427
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
8428
|
-
var Container$
|
|
8427
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
8428
|
+
var Container$_ = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __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"])));
|
|
8429
8429
|
var FitGuarantee = function (_a) {
|
|
8430
8430
|
var _b;
|
|
8431
8431
|
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;
|
|
@@ -8436,17 +8436,17 @@ var FitGuarantee = function (_a) {
|
|
|
8436
8436
|
console.error('Icon', iconName, 'not found');
|
|
8437
8437
|
return null;
|
|
8438
8438
|
}
|
|
8439
|
-
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$
|
|
8439
|
+
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$_, __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$_, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
8440
8440
|
margin: '0.1rem 0',
|
|
8441
8441
|
width: '100%',
|
|
8442
8442
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
8443
8443
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8444
8444
|
} }, { children: title }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
8445
8445
|
};
|
|
8446
|
-
var templateObject_1$
|
|
8446
|
+
var templateObject_1$1j, templateObject_2$$;
|
|
8447
8447
|
|
|
8448
|
-
var Container$
|
|
8449
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
8448
|
+
var Container$Z = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __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"])));
|
|
8449
|
+
var P$2 = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __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; });
|
|
8450
8450
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8451
8451
|
border: 'none',
|
|
8452
8452
|
background: 'transparent',
|
|
@@ -8459,9 +8459,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
8459
8459
|
var FitPredictor = function (_a) {
|
|
8460
8460
|
var onClick = _a.onClick;
|
|
8461
8461
|
var theme = useTheme();
|
|
8462
|
-
return (jsxs(Container$
|
|
8462
|
+
return (jsxs(Container$Z, __assign$1({ theme: theme }, { children: [jsx(Container$Z, { 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));
|
|
8463
8463
|
};
|
|
8464
|
-
var templateObject_1$
|
|
8464
|
+
var templateObject_1$1i, templateObject_2$_;
|
|
8465
8465
|
|
|
8466
8466
|
var Button$8 = newStyled.button(function () { return ({
|
|
8467
8467
|
background: 'transparent',
|
|
@@ -12705,14 +12705,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12705
12705
|
return Slider;
|
|
12706
12706
|
}(React__default["default"].Component);
|
|
12707
12707
|
|
|
12708
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12708
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
12709
12709
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12710
12710
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12711
12711
|
}, function (_a) {
|
|
12712
12712
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12713
12713
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12714
12714
|
});
|
|
12715
|
-
var templateObject_1$
|
|
12715
|
+
var templateObject_1$1h;
|
|
12716
12716
|
|
|
12717
12717
|
var getStylesBySize$8 = function (size) {
|
|
12718
12718
|
// rem units
|
|
@@ -12771,7 +12771,7 @@ var SliderNavigation = function (_a) {
|
|
|
12771
12771
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
12772
12772
|
};
|
|
12773
12773
|
|
|
12774
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12774
|
+
var Image$1 = newStyled.img(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
12775
12775
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12776
12776
|
return borderRadiusVariant &&
|
|
12777
12777
|
"\n border-radius: 20px;\n ";
|
|
@@ -12789,7 +12789,7 @@ var Image$1 = newStyled.img(templateObject_1$1f || (templateObject_1$1f = __make
|
|
|
12789
12789
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12790
12790
|
: 'inherit';
|
|
12791
12791
|
});
|
|
12792
|
-
var templateObject_1$
|
|
12792
|
+
var templateObject_1$1g;
|
|
12793
12793
|
|
|
12794
12794
|
var ImageSmallPreview = function (_a) {
|
|
12795
12795
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare, _c = _a.loading, loading = _c === void 0 ? 'eager' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'auto' : _d;
|
|
@@ -12797,9 +12797,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12797
12797
|
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: loading, decoding: decoding, width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
12798
12798
|
};
|
|
12799
12799
|
|
|
12800
|
-
var horizontalStyles = css(templateObject_1$
|
|
12801
|
-
var verticalStyles = css(templateObject_2$
|
|
12802
|
-
var Container$
|
|
12800
|
+
var horizontalStyles = css(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
12801
|
+
var verticalStyles = css(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
12802
|
+
var Container$Y = newStyled.div(templateObject_3$R || (templateObject_3$R = __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) {
|
|
12803
12803
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12804
12804
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12805
12805
|
}, function (_a) {
|
|
@@ -12810,12 +12810,12 @@ var Container$X = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __ma
|
|
|
12810
12810
|
return hasOverflowArrows &&
|
|
12811
12811
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12812
12812
|
});
|
|
12813
|
-
var Button$7 = newStyled.button(templateObject_4$
|
|
12813
|
+
var Button$7 = newStyled.button(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
12814
12814
|
var ArrowsContainer = newStyled.div(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
12815
12815
|
var ArrowBaseStyles = newStyled.div(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
12816
12816
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
12817
12817
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
12818
|
-
var templateObject_1$
|
|
12818
|
+
var templateObject_1$1f, templateObject_2$Z, templateObject_3$R, templateObject_4$F, templateObject_5$x, templateObject_6$t, templateObject_7$q, templateObject_8$j;
|
|
12819
12819
|
|
|
12820
12820
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12821
12821
|
var loading = 'eager';
|
|
@@ -12843,7 +12843,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12843
12843
|
var element = document.querySelector(".imageListContainer");
|
|
12844
12844
|
element.scrollBy(0, 200);
|
|
12845
12845
|
};
|
|
12846
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
12846
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$Y, __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: {
|
|
12847
12847
|
arrowWidth: 0.75,
|
|
12848
12848
|
arrowHeight: 1.25,
|
|
12849
12849
|
arrowPadding: 1.625,
|
|
@@ -14443,22 +14443,22 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14443
14443
|
afterZoomOut: PropTypes.func
|
|
14444
14444
|
} : {};
|
|
14445
14445
|
|
|
14446
|
-
var Container$
|
|
14446
|
+
var Container$X = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
14447
14447
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14448
14448
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14449
14449
|
});
|
|
14450
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
14450
|
+
var TopTagContainer$7 = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
14451
14451
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14452
14452
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
14453
14453
|
}, function (_a) {
|
|
14454
14454
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14455
14455
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
14456
14456
|
});
|
|
14457
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
14457
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
14458
14458
|
var isCTAHidden = _a.isCTAHidden;
|
|
14459
14459
|
return (isCTAHidden ? '60px' : '120px');
|
|
14460
14460
|
});
|
|
14461
|
-
var TopRightTagWrapper = newStyled.div(templateObject_4$
|
|
14461
|
+
var TopRightTagWrapper = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14462
14462
|
var TopRightTagContainer$2 = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14463
14463
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
14464
14464
|
var ImageStyled = newStyled(Image$3)(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
@@ -14469,14 +14469,14 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$i || (temp
|
|
|
14469
14469
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14470
14470
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14471
14471
|
});
|
|
14472
|
-
var templateObject_1$
|
|
14472
|
+
var templateObject_1$1e, templateObject_2$Y, templateObject_3$Q, templateObject_4$E, templateObject_5$w, templateObject_6$s, templateObject_7$p, templateObject_8$i;
|
|
14473
14473
|
|
|
14474
14474
|
var ImageProductSlide$1 = function (_a) {
|
|
14475
14475
|
var _b;
|
|
14476
14476
|
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;
|
|
14477
14477
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14478
14478
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
14479
|
-
return (jsxRuntime.jsxs(Container$
|
|
14479
|
+
return (jsxRuntime.jsxs(Container$X, __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: {
|
|
14480
14480
|
alt: content.alt,
|
|
14481
14481
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
14482
14482
|
loading: 'eager',
|
|
@@ -14484,8 +14484,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14484
14484
|
}, 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));
|
|
14485
14485
|
};
|
|
14486
14486
|
|
|
14487
|
-
var Container$
|
|
14488
|
-
var templateObject_1$
|
|
14487
|
+
var Container$W = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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"])));
|
|
14488
|
+
var templateObject_1$1d;
|
|
14489
14489
|
|
|
14490
14490
|
var getInitialIndex = function (images, selectedValue) {
|
|
14491
14491
|
if (selectedValue) {
|
|
@@ -14511,10 +14511,10 @@ var ProductGallery = function (_a) {
|
|
|
14511
14511
|
setActiveIndex(index);
|
|
14512
14512
|
};
|
|
14513
14513
|
var selectedImage = images[activeIndex];
|
|
14514
|
-
return (jsxRuntime.jsxs(Container$
|
|
14514
|
+
return (jsxRuntime.jsxs(Container$W, { 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));
|
|
14515
14515
|
};
|
|
14516
14516
|
|
|
14517
|
-
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$
|
|
14517
|
+
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$1c || (templateObject_1$1c = __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; });
|
|
14518
14518
|
var AmazonButton = function (_a) {
|
|
14519
14519
|
var onClick = _a.onClick;
|
|
14520
14520
|
return (jsxRuntime.jsx(StyledButton$3, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -14523,9 +14523,9 @@ var PaypalButton = function (_a) {
|
|
|
14523
14523
|
var onClick = _a.onClick;
|
|
14524
14524
|
return (jsxRuntime.jsx(StyledButton$3, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
14525
14525
|
};
|
|
14526
|
-
var templateObject_1$
|
|
14526
|
+
var templateObject_1$1c;
|
|
14527
14527
|
|
|
14528
|
-
var Container$
|
|
14528
|
+
var Container$V = newStyled.div(function (props) { return ({
|
|
14529
14529
|
height: 'auto',
|
|
14530
14530
|
textAlign: 'center',
|
|
14531
14531
|
justifyContent: 'center',
|
|
@@ -14575,12 +14575,12 @@ var IconsWithTitle = function (_a) {
|
|
|
14575
14575
|
textAlign: 'center',
|
|
14576
14576
|
lineHeight: '18px',
|
|
14577
14577
|
};
|
|
14578
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
14578
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$V, __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));
|
|
14579
14579
|
};
|
|
14580
14580
|
|
|
14581
|
-
var Container$
|
|
14582
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14583
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14581
|
+
var Container$U = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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'); });
|
|
14582
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$X || (templateObject_2$X = __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'); });
|
|
14583
|
+
var StyledTitle = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14584
14584
|
var titlePosition = _a.titlePosition;
|
|
14585
14585
|
return titlePosition == 'center' &&
|
|
14586
14586
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14588,15 +14588,15 @@ var StyledTitle = newStyled.div(templateObject_3$O || (templateObject_3$O = __ma
|
|
|
14588
14588
|
var ImageCardWithDescription = function (_a) {
|
|
14589
14589
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14590
14590
|
var isMobile = useWindowDimensions().isMobile;
|
|
14591
|
-
return (jsxRuntime.jsxs(Container$
|
|
14591
|
+
return (jsxRuntime.jsxs(Container$U, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14592
14592
|
};
|
|
14593
|
-
var templateObject_1$
|
|
14593
|
+
var templateObject_1$1b, templateObject_2$X, templateObject_3$P;
|
|
14594
14594
|
|
|
14595
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14595
|
+
var Label$4 = newStyled.span(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
14596
14596
|
var color = _a.color;
|
|
14597
14597
|
return color;
|
|
14598
14598
|
});
|
|
14599
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14599
|
+
var MandatoryIcon = newStyled.span(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14600
14600
|
var color = _a.color;
|
|
14601
14601
|
return color;
|
|
14602
14602
|
});
|
|
@@ -14605,7 +14605,7 @@ var InputLabel = function (_a) {
|
|
|
14605
14605
|
var theme = useTheme();
|
|
14606
14606
|
return (jsxRuntime.jsxs(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
14607
14607
|
};
|
|
14608
|
-
var templateObject_1$
|
|
14608
|
+
var templateObject_1$1a, templateObject_2$W;
|
|
14609
14609
|
|
|
14610
14610
|
var containerByStatus = function (theme, status) {
|
|
14611
14611
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -14614,12 +14614,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14614
14614
|
return theme.colors.semantic.urgent.color;
|
|
14615
14615
|
return '';
|
|
14616
14616
|
};
|
|
14617
|
-
var Container$
|
|
14617
|
+
var Container$T = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14618
14618
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14619
14619
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14620
14620
|
});
|
|
14621
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14622
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14621
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
14622
|
+
var StyledInput = newStyled.input(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
14623
14623
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14624
14624
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14625
14625
|
}, function (_a) {
|
|
@@ -14674,7 +14674,7 @@ var StyledInput = newStyled.input(templateObject_3$N || (templateObject_3$N = __
|
|
|
14674
14674
|
return hasValue &&
|
|
14675
14675
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14676
14676
|
});
|
|
14677
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14677
|
+
var InputWrapper = newStyled.div(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14678
14678
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14679
14679
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14680
14680
|
});
|
|
@@ -14692,7 +14692,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$v || (templateObject_5
|
|
|
14692
14692
|
return theme.component.input.lineHeight;
|
|
14693
14693
|
});
|
|
14694
14694
|
var ClearInput = newStyled.div(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
14695
|
-
var templateObject_1$
|
|
14695
|
+
var templateObject_1$19, templateObject_2$V, templateObject_3$O, templateObject_4$D, templateObject_5$v, templateObject_6$r;
|
|
14696
14696
|
|
|
14697
14697
|
var BaseInput = function (_a) {
|
|
14698
14698
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, customErrorMessage = _a.customErrorMessage, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder", "customErrorMessage"]);
|
|
@@ -14716,7 +14716,7 @@ var BaseInput = function (_a) {
|
|
|
14716
14716
|
}, [status]);
|
|
14717
14717
|
var hasValue = Boolean(value);
|
|
14718
14718
|
var errorMessage = customErrorMessage || (status === exports.InputValidationType.Error && required);
|
|
14719
|
-
return (jsxRuntime.jsxs(Container$
|
|
14719
|
+
return (jsxRuntime.jsxs(Container$T, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14720
14720
|
onChange(event.target.value, event);
|
|
14721
14721
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
14722
14722
|
onChange('', { target: { value: '' } });
|
|
@@ -14737,11 +14737,11 @@ var Button$6 = function (_a) {
|
|
|
14737
14737
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14738
14738
|
};
|
|
14739
14739
|
|
|
14740
|
-
var Container$
|
|
14740
|
+
var Container$S = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
14741
14741
|
var theme = _a.theme;
|
|
14742
14742
|
return theme.component.inputCustom.input.borderRadius;
|
|
14743
14743
|
});
|
|
14744
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14744
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
14745
14745
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14746
14746
|
return defaultRounded
|
|
14747
14747
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14756,23 +14756,23 @@ var Custom = function (_a) {
|
|
|
14756
14756
|
text: text,
|
|
14757
14757
|
disabled: rest.disabled,
|
|
14758
14758
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14759
|
-
return (jsxRuntime.jsx(Container$
|
|
14759
|
+
return (jsxRuntime.jsx(Container$S, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14760
14760
|
};
|
|
14761
|
-
var templateObject_1$
|
|
14761
|
+
var templateObject_1$18, templateObject_2$U;
|
|
14762
14762
|
|
|
14763
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14763
|
+
var SuccessContainer = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14764
14764
|
var size = _a.size;
|
|
14765
14765
|
return (size === 'small' ? '36px' : '');
|
|
14766
14766
|
});
|
|
14767
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14768
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14767
|
+
var SuccessMessage = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
14768
|
+
var SuccessText = newStyled.span(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
14769
14769
|
var Success = function (_a) {
|
|
14770
14770
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14771
14771
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14772
14772
|
};
|
|
14773
|
-
var templateObject_1$
|
|
14773
|
+
var templateObject_1$17, templateObject_2$T, templateObject_3$N;
|
|
14774
14774
|
|
|
14775
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14775
|
+
var ButtonContainer = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14776
14776
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14777
14777
|
return status === exports.InputValidationType.Empty &&
|
|
14778
14778
|
type === 'primary' &&
|
|
@@ -14789,16 +14789,16 @@ var BasePlusButton = function (_a) {
|
|
|
14789
14789
|
}
|
|
14790
14790
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14791
14791
|
};
|
|
14792
|
-
var templateObject_1$
|
|
14792
|
+
var templateObject_1$16;
|
|
14793
14793
|
|
|
14794
|
-
var Container$
|
|
14795
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14794
|
+
var Container$R = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14795
|
+
var IconContainer$3 = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
14796
14796
|
var BasePlusIcon = function (_a) {
|
|
14797
14797
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14798
14798
|
var theme = useTheme();
|
|
14799
|
-
return (jsxRuntime.jsx(Container$
|
|
14799
|
+
return (jsxRuntime.jsx(Container$R, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14800
14800
|
};
|
|
14801
|
-
var templateObject_1$
|
|
14801
|
+
var templateObject_1$15, templateObject_2$S;
|
|
14802
14802
|
|
|
14803
14803
|
var Input$3 = {
|
|
14804
14804
|
Simple: BaseInput,
|
|
@@ -14938,14 +14938,14 @@ var Portal = function (_a) {
|
|
|
14938
14938
|
var visibleStyle = function (_a) {
|
|
14939
14939
|
var opened = _a.opened;
|
|
14940
14940
|
return opened
|
|
14941
|
-
? css(templateObject_1$
|
|
14941
|
+
? css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14942
14942
|
};
|
|
14943
14943
|
var transformStyle = function (_a) {
|
|
14944
14944
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14945
14945
|
return opened
|
|
14946
|
-
? css(templateObject_3$
|
|
14946
|
+
? css(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14947
14947
|
};
|
|
14948
|
-
var Container$
|
|
14948
|
+
var Container$Q = newStyled.div(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14949
14949
|
var width = _a.width;
|
|
14950
14950
|
return width
|
|
14951
14951
|
? css(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
@@ -14962,7 +14962,7 @@ var Modal = function (_a) {
|
|
|
14962
14962
|
}
|
|
14963
14963
|
close();
|
|
14964
14964
|
};
|
|
14965
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14965
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$Q, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
|
|
14966
14966
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14967
14967
|
onDismiss();
|
|
14968
14968
|
} }, void 0)] }), void 0));
|
|
@@ -14993,7 +14993,7 @@ var useModal = function (id) {
|
|
|
14993
14993
|
close: close,
|
|
14994
14994
|
}); }, [close, open, opened]);
|
|
14995
14995
|
};
|
|
14996
|
-
var templateObject_1$
|
|
14996
|
+
var templateObject_1$14, templateObject_2$R, templateObject_3$M, templateObject_4$C, templateObject_5$u, templateObject_6$q, templateObject_7$o;
|
|
14997
14997
|
|
|
14998
14998
|
var htmlReactParser = {exports: {}};
|
|
14999
14999
|
|
|
@@ -18774,7 +18774,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18774
18774
|
HTMLReactParser$1.attributesToProps;
|
|
18775
18775
|
HTMLReactParser$1.Element;
|
|
18776
18776
|
|
|
18777
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
18777
|
+
var Bar$1 = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18778
18778
|
var height = _a.height;
|
|
18779
18779
|
return height || '0.5rem';
|
|
18780
18780
|
}, function (_a) {
|
|
@@ -18813,7 +18813,7 @@ var BarContainer = newStyled.div({
|
|
|
18813
18813
|
padding: '0 16px',
|
|
18814
18814
|
position: 'relative',
|
|
18815
18815
|
});
|
|
18816
|
-
var Container$
|
|
18816
|
+
var Container$P = newStyled.div(function (_a) {
|
|
18817
18817
|
var backgroundColor = _a.backgroundColor;
|
|
18818
18818
|
return ({
|
|
18819
18819
|
width: '475px',
|
|
@@ -18826,7 +18826,7 @@ var Container$O = newStyled.div(function (_a) {
|
|
|
18826
18826
|
background: backgroundColor,
|
|
18827
18827
|
});
|
|
18828
18828
|
});
|
|
18829
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18829
|
+
var MessageContainer = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18830
18830
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18831
18831
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18832
18832
|
};
|
|
@@ -18855,33 +18855,33 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18855
18855
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18856
18856
|
return (jsxRuntime.jsx(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18857
18857
|
};
|
|
18858
|
-
return (jsxRuntime.jsxs(Container$
|
|
18858
|
+
return (jsxRuntime.jsxs(Container$P, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18859
18859
|
};
|
|
18860
|
-
var templateObject_1$
|
|
18860
|
+
var templateObject_1$13, templateObject_2$Q;
|
|
18861
18861
|
|
|
18862
|
-
var Container$
|
|
18862
|
+
var Container$O = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
18863
18863
|
var theme = _a.theme;
|
|
18864
18864
|
return theme.component.orderBar.backgroundColor;
|
|
18865
18865
|
});
|
|
18866
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18866
|
+
var H1 = newStyled.h1(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
18867
18867
|
var OrderBar = function (_a) {
|
|
18868
18868
|
var message = _a.message, color = _a.color;
|
|
18869
18869
|
var theme = useTheme();
|
|
18870
|
-
return (jsxRuntime.jsxs(Container$
|
|
18870
|
+
return (jsxRuntime.jsxs(Container$O, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18871
18871
|
};
|
|
18872
|
-
var templateObject_1$
|
|
18872
|
+
var templateObject_1$12, templateObject_2$P;
|
|
18873
18873
|
|
|
18874
|
-
var Container$
|
|
18875
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18876
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18877
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18874
|
+
var Container$N = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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"])));
|
|
18875
|
+
var Card$1 = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18876
|
+
var Tag$1 = newStyled.div(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
18877
|
+
var Label$3 = newStyled.div(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
18878
18878
|
var Check = newStyled.div(templateObject_5$t || (templateObject_5$t = __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"])));
|
|
18879
18879
|
var IconContainer$2 = newStyled.div(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18880
18880
|
var IconPlaceholder = newStyled.div(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18881
18881
|
var DiscountContainer = newStyled.div(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18882
18882
|
var PackSelector = function (_a) {
|
|
18883
18883
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18884
|
-
return (jsxRuntime.jsx(Container$
|
|
18884
|
+
return (jsxRuntime.jsx(Container$N, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18885
18885
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18886
18886
|
}) }), void 0));
|
|
18887
18887
|
};
|
|
@@ -18908,14 +18908,14 @@ var PackCard = function (_a) {
|
|
|
18908
18908
|
currency: currencyCode || 'USD',
|
|
18909
18909
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18910
18910
|
};
|
|
18911
|
-
var templateObject_1$
|
|
18911
|
+
var templateObject_1$11, templateObject_2$O, templateObject_3$L, templateObject_4$B, templateObject_5$t, templateObject_6$p, templateObject_7$n, templateObject_8$h;
|
|
18912
18912
|
|
|
18913
|
-
var Container$
|
|
18914
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18915
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18913
|
+
var Container$M = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18914
|
+
var IconContainer$1 = newStyled.div(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18915
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18916
18916
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18917
18917
|
}));
|
|
18918
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18918
|
+
var PageNumber = newStyled.span(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
18919
18919
|
var bold = _a.bold;
|
|
18920
18920
|
return (bold ? '700' : '500');
|
|
18921
18921
|
}, function (_a) {
|
|
@@ -18932,7 +18932,7 @@ var PageNumber = newStyled.span(templateObject_4$z || (templateObject_4$z = __ma
|
|
|
18932
18932
|
var background = _a.background;
|
|
18933
18933
|
return background || 'unset';
|
|
18934
18934
|
});
|
|
18935
|
-
var templateObject_1
|
|
18935
|
+
var templateObject_1$10, templateObject_2$N, templateObject_3$K, templateObject_4$A;
|
|
18936
18936
|
|
|
18937
18937
|
var Pagination = function (_a) {
|
|
18938
18938
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18978,7 +18978,7 @@ var Pagination = function (_a) {
|
|
|
18978
18978
|
}
|
|
18979
18979
|
return pages;
|
|
18980
18980
|
}, [from, page, showReducedPages, to]);
|
|
18981
|
-
return (jsxRuntime.jsxs(Container$
|
|
18981
|
+
return (jsxRuntime.jsxs(Container$M, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18982
18982
|
};
|
|
18983
18983
|
|
|
18984
18984
|
var PaginatorBlog = function (_a) {
|
|
@@ -18992,12 +18992,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18992
18992
|
setPage(page);
|
|
18993
18993
|
onChange(page);
|
|
18994
18994
|
};
|
|
18995
|
-
return (jsxRuntime.jsxs(Container$
|
|
18995
|
+
return (jsxRuntime.jsxs(Container$M, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18996
18996
|
? theme.colors.shades['white'].color
|
|
18997
18997
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18998
18998
|
};
|
|
18999
18999
|
|
|
19000
|
-
var Container$
|
|
19000
|
+
var Container$L = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
19001
19001
|
var width = _a.width;
|
|
19002
19002
|
return width;
|
|
19003
19003
|
}, function (_a) {
|
|
@@ -19013,14 +19013,14 @@ var Container$K = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __ma
|
|
|
19013
19013
|
var PaymentMethod = function (_a) {
|
|
19014
19014
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
19015
19015
|
var theme = useTheme();
|
|
19016
|
-
return (jsxRuntime.jsx(Container$
|
|
19016
|
+
return (jsxRuntime.jsx(Container$L, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
19017
19017
|
};
|
|
19018
|
-
var templateObject_1
|
|
19018
|
+
var templateObject_1$$;
|
|
19019
19019
|
|
|
19020
|
-
var Container$
|
|
19020
|
+
var Container$K = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
19021
19021
|
var IMAGE_WIDTH = '63px';
|
|
19022
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
19023
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
19022
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
19023
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
19024
19024
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
19025
19025
|
}), IMAGE_WIDTH);
|
|
19026
19026
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -19043,7 +19043,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
19043
19043
|
margin: margin,
|
|
19044
19044
|
});
|
|
19045
19045
|
});
|
|
19046
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
19046
|
+
var PriceContainer = newStyled.div(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
19047
19047
|
var withTag = _a.withTag; _a.theme;
|
|
19048
19048
|
return withTag
|
|
19049
19049
|
? mediaQueries({
|
|
@@ -19062,9 +19062,9 @@ var SimpleOrderItem = function (_a) {
|
|
|
19062
19062
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19063
19063
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, midElement = _a.midElement, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle, isGift = _a.isGift;
|
|
19064
19064
|
var theme = useTheme();
|
|
19065
|
-
return (jsxRuntime.jsxs(Container$
|
|
19065
|
+
return (jsxRuntime.jsxs(Container$K, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsxRuntime.jsx(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsxRuntime.jsx(Gift, { children: "Limited Time Only" }, void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsxRuntime.jsx(Gift, { children: "GIFT" }, void 0)) : (jsxRuntime.jsx(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
19066
19066
|
};
|
|
19067
|
-
var templateObject_1$
|
|
19067
|
+
var templateObject_1$_, templateObject_2$M, templateObject_3$J, templateObject_4$z, templateObject_5$s, templateObject_6$o, templateObject_7$m;
|
|
19068
19068
|
|
|
19069
19069
|
var P$1 = newStyled.p(function (_a) {
|
|
19070
19070
|
var color = _a.color;
|
|
@@ -19078,7 +19078,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
19078
19078
|
margin: '0.938rem 4.188rem',
|
|
19079
19079
|
});
|
|
19080
19080
|
});
|
|
19081
|
-
var Bar = newStyled.div(templateObject_1$
|
|
19081
|
+
var Bar = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
19082
19082
|
var height = _a.height;
|
|
19083
19083
|
return height || '0.5rem';
|
|
19084
19084
|
}, function (_a) {
|
|
@@ -19107,7 +19107,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
19107
19107
|
position: 'absolute',
|
|
19108
19108
|
});
|
|
19109
19109
|
});
|
|
19110
|
-
var Container$
|
|
19110
|
+
var Container$J = newStyled.div(function (_a) {
|
|
19111
19111
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
19112
19112
|
return ({
|
|
19113
19113
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -19121,14 +19121,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
19121
19121
|
var ProgressBar = function (_a) {
|
|
19122
19122
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
19123
19123
|
var theme = useTheme();
|
|
19124
|
-
return (jsxRuntime.jsxs(Container$
|
|
19124
|
+
return (jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
19125
19125
|
};
|
|
19126
|
-
var templateObject_1$
|
|
19126
|
+
var templateObject_1$Z;
|
|
19127
19127
|
|
|
19128
|
-
var Container$
|
|
19129
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19130
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19131
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19128
|
+
var Container$I = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
19129
|
+
var Item$1 = newStyled.span(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
19130
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
19131
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
19132
19132
|
var QuantityPicker = function (_a) {
|
|
19133
19133
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
19134
19134
|
var theme = useTheme();
|
|
@@ -19151,9 +19151,9 @@ var QuantityPicker = function (_a) {
|
|
|
19151
19151
|
return clamp(value);
|
|
19152
19152
|
});
|
|
19153
19153
|
}, [value, clamp]);
|
|
19154
|
-
return (jsxRuntime.jsxs(Container$
|
|
19154
|
+
return (jsxRuntime.jsxs(Container$I, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19155
19155
|
};
|
|
19156
|
-
var templateObject_1$
|
|
19156
|
+
var templateObject_1$Y, templateObject_2$L, templateObject_3$I, templateObject_4$y;
|
|
19157
19157
|
|
|
19158
19158
|
/* base styles & size variants */
|
|
19159
19159
|
var CustomRadioStyles$1 = {
|
|
@@ -19222,9 +19222,9 @@ var ContainerStyles$1 = {
|
|
|
19222
19222
|
},
|
|
19223
19223
|
};
|
|
19224
19224
|
|
|
19225
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19226
|
-
var Container$
|
|
19227
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19225
|
+
var Wrapper$3 = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19226
|
+
var Container$H = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19227
|
+
var Input$2 = newStyled.input(templateObject_2$K || (templateObject_2$K = __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) {
|
|
19228
19228
|
var disabled = _a.disabled;
|
|
19229
19229
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19230
19230
|
});
|
|
@@ -19232,7 +19232,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19232
19232
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19233
19233
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19234
19234
|
]; });
|
|
19235
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19235
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
19236
19236
|
var RadioPrimary = function (_a) {
|
|
19237
19237
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d;
|
|
19238
19238
|
var theme = useTheme();
|
|
@@ -19240,9 +19240,9 @@ var RadioPrimary = function (_a) {
|
|
|
19240
19240
|
var value = event.currentTarget.value;
|
|
19241
19241
|
onChange({ value: value, label: label });
|
|
19242
19242
|
};
|
|
19243
|
-
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
19243
|
+
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$H, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19244
19244
|
};
|
|
19245
|
-
var templateObject_1$
|
|
19245
|
+
var templateObject_1$X, templateObject_2$K, templateObject_3$H;
|
|
19246
19246
|
|
|
19247
19247
|
var RadioGroupInput = function (_a) {
|
|
19248
19248
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19321,9 +19321,9 @@ var ContainerStyles = {
|
|
|
19321
19321
|
},
|
|
19322
19322
|
};
|
|
19323
19323
|
|
|
19324
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19325
|
-
var Container$
|
|
19326
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19324
|
+
var Wrapper$2 = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
19325
|
+
var Container$G = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19326
|
+
var Input$1 = newStyled.input(templateObject_2$J || (templateObject_2$J = __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) {
|
|
19327
19327
|
var disabled = _a.disabled;
|
|
19328
19328
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19329
19329
|
});
|
|
@@ -19331,7 +19331,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19331
19331
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19332
19332
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19333
19333
|
]; });
|
|
19334
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19334
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19335
19335
|
var theme = _a.theme;
|
|
19336
19336
|
return theme.component.radio.textSize;
|
|
19337
19337
|
}, function (_a) {
|
|
@@ -19345,9 +19345,9 @@ var ClubRadioInput = function (_a) {
|
|
|
19345
19345
|
var value = event.currentTarget.value;
|
|
19346
19346
|
onChange({ value: value, label: label });
|
|
19347
19347
|
};
|
|
19348
|
-
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$
|
|
19348
|
+
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$G, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19349
19349
|
};
|
|
19350
|
-
var templateObject_1$
|
|
19350
|
+
var templateObject_1$W, templateObject_2$J, templateObject_3$G;
|
|
19351
19351
|
|
|
19352
19352
|
var ClubRadioGroupInput = function (_a) {
|
|
19353
19353
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19375,10 +19375,10 @@ function formatDate(date, format) {
|
|
|
19375
19375
|
}
|
|
19376
19376
|
}
|
|
19377
19377
|
|
|
19378
|
-
var Container$
|
|
19379
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19380
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19381
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19378
|
+
var Container$F = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
19379
|
+
var Content$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
19380
|
+
var StarsContent = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19381
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
19382
19382
|
var DateText$1 = newStyled.span(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
19383
19383
|
var ReviewerName$1 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
19384
19384
|
var VerifiedText = newStyled.h1(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
@@ -19413,17 +19413,17 @@ var Review$1 = function (_a) {
|
|
|
19413
19413
|
}
|
|
19414
19414
|
}
|
|
19415
19415
|
}, [opened]);
|
|
19416
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
19416
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$F, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19417
19417
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19418
19418
|
};
|
|
19419
|
-
var templateObject_1$
|
|
19419
|
+
var templateObject_1$V, templateObject_2$I, templateObject_3$F, templateObject_4$x, templateObject_5$r, templateObject_6$n, templateObject_7$l, templateObject_8$g, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19420
19420
|
|
|
19421
19421
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19422
19422
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19423
|
-
var Container$
|
|
19424
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19425
|
-
var Content = newStyled.div(templateObject_3$
|
|
19426
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19423
|
+
var Container$E = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
19424
|
+
var Heading = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19425
|
+
var Content = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19426
|
+
var ReviewContainer = newStyled.div(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19427
19427
|
var DateText = newStyled.span(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19428
19428
|
var VariantText = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19429
19429
|
var ReviewerName = newStyled.h2(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
@@ -19462,7 +19462,7 @@ var Review = function (_a) {
|
|
|
19462
19462
|
});
|
|
19463
19463
|
};
|
|
19464
19464
|
}, [randomId]);
|
|
19465
|
-
return (jsxRuntime.jsxs(Container$
|
|
19465
|
+
return (jsxRuntime.jsxs(Container$E, { children: [jsxRuntime.jsxs(Heading, { children: [jsxRuntime.jsx(ReviewerName, { children: reviewerName }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
19466
19466
|
__html: showMoreMobile
|
|
19467
19467
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19468
19468
|
: description,
|
|
@@ -19472,12 +19472,12 @@ var Review = function (_a) {
|
|
|
19472
19472
|
: description,
|
|
19473
19473
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19474
19474
|
};
|
|
19475
|
-
var templateObject_1$
|
|
19475
|
+
var templateObject_1$U, templateObject_2$H, templateObject_3$E, templateObject_4$w, templateObject_5$q, templateObject_6$m, templateObject_7$k, templateObject_8$f, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$2, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19476
19476
|
|
|
19477
|
-
var Container$
|
|
19478
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19479
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19480
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19477
|
+
var Container$D = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19478
|
+
var ReviewsContainer = newStyled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
19479
|
+
var ReviewsCount = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
19480
|
+
var ReviewsStars = newStyled.div(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
19481
19481
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
19482
19482
|
var ReviewsImages = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
19483
19483
|
var SummaryItem = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
@@ -19488,25 +19488,25 @@ var ReviewsHeader = function (_a) {
|
|
|
19488
19488
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
19489
19489
|
var starsNumber = 5;
|
|
19490
19490
|
var theme = useTheme();
|
|
19491
|
-
return (jsxRuntime.jsxs(Container$
|
|
19491
|
+
return (jsxRuntime.jsxs(Container$D, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19492
19492
|
};
|
|
19493
|
-
var templateObject_1$
|
|
19493
|
+
var templateObject_1$T, templateObject_2$G, templateObject_3$D, templateObject_4$v, templateObject_5$p, templateObject_6$l, templateObject_7$j;
|
|
19494
19494
|
|
|
19495
|
-
var Container$
|
|
19496
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
19495
|
+
var Container$C = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19496
|
+
var Text$1 = newStyled.p(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
19497
19497
|
var ScrollToTop = function (_a) {
|
|
19498
19498
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19499
19499
|
var theme = useTheme();
|
|
19500
19500
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19501
|
-
return (jsxRuntime.jsxs(Container$
|
|
19501
|
+
return (jsxRuntime.jsxs(Container$C, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19502
19502
|
};
|
|
19503
|
-
var templateObject_1$
|
|
19503
|
+
var templateObject_1$S, templateObject_2$F;
|
|
19504
19504
|
|
|
19505
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19505
|
+
var Button$5 = newStyled.button(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"])), mediaQueries({
|
|
19506
19506
|
right: ['1rem', '7.75rem'],
|
|
19507
19507
|
top: ['0.75rem', '0.75rem'],
|
|
19508
19508
|
}));
|
|
19509
|
-
var templateObject_1$
|
|
19509
|
+
var templateObject_1$R;
|
|
19510
19510
|
|
|
19511
19511
|
var ClearButton = function (_a) {
|
|
19512
19512
|
var onClick = _a.onClick;
|
|
@@ -19514,7 +19514,7 @@ var ClearButton = function (_a) {
|
|
|
19514
19514
|
return (jsxRuntime.jsx(Button$5, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19515
19515
|
};
|
|
19516
19516
|
|
|
19517
|
-
var Container$
|
|
19517
|
+
var Container$B = newStyled.div({
|
|
19518
19518
|
display: 'flex',
|
|
19519
19519
|
justifyContent: 'center',
|
|
19520
19520
|
padding: '1rem',
|
|
@@ -19522,10 +19522,10 @@ var Container$A = newStyled.div({
|
|
|
19522
19522
|
|
|
19523
19523
|
var Footer = function (_a) {
|
|
19524
19524
|
var text = _a.text, onClick = _a.onClick;
|
|
19525
|
-
return (jsxRuntime.jsx(Container$
|
|
19525
|
+
return (jsxRuntime.jsx(Container$B, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19526
19526
|
};
|
|
19527
19527
|
|
|
19528
|
-
var Container$
|
|
19528
|
+
var Container$A = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", "\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", "\n"])), mediaQueries({
|
|
19529
19529
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19530
19530
|
}));
|
|
19531
19531
|
var Description = newStyled.div({
|
|
@@ -19539,20 +19539,20 @@ var Description = newStyled.div({
|
|
|
19539
19539
|
textAlign: 'start',
|
|
19540
19540
|
},
|
|
19541
19541
|
});
|
|
19542
|
-
var templateObject_1$
|
|
19542
|
+
var templateObject_1$Q;
|
|
19543
19543
|
|
|
19544
19544
|
var ProductItem = function (_a) {
|
|
19545
19545
|
var _b;
|
|
19546
19546
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19547
19547
|
var theme = useTheme();
|
|
19548
|
-
return (jsxRuntime.jsxs(Container$
|
|
19548
|
+
return (jsxRuntime.jsxs(Container$A, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: title, width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$7, { variant: "body", weight: "regular", size: "regular", testId: "search-product-title", dangerouslySetInnerHTML: { __html: title } }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: (_b = theme.colors.pallete.brickRed) === null || _b === void 0 ? void 0 : _b.color, size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19549
19549
|
};
|
|
19550
19550
|
|
|
19551
19551
|
var OptionsList = newStyled.ul({
|
|
19552
19552
|
margin: '0px',
|
|
19553
19553
|
padding: '0px',
|
|
19554
19554
|
});
|
|
19555
|
-
var OptionItem = newStyled.li(templateObject_1$
|
|
19555
|
+
var OptionItem = newStyled.li(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", "\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", "\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
19556
19556
|
padding: [0, '0rem 1rem'],
|
|
19557
19557
|
borderRadius: [0, '0.5rem'],
|
|
19558
19558
|
}));
|
|
@@ -19564,20 +19564,20 @@ var Anchor = newStyled.a({
|
|
|
19564
19564
|
padding: 0,
|
|
19565
19565
|
textDecoration: 'none',
|
|
19566
19566
|
});
|
|
19567
|
-
var Container$
|
|
19567
|
+
var Container$z = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", "\n"])), mediaQueries({
|
|
19568
19568
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19569
19569
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19570
19570
|
borderRadius: ['0', '0.5rem'],
|
|
19571
19571
|
}));
|
|
19572
|
-
var Header$2 = newStyled.div(templateObject_3$
|
|
19572
|
+
var Header$2 = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mediaQueries({
|
|
19573
19573
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19574
19574
|
}));
|
|
19575
|
-
var templateObject_1$
|
|
19575
|
+
var templateObject_1$P, templateObject_2$E, templateObject_3$C;
|
|
19576
19576
|
|
|
19577
19577
|
var ResultsPanel = function (_a) {
|
|
19578
19578
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19579
19579
|
var theme = useTheme();
|
|
19580
|
-
return (jsxRuntime.jsxs(Container$
|
|
19580
|
+
return (jsxRuntime.jsxs(Container$z, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(OptionsList, { children: options.map(function (_a) {
|
|
19581
19581
|
var optionUrl = _a.optionUrl, price = _a.price, src = _a.src, title = _a.title;
|
|
19582
19582
|
return (jsxRuntime.jsx(OptionItem, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: src, title: title, price: price }, void 0) }), void 0) }), title));
|
|
19583
19583
|
}) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
@@ -19591,8 +19591,8 @@ var SearchIconContainer = newStyled.div({
|
|
|
19591
19591
|
background: 'white',
|
|
19592
19592
|
alignSelf: 'center',
|
|
19593
19593
|
});
|
|
19594
|
-
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19595
|
-
var templateObject_1$
|
|
19594
|
+
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19595
|
+
var templateObject_1$O;
|
|
19596
19596
|
|
|
19597
19597
|
var SearchControl = function (_a) {
|
|
19598
19598
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
@@ -19638,7 +19638,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19638
19638
|
},
|
|
19639
19639
|
},
|
|
19640
19640
|
}); });
|
|
19641
|
-
var Container$
|
|
19641
|
+
var Container$y = newStyled.div({
|
|
19642
19642
|
position: 'relative',
|
|
19643
19643
|
display: 'flex',
|
|
19644
19644
|
});
|
|
@@ -19693,7 +19693,7 @@ var SearchBar = function (_a) {
|
|
|
19693
19693
|
if (e.cancelable) {
|
|
19694
19694
|
e.preventDefault();
|
|
19695
19695
|
}
|
|
19696
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
19696
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$y, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
19697
19697
|
if (e.key === 'Enter') {
|
|
19698
19698
|
if (e.cancelable) {
|
|
19699
19699
|
e.preventDefault();
|
|
@@ -19704,21 +19704,21 @@ var SearchBar = function (_a) {
|
|
|
19704
19704
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19705
19705
|
};
|
|
19706
19706
|
|
|
19707
|
-
var Container$
|
|
19708
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19709
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19710
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19707
|
+
var Container$x = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19708
|
+
var BackArrow = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19709
|
+
var BoldSpan = newStyled.span(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19710
|
+
var NormalSpan = newStyled.span(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19711
19711
|
var SearchNavigationParents = newStyled.div(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19712
|
-
var templateObject_1$
|
|
19712
|
+
var templateObject_1$N, templateObject_2$D, templateObject_3$B, templateObject_4$u, templateObject_5$o;
|
|
19713
19713
|
|
|
19714
19714
|
var SearchNavigation = function (_a) {
|
|
19715
19715
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19716
|
-
return (jsxRuntime.jsxs(Container$
|
|
19716
|
+
return (jsxRuntime.jsxs(Container$x, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction, testId: "breadcrumb-search-returnText" }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19717
19717
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, __assign$1({ "data-testid": "breadcrumb-search-step-".concat(index) }, { children: step }), step)) : (jsxRuntime.jsx(NormalSpan, __assign$1({ "data-testid": "breadcrumb-search-step-".concat(index) }, { children: "".concat(step, " / ") }), step));
|
|
19718
19718
|
}) }, void 0)] }, void 0));
|
|
19719
19719
|
};
|
|
19720
19720
|
|
|
19721
|
-
var Container$
|
|
19721
|
+
var Container$w = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19722
19722
|
var alignCenter = _a.alignCenter;
|
|
19723
19723
|
return alignCenter &&
|
|
19724
19724
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19728,26 +19728,26 @@ var Container$v = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
19728
19728
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19729
19729
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19730
19730
|
});
|
|
19731
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19732
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19731
|
+
var TitleText = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19732
|
+
var BannerText = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19733
19733
|
var ShortBanner = function (_a) {
|
|
19734
19734
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19735
19735
|
var theme = useTheme();
|
|
19736
|
-
return (jsxRuntime.jsxs(Container$
|
|
19736
|
+
return (jsxRuntime.jsxs(Container$w, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19737
19737
|
};
|
|
19738
|
-
var templateObject_1$
|
|
19738
|
+
var templateObject_1$M, templateObject_2$C, templateObject_3$A;
|
|
19739
19739
|
|
|
19740
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19741
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19742
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19743
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19740
|
+
var TableElement$3 = newStyled.table(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19741
|
+
var TableCell$3 = newStyled.td(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19742
|
+
var TableHead$3 = newStyled.th(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19743
|
+
var Label$2 = newStyled('div')(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19744
19744
|
var TopLabel$1 = newStyled(Label$2)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19745
19745
|
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19746
|
-
var Container$
|
|
19746
|
+
var Container$v = newStyled('div')(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19747
19747
|
var LabelText$1 = newStyled('span')(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19748
19748
|
var Column$2 = newStyled('div')(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19749
19749
|
var TableRow$3 = newStyled.tr(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19750
|
-
var templateObject_1$
|
|
19750
|
+
var templateObject_1$L, templateObject_2$B, templateObject_3$z, templateObject_4$t, templateObject_5$n, templateObject_6$k, templateObject_7$i, templateObject_8$e, templateObject_9$9, templateObject_10$8;
|
|
19751
19751
|
|
|
19752
19752
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19753
19753
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19783,21 +19783,21 @@ var SizeChartTable = function (_a) {
|
|
|
19783
19783
|
var theme = useTheme();
|
|
19784
19784
|
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
19785
19785
|
var isMultilabel = xLabel && yLabel;
|
|
19786
|
-
return (jsxRuntime.jsxs(Container$
|
|
19786
|
+
return (jsxRuntime.jsxs(Container$v, { children: [isMultilabel && (jsxRuntime.jsxs(LeftLabel$1, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText$1, { children: xLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(Column$2, { children: [isMultilabel && (jsxRuntime.jsxs(TopLabel$1, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText$1, { children: yLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(TableElement$3, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsxRuntime.jsx(TableRow$3, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ style: {
|
|
19787
19787
|
backgroundColor: getCellColor$2(index, cell),
|
|
19788
19788
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(TableRow$3, __assign$1({ className: getIsOdd$2(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19789
19789
|
};
|
|
19790
19790
|
|
|
19791
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19792
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19793
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19794
|
-
var TableRow$2 = newStyled.tr(templateObject_4$
|
|
19791
|
+
var TableElement$2 = newStyled.table(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19792
|
+
var TableCell$2 = newStyled.td(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19793
|
+
var TableHead$2 = newStyled.th(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19794
|
+
var TableRow$2 = newStyled.tr(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19795
19795
|
var SizeTable = function (_a) {
|
|
19796
19796
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19797
19797
|
var theme = useTheme();
|
|
19798
19798
|
return (jsxRuntime.jsxs(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$2, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19799
19799
|
};
|
|
19800
|
-
var templateObject_1$
|
|
19800
|
+
var templateObject_1$K, templateObject_2$A, templateObject_3$y, templateObject_4$s;
|
|
19801
19801
|
|
|
19802
19802
|
var getStylesBySize$7 = function (size) {
|
|
19803
19803
|
switch (size) {
|
|
@@ -19824,7 +19824,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19824
19824
|
} });
|
|
19825
19825
|
};
|
|
19826
19826
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19827
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19827
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19828
19828
|
};
|
|
19829
19829
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19830
19830
|
if (disabled)
|
|
@@ -19840,23 +19840,23 @@ var TextButton = function (_a) {
|
|
|
19840
19840
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19841
19841
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase, testId: testId }, { children: text }), void 0));
|
|
19842
19842
|
};
|
|
19843
|
-
var templateObject_1$
|
|
19843
|
+
var templateObject_1$J;
|
|
19844
19844
|
|
|
19845
|
-
var Container$
|
|
19846
|
-
var P = newStyled.p(templateObject_2$
|
|
19847
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19845
|
+
var Container$u = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19846
|
+
var P = newStyled.p(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n margin: 0 0 0 10px;\n"], ["\n margin: 0 0 0 10px;\n"])));
|
|
19847
|
+
var PercentageSpan = newStyled.span(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19848
19848
|
var SizeFitGuide = function (_a) {
|
|
19849
19849
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19850
|
-
return (jsxRuntime.jsxs(Container$
|
|
19850
|
+
return (jsxRuntime.jsxs(Container$u, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19851
19851
|
};
|
|
19852
|
-
var templateObject_1$
|
|
19852
|
+
var templateObject_1$I, templateObject_2$z, templateObject_3$x;
|
|
19853
19853
|
|
|
19854
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19854
|
+
var ButtonsContainer = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19855
19855
|
var inline = _a.inline;
|
|
19856
19856
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19857
19857
|
});
|
|
19858
|
-
var Row = newStyled.div(templateObject_2$
|
|
19859
|
-
var templateObject_1$
|
|
19858
|
+
var Row = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19859
|
+
var templateObject_1$H, templateObject_2$y;
|
|
19860
19860
|
|
|
19861
19861
|
var SizeSelector = function (_a) {
|
|
19862
19862
|
var _b;
|
|
@@ -19878,7 +19878,7 @@ var SizeSelector = function (_a) {
|
|
|
19878
19878
|
}) }), void 0)] }), void 0));
|
|
19879
19879
|
};
|
|
19880
19880
|
|
|
19881
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19881
|
+
var TabContainer = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19882
19882
|
var titleSize = _a.titleSize;
|
|
19883
19883
|
return titleSize;
|
|
19884
19884
|
}, function (_a) {
|
|
@@ -19895,18 +19895,18 @@ var Tab = function (_a) {
|
|
|
19895
19895
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19896
19896
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19897
19897
|
};
|
|
19898
|
-
var templateObject_1$
|
|
19898
|
+
var templateObject_1$G;
|
|
19899
19899
|
|
|
19900
|
-
var Container$
|
|
19901
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19900
|
+
var Container$t = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19901
|
+
var TabList = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19902
19902
|
var backgroundColor = _a.backgroundColor;
|
|
19903
19903
|
return backgroundColor;
|
|
19904
19904
|
}, function (_a) {
|
|
19905
19905
|
var borderColor = _a.borderColor;
|
|
19906
19906
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19907
19907
|
});
|
|
19908
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19909
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19908
|
+
var TabContent = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19909
|
+
var TabSeparator = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19910
19910
|
var Tabs = function (_a) {
|
|
19911
19911
|
var _b;
|
|
19912
19912
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -19915,16 +19915,16 @@ var Tabs = function (_a) {
|
|
|
19915
19915
|
return null;
|
|
19916
19916
|
}
|
|
19917
19917
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19918
|
-
return (jsxRuntime.jsxs(Container$
|
|
19918
|
+
return (jsxRuntime.jsxs(Container$t, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19919
19919
|
};
|
|
19920
|
-
var templateObject_1$
|
|
19920
|
+
var templateObject_1$F, templateObject_2$x, templateObject_3$w, templateObject_4$r;
|
|
19921
19921
|
|
|
19922
|
-
var Container$
|
|
19922
|
+
var Container$s = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19923
19923
|
var Tag = function (_a) {
|
|
19924
19924
|
var text = _a.text, className = _a.className;
|
|
19925
|
-
return jsxRuntime.jsx(Container$
|
|
19925
|
+
return jsxRuntime.jsx(Container$s, __assign$1({ className: className }, { children: text }), void 0);
|
|
19926
19926
|
};
|
|
19927
|
-
var templateObject_1$
|
|
19927
|
+
var templateObject_1$E;
|
|
19928
19928
|
|
|
19929
19929
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19930
19930
|
switch (size) {
|
|
@@ -20037,9 +20037,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
20037
20037
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
20038
20038
|
};
|
|
20039
20039
|
|
|
20040
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
20041
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
20042
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
20040
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
20041
|
+
var VideoOverlay$1 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
20042
|
+
var FullscreenVideo = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
20043
20043
|
var ImageVideo = function (_a) {
|
|
20044
20044
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
20045
20045
|
var video = React$2.useRef(null);
|
|
@@ -20059,12 +20059,12 @@ var ImageVideo = function (_a) {
|
|
|
20059
20059
|
height: '100%',
|
|
20060
20060
|
} }, void 0)] }, void 0))] }, void 0));
|
|
20061
20061
|
};
|
|
20062
|
-
var templateObject_1$
|
|
20062
|
+
var templateObject_1$D, templateObject_2$w, templateObject_3$v;
|
|
20063
20063
|
|
|
20064
|
-
var ContainerDesktop = css(templateObject_1$
|
|
20065
|
-
var ContainerMobile = css(templateObject_2$
|
|
20066
|
-
var Container$
|
|
20067
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
20064
|
+
var ContainerDesktop = css(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
20065
|
+
var ContainerMobile = css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
20066
|
+
var Container$r = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
20067
|
+
var TextContainer = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
20068
20068
|
var TextWithImage = function (_a) {
|
|
20069
20069
|
var _b, _c, _d, _e;
|
|
20070
20070
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -20084,7 +20084,7 @@ var TextWithImage = function (_a) {
|
|
|
20084
20084
|
// @ts-ignore
|
|
20085
20085
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
20086
20086
|
};
|
|
20087
|
-
return (jsxs(Container$
|
|
20087
|
+
return (jsxs(Container$r, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile, onClick: buttonAction, testId: buttomText, css: {
|
|
20088
20088
|
backgroundColor: props.btnBGColor,
|
|
20089
20089
|
color: '#ffffff',
|
|
20090
20090
|
border: props.btnBGColor,
|
|
@@ -20094,18 +20094,18 @@ var TextWithImage = function (_a) {
|
|
|
20094
20094
|
},
|
|
20095
20095
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
20096
20096
|
};
|
|
20097
|
-
var templateObject_1$
|
|
20097
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$u, templateObject_4$q;
|
|
20098
20098
|
|
|
20099
20099
|
var slideInAnimation = function (distanceFromTop) {
|
|
20100
20100
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20101
|
-
return keyframes(templateObject_1$
|
|
20101
|
+
return keyframes(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20102
20102
|
};
|
|
20103
20103
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20104
20104
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20105
|
-
return keyframes(templateObject_2$
|
|
20105
|
+
return keyframes(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20106
20106
|
};
|
|
20107
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20108
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20107
|
+
var ToastContainer = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"])));
|
|
20108
|
+
var ToastContent = newStyled.div(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n position: fixed;\n top: ", ";\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"], ["\n position: fixed;\n top: ", ";\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"])), function (_a) {
|
|
20109
20109
|
var distanceFromTop = _a.distanceFromTop;
|
|
20110
20110
|
return distanceFromTop || '124px';
|
|
20111
20111
|
}, function (_a) {
|
|
@@ -20123,7 +20123,7 @@ var ToastText = newStyled.p(templateObject_5$m || (templateObject_5$m = __makeTe
|
|
|
20123
20123
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20124
20124
|
});
|
|
20125
20125
|
var CloseIcon = newStyled.div(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20126
|
-
var templateObject_1$
|
|
20126
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$t, templateObject_4$p, templateObject_5$m, templateObject_6$j;
|
|
20127
20127
|
|
|
20128
20128
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20129
20129
|
var _b;
|
|
@@ -20145,9 +20145,9 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
20145
20145
|
});
|
|
20146
20146
|
Toast.displayName = 'Toast';
|
|
20147
20147
|
|
|
20148
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20149
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20150
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20148
|
+
var Wrapper$1 = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
20149
|
+
var GrandTotal = newStyled.h1(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
20150
|
+
var Currency = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
20151
20151
|
var theme = _a.theme;
|
|
20152
20152
|
return theme.component.total.basicTotal.currency.color;
|
|
20153
20153
|
}, function (_a) {
|
|
@@ -20160,11 +20160,11 @@ var Currency = newStyled.span(templateObject_3$r || (templateObject_3$r = __make
|
|
|
20160
20160
|
var theme = _a.theme;
|
|
20161
20161
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20162
20162
|
});
|
|
20163
|
-
var Container$
|
|
20163
|
+
var Container$q = newStyled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
20164
20164
|
var highlightColor = _a.highlightColor;
|
|
20165
20165
|
return highlightColor;
|
|
20166
20166
|
});
|
|
20167
|
-
var TotalContainer = newStyled(Container$
|
|
20167
|
+
var TotalContainer = newStyled(Container$q)(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20168
20168
|
var showTotalLabel = _a.showTotalLabel;
|
|
20169
20169
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20170
20170
|
});
|
|
@@ -20174,27 +20174,27 @@ var DiscountAmount = newStyled.h3(templateObject_7$h || (templateObject_7$h = __
|
|
|
20174
20174
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20175
20175
|
});
|
|
20176
20176
|
var TotalLabel = newStyled(Text$7)(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20177
|
-
var templateObject_1$
|
|
20177
|
+
var templateObject_1$A, templateObject_2$t, templateObject_3$s, templateObject_4$o, templateObject_5$l, templateObject_6$i, templateObject_7$h, templateObject_8$d;
|
|
20178
20178
|
|
|
20179
20179
|
var Total = function (_a) {
|
|
20180
20180
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
20181
20181
|
var theme = useTheme();
|
|
20182
|
-
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
20182
|
+
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$q, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20183
20183
|
};
|
|
20184
20184
|
|
|
20185
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20185
|
+
var Wrapper = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20186
20186
|
var color = _a.color;
|
|
20187
20187
|
return color;
|
|
20188
20188
|
});
|
|
20189
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20190
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20189
|
+
var ItemContainer = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
20190
|
+
var Item = newStyled.h4(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
20191
20191
|
var theme = _a.theme;
|
|
20192
20192
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20193
20193
|
}, function (_a) {
|
|
20194
20194
|
var theme = _a.theme;
|
|
20195
20195
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20196
20196
|
});
|
|
20197
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20197
|
+
var CouponItem = newStyled(Item)(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20198
20198
|
var color = _a.color;
|
|
20199
20199
|
return color;
|
|
20200
20200
|
});
|
|
@@ -20207,17 +20207,17 @@ var Subtotal = function (_a) {
|
|
|
20207
20207
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20208
20208
|
})] }), void 0));
|
|
20209
20209
|
};
|
|
20210
|
-
var templateObject_1$
|
|
20210
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$r, templateObject_4$n;
|
|
20211
20211
|
|
|
20212
20212
|
var Totals = {
|
|
20213
20213
|
Total: Total,
|
|
20214
20214
|
Subtotal: Subtotal,
|
|
20215
20215
|
};
|
|
20216
20216
|
|
|
20217
|
-
var Container$
|
|
20218
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20219
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20220
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20217
|
+
var Container$p = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20218
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20219
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20220
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20221
20221
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
20222
20222
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
20223
20223
|
return props.finishedTrack
|
|
@@ -20255,7 +20255,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20255
20255
|
}
|
|
20256
20256
|
return '30px';
|
|
20257
20257
|
};
|
|
20258
|
-
return (jsxRuntime.jsxs(Container$
|
|
20258
|
+
return (jsxRuntime.jsxs(Container$p, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20259
20259
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20260
20260
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsx(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
20261
20261
|
? activeCheckpointColor
|
|
@@ -20266,12 +20266,12 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20266
20266
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20267
20267
|
})] }), void 0));
|
|
20268
20268
|
};
|
|
20269
|
-
var templateObject_1$
|
|
20269
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$q, templateObject_4$m, templateObject_5$k, templateObject_6$h, templateObject_7$g, templateObject_8$c, templateObject_9$8, templateObject_10$7, templateObject_11$5;
|
|
20270
20270
|
|
|
20271
|
-
var Container$
|
|
20272
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20273
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20274
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20271
|
+
var Container$o = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20272
|
+
var CheckpointContainer = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20273
|
+
var CheckpointDate = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20274
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20275
20275
|
var CheckpointStatus = newStyled.p(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
20276
20276
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20277
20277
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
@@ -20297,7 +20297,7 @@ var TrackingProgress = function (_a) {
|
|
|
20297
20297
|
}
|
|
20298
20298
|
return '30px';
|
|
20299
20299
|
};
|
|
20300
|
-
return (jsxRuntime.jsxs(Container$
|
|
20300
|
+
return (jsxRuntime.jsxs(Container$o, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20301
20301
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20302
20302
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
20303
20303
|
? theme.colors.semantic.informative.color
|
|
@@ -20306,19 +20306,19 @@ var TrackingProgress = function (_a) {
|
|
|
20306
20306
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20307
20307
|
})] }), void 0));
|
|
20308
20308
|
};
|
|
20309
|
-
var templateObject_1$
|
|
20309
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$p, templateObject_4$l, templateObject_5$j, templateObject_6$g, templateObject_7$f, templateObject_8$b;
|
|
20310
20310
|
|
|
20311
|
-
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20311
|
+
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20312
20312
|
var checked = _a.checked;
|
|
20313
20313
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20314
20314
|
});
|
|
20315
|
-
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$
|
|
20316
|
-
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$
|
|
20317
|
-
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$
|
|
20315
|
+
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"])));
|
|
20316
|
+
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20317
|
+
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20318
20318
|
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20319
20319
|
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20320
20320
|
var CheckboxInput = newStyled.input(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20321
|
-
var templateObject_1$
|
|
20321
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$k, templateObject_5$i, templateObject_6$f, templateObject_7$e;
|
|
20322
20322
|
|
|
20323
20323
|
function AutoshipOfferCard(_a) {
|
|
20324
20324
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20342,18 +20342,18 @@ function AutoshipOfferCard(_a) {
|
|
|
20342
20342
|
return (jsxRuntime.jsxs(AutoShipCardContainerWrapper$1, __assign$1({ checked: check }, { children: [jsxRuntime.jsxs(AutoShipHeaderBarWrapper$1, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CheckboxInput, { type: "checkbox", onChange: handleCheckBox, checked: check, "data-testid": "autoshipcheckbox" }, void 0) }, void 0), jsxRuntime.jsx("div", { children: renderCopy(copy) }, void 0)] }, void 0), !check && (jsxRuntime.jsxs(AutoShipBodyWrapper$1, { children: [jsxRuntime.jsxs(AutoShipBodyTitle$1, __assign$1({ onClick: handleShowMore }, { children: [jsxRuntime.jsx("span", { children: showMoreBenefits ? renderCopy(showMore.openedCopy) : renderCopy(showMore.closedCopy) }, void 0), jsxRuntime.jsx(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0), showMoreBenefits && (jsxRuntime.jsx(AutoShipBodyListWrapper$1, { children: copyList.map(function (item) { return (jsxRuntime.jsxs(AutoShipBodyListItem$1, { children: [jsxRuntime.jsx(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), renderCopy(item.copy)] }, item.icon)); }) }, void 0))] }, void 0))] }), void 0));
|
|
20343
20343
|
}
|
|
20344
20344
|
|
|
20345
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
20345
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20346
20346
|
var checked = _a.checked;
|
|
20347
20347
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20348
20348
|
});
|
|
20349
|
-
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$
|
|
20350
|
-
var AutoShipBodyWrapper = newStyled.div(templateObject_3$
|
|
20351
|
-
var AutoShipBodyTitle = newStyled.div(templateObject_4$
|
|
20349
|
+
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
20350
|
+
var AutoShipBodyWrapper = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20351
|
+
var AutoShipBodyTitle = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20352
20352
|
var AutoShipBodyListItem = newStyled.div(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20353
20353
|
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20354
20354
|
newStyled.input(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20355
20355
|
var ButtonRemoveWrapper = newStyled.div(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"], ["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"])));
|
|
20356
|
-
var templateObject_1$
|
|
20356
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$j, templateObject_5$h, templateObject_6$e, templateObject_7$d, templateObject_8$a;
|
|
20357
20357
|
|
|
20358
20358
|
function AutoshipOfferCardCta(_a) {
|
|
20359
20359
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, buttonCopy = _a.buttonCopy;
|
|
@@ -20371,18 +20371,18 @@ function AutoshipOfferCardCta(_a) {
|
|
|
20371
20371
|
return (jsxRuntime.jsxs(AutoShipCardContainerWrapper, __assign$1({ checked: check }, { children: [jsxRuntime.jsxs(AutoShipHeaderBarWrapper, { children: [jsxRuntime.jsx("div", { children: copy }, void 0), check && (jsxRuntime.jsx(ButtonRemoveWrapper, __assign$1({ tabIndex: 0, role: "button", onKeyDown: handleCheckBox, onClick: handleCheckBox }, { children: "Remove" }), void 0))] }, void 0), !check && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(AutoShipBodyWrapper, { children: [(showMore === null || showMore === void 0 ? void 0 : showMore.openedCopy) && (showMore === null || showMore === void 0 ? void 0 : showMore.closedCopy) && (jsxRuntime.jsxs(AutoShipBodyTitle, __assign$1({ onClick: handleShowMore }, { children: [jsxRuntime.jsx("span", { children: showMoreBenefits ? showMore.openedCopy : showMore.closedCopy }, void 0), jsxRuntime.jsx(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0)), showMoreBenefits && (jsxRuntime.jsx(AutoShipBodyListWrapper, { children: copyList.map(function (item) { return (jsxRuntime.jsxs(AutoShipBodyListItem, { children: [jsxRuntime.jsx(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), item.copy] }, item.icon)); }) }, void 0))] }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(ButtonSecondary, { onClick: handleCheckBox, text: buttonCopy, wide: true }, void 0) }, void 0)] }, void 0))] }), void 0));
|
|
20372
20372
|
}
|
|
20373
20373
|
|
|
20374
|
-
var ContainerBase$3 = newStyled.div(templateObject_1$
|
|
20375
|
-
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_2$
|
|
20376
|
-
var SubscriptionHeader$3 = newStyled.div(templateObject_3$
|
|
20377
|
-
newStyled.div(templateObject_4$
|
|
20374
|
+
var ContainerBase$3 = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n border-radius: 8px;\n border-color: #e5e5e5;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n background-color: rgba(255, 243, 227, 0.3);\n"], ["\n border-radius: 8px;\n border-color: #e5e5e5;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n background-color: rgba(255, 243, 227, 0.3);\n"])));
|
|
20375
|
+
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n background-color: #fff3e34d;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n background-color: #fff3e34d;\n"])));
|
|
20376
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"], ["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"])));
|
|
20377
|
+
newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20378
20378
|
newStyled.div(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
20379
20379
|
newStyled(Text$7)(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20380
|
-
var Container$
|
|
20380
|
+
var Container$n = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20381
20381
|
var Benefits$1 = newStyled.div(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"])), function (_a) {
|
|
20382
20382
|
var height = _a.height;
|
|
20383
20383
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20384
20384
|
});
|
|
20385
|
-
var templateObject_1$
|
|
20385
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$m, templateObject_4$i, templateObject_5$g, templateObject_6$d, templateObject_7$c, templateObject_8$9;
|
|
20386
20386
|
|
|
20387
20387
|
var renderCopy = function (copy) {
|
|
20388
20388
|
if (typeof copy === 'string') {
|
|
@@ -20393,7 +20393,7 @@ var renderCopy = function (copy) {
|
|
|
20393
20393
|
var AutoshipPdpCard = function (_a) {
|
|
20394
20394
|
var _b, _c;
|
|
20395
20395
|
var handleWithoutSavings = _a.handleWithoutSavings, handleSavings = _a.handleSavings, title = _a.title, ctaText = _a.ctaText, ctaTextNoSavings = _a.ctaTextNoSavings, className = _a.className, benefits = _a.benefits, bottomCopy = _a.bottomCopy;
|
|
20396
|
-
return (jsxRuntime.jsxs(Container$
|
|
20396
|
+
return (jsxRuntime.jsxs(Container$n, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$3, __assign$1({ "data-testid": "subscription-container" }, { children: [jsxRuntime.jsxs(SubscriptionHeader$3, { children: [jsxRuntime.jsx(Text$7, { variant: "label", dangerouslySetInnerHTML: { __html: title !== null && title !== void 0 ? title : '' } }, void 0), jsxRuntime.jsx(ButtonPrimary, { wide: true, text: (_b = renderCopy(ctaText)) !== null && _b !== void 0 ? _b : 'Yes, I want this offer', size: exports.ComponentSize.Small, onClick: function () {
|
|
20397
20397
|
handleSavings();
|
|
20398
20398
|
} }, void 0)] }, void 0), jsxRuntime.jsxs(Benefits$1, __assign$1({ "data-testid": "benefits-component" }, { children: [jsxRuntime.jsx(OfferAtCartBenefits, { benefits: benefits }, void 0), bottomCopy && jsxRuntime.jsx(Text$7, { variant: "label", dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }), void 0)] }), void 0), jsxRuntime.jsx(ButtonSecondary, { wide: true, text: (_c = renderCopy(ctaTextNoSavings)) !== null && _c !== void 0 ? _c : 'Continue without more savings - ', size: exports.ComponentSize.Small, onClick: function () {
|
|
20399
20399
|
handleWithoutSavings();
|
|
@@ -20422,15 +20422,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
20422
20422
|
justifyContent: 'center',
|
|
20423
20423
|
gap: '10px',
|
|
20424
20424
|
});
|
|
20425
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
20425
|
+
var StyledContent = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
20426
20426
|
var bgColor = _a.bgColor;
|
|
20427
20427
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
20428
20428
|
}, function (_a) {
|
|
20429
20429
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
20430
20430
|
return width;
|
|
20431
20431
|
});
|
|
20432
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
20433
|
-
var templateObject_1$
|
|
20432
|
+
var StyledController = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
20433
|
+
var templateObject_1$t, templateObject_2$m;
|
|
20434
20434
|
|
|
20435
20435
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
20436
20436
|
var background = _a.background, width = _a.width;
|
|
@@ -20471,14 +20471,14 @@ var BasicAccordion = function (_a) {
|
|
|
20471
20471
|
} }), void 0));
|
|
20472
20472
|
};
|
|
20473
20473
|
|
|
20474
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
20475
|
-
var ImageWrapper = newStyled.div(templateObject_2$
|
|
20476
|
-
var ImageComponent = newStyled(Image$3)(templateObject_3$
|
|
20477
|
-
var RightComponentWrapper = newStyled.div(templateObject_4$
|
|
20474
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"], ["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"])));
|
|
20475
|
+
var ImageWrapper = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"])));
|
|
20476
|
+
var ImageComponent = newStyled(Image$3)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"])));
|
|
20477
|
+
var RightComponentWrapper = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"])));
|
|
20478
20478
|
var TitleWrapper$1 = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
20479
20479
|
var SubTitleWrapper = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"])));
|
|
20480
20480
|
var ButtonsWrapper = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20481
|
-
var templateObject_1$
|
|
20481
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$l, templateObject_4$h, templateObject_5$f, templateObject_6$c, templateObject_7$b;
|
|
20482
20482
|
|
|
20483
20483
|
function CartItemCard(_a) {
|
|
20484
20484
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20524,9 +20524,9 @@ var Shades200Color$1 = '#bbbbbb';
|
|
|
20524
20524
|
var Shades700Color$1 = '#292929';
|
|
20525
20525
|
var PrimaryColor$1 = '#f7a08b';
|
|
20526
20526
|
var ClubBorderColor$1 = '#882a2b';
|
|
20527
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
20528
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
20529
|
-
var ContainerBase$2 = newStyled.div(templateObject_3$
|
|
20527
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20528
|
+
var DiscountTag$2 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient$1);
|
|
20529
|
+
var ContainerBase$2 = newStyled.div(templateObject_3$k || (templateObject_3$k = __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) {
|
|
20530
20530
|
var selected = _a.selected;
|
|
20531
20531
|
return selected ? "1.5px solid ".concat(ClubBorderColor$1) : "1px solid ".concat(Shades200Color$1);
|
|
20532
20532
|
}, function (_a) {
|
|
@@ -20535,7 +20535,7 @@ var ContainerBase$2 = newStyled.div(templateObject_3$j || (templateObject_3$j =
|
|
|
20535
20535
|
? "& label {\n font-weight: 700;\n }"
|
|
20536
20536
|
: '';
|
|
20537
20537
|
}, PrimaryColor$1);
|
|
20538
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
20538
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
20539
20539
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20540
20540
|
return (isNoMember && selected ? Shades700Color$1 : '');
|
|
20541
20541
|
}, function (_a) {
|
|
@@ -20566,8 +20566,8 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_10$6 || (templateOb
|
|
|
20566
20566
|
? ClubBorderColor$1
|
|
20567
20567
|
: Shades200Color$1;
|
|
20568
20568
|
});
|
|
20569
|
-
var Container$
|
|
20570
|
-
var templateObject_1$
|
|
20569
|
+
var Container$m = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20570
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$k, templateObject_4$g, templateObject_5$e, templateObject_6$b, templateObject_7$a, templateObject_8$8, templateObject_9$7, templateObject_10$6, templateObject_11$4;
|
|
20571
20571
|
|
|
20572
20572
|
var ClubOfferSelector = function (_a) {
|
|
20573
20573
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20606,7 +20606,7 @@ var ClubOfferSelector = function (_a) {
|
|
|
20606
20606
|
onChange(__assign$1({}, dataObj));
|
|
20607
20607
|
};
|
|
20608
20608
|
var isSelected = radioIds$1.clubOfferSelector.id === radioCheck.id;
|
|
20609
|
-
return (jsxRuntime.jsxs(Container$
|
|
20609
|
+
return (jsxRuntime.jsxs(Container$m, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$2, __assign$1({ onClick: function () { return handleChange(radioIds$1.clubOfferSelector, 'radio'); }, "data-testid": "subscription-purchase-block", selected: isSelected }, { children: [jsxRuntime.jsx(DiscountTag$2, __assign$1({ isSelected: isSelected }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(clubOfferPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(clubOfferSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader$2, __assign$1({ isSelected: isSelected }, { children: [jsxRuntime.jsx(FlexContainer$2, { children: jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds$1.clubOfferSelector.id, id: radioIds$1.clubOfferSelector.id, value: radioIds$1.clubOfferSelector.id, checked: isSelected, size: exports.ComponentSize.Medium, style: {
|
|
20610
20610
|
marginRight: '10px',
|
|
20611
20611
|
}, labelStyle: {
|
|
20612
20612
|
color: ClubBorderColor$1,
|
|
@@ -20627,9 +20627,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20627
20627
|
var Shades700Color = '#292929';
|
|
20628
20628
|
var PrimaryColor = '#f7a08b';
|
|
20629
20629
|
var ClubBorderColor = '#882a2b';
|
|
20630
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
20631
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
20632
|
-
var ContainerBase$1 = newStyled.div(templateObject_3$
|
|
20630
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20631
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient);
|
|
20632
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __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) {
|
|
20633
20633
|
var selected = _a.selected;
|
|
20634
20634
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20635
20635
|
}, function (_a) {
|
|
@@ -20638,7 +20638,7 @@ var ContainerBase$1 = newStyled.div(templateObject_3$i || (templateObject_3$i =
|
|
|
20638
20638
|
? "& label {\n font-weight: 700;\n }"
|
|
20639
20639
|
: '';
|
|
20640
20640
|
}, PrimaryColor);
|
|
20641
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
20641
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
20642
20642
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20643
20643
|
return (isNoMember && selected ? Shades700Color : '');
|
|
20644
20644
|
}, function (_a) {
|
|
@@ -20669,9 +20669,9 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$5 || (templateOb
|
|
|
20669
20669
|
? ClubBorderColor
|
|
20670
20670
|
: Shades200Color;
|
|
20671
20671
|
});
|
|
20672
|
-
var Container$
|
|
20672
|
+
var Container$l = newStyled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20673
20673
|
var TermsText = newStyled(Text$7)(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20674
|
-
var templateObject_1$
|
|
20674
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$j, templateObject_4$f, templateObject_5$d, templateObject_6$a, templateObject_7$9, templateObject_8$7, templateObject_9$6, templateObject_10$5, templateObject_11$3, templateObject_12$2;
|
|
20675
20675
|
|
|
20676
20676
|
var ClubOfferSelector2 = function (_a) {
|
|
20677
20677
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs, termsTextLink = _a.termsTextLink;
|
|
@@ -20710,32 +20710,32 @@ var ClubOfferSelector2 = function (_a) {
|
|
|
20710
20710
|
onChange(__assign$1({}, dataObj));
|
|
20711
20711
|
};
|
|
20712
20712
|
var isSelected = radioIds.clubOfferSelector2.id === radioCheck.id;
|
|
20713
|
-
return (jsxRuntime.jsxs(Container$
|
|
20713
|
+
return (jsxRuntime.jsxs(Container$l, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$1, __assign$1({ onClick: function () { return handleChange(radioIds.clubOfferSelector2, 'radio'); }, "data-testid": "subscription-purchase-block", selected: isSelected }, { children: [jsxRuntime.jsx(DiscountTag$1, __assign$1({ isSelected: isSelected }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(clubOfferPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(clubOfferSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader$1, __assign$1({ isSelected: isSelected }, { children: [jsxRuntime.jsx(FlexContainer$1, { children: jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.clubOfferSelector2.id, id: radioIds.clubOfferSelector2.id, value: radioIds.clubOfferSelector2.id, checked: isSelected, size: exports.ComponentSize.Medium, style: {
|
|
20714
20714
|
marginRight: '10px',
|
|
20715
20715
|
}, labelStyle: {
|
|
20716
20716
|
color: ClubBorderColor,
|
|
20717
20717
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector2.id) }, void 0) }, void 0), jsxRuntime.jsx(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsxRuntime.jsx(BenefitsContainer$1, { children: jsxRuntime.jsx(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: updatedClubOfferBenefits[0] } }, void 0) }, void 0))] }), void 0), isSelected && (jsxRuntime.jsxs(TermsText, __assign$1({ variant: "body" }, { children: [updatedClubOfferBenefits[1], jsxRuntime.jsxs("span", { children: ["Terms ", jsxRuntime.jsx("a", __assign$1({ href: termsTextLink }, { children: "here" }), void 0), "."] }, void 0)] }), void 0)), jsxRuntime.jsxs(SinglePurchaseContainer$1, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$1, { isNoMember: true, testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20718
20718
|
};
|
|
20719
20719
|
|
|
20720
|
-
var ContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20720
|
+
var ContainerWrapper$1 = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
20721
20721
|
var $checked = _a.$checked;
|
|
20722
20722
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20723
20723
|
}, function (_a) {
|
|
20724
20724
|
var $checked = _a.$checked;
|
|
20725
20725
|
return ($checked ? '#FFE1B8' : '#E5E5E5');
|
|
20726
20726
|
});
|
|
20727
|
-
var CardHeaderWrapper = newStyled.div(templateObject_2$
|
|
20728
|
-
var CardBody = newStyled.div(templateObject_3$
|
|
20729
|
-
var ClubCopyWrapper = newStyled.div(templateObject_4$
|
|
20727
|
+
var CardHeaderWrapper = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
20728
|
+
var CardBody = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20729
|
+
var ClubCopyWrapper = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20730
20730
|
var ClubCopyTextWrapper = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20731
|
-
var templateObject_1$
|
|
20731
|
+
var templateObject_1$p, templateObject_2$i, templateObject_3$i, templateObject_4$e, templateObject_5$c;
|
|
20732
20732
|
|
|
20733
20733
|
function Card(_a) {
|
|
20734
20734
|
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _c = _a.termsText, termsText = _c === void 0 ? 'Terms here.' : _c;
|
|
20735
20735
|
return (jsxRuntime.jsxs(ContainerWrapper$1, __assign$1({ "$checked": isChecked, style: style }, { children: [jsxRuntime.jsxs(CardHeaderWrapper, { children: [jsxRuntime.jsxs(ClubCopyWrapper, { children: [icon, jsxRuntime.jsx(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsxRuntime.jsx("div", { children: children }, void 0)] }, void 0), !isChecked && (jsxRuntime.jsxs(CardBody, __assign$1({ id: "joinClubCardBody" }, { children: [bodyCopy, ' ', jsxRuntime.jsx("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: termsText }), void 0)] }), void 0))] }), void 0));
|
|
20736
20736
|
}
|
|
20737
20737
|
|
|
20738
|
-
var StyledButton = newStyled.button(templateObject_1$
|
|
20738
|
+
var StyledButton = newStyled.button(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n padding: 10px 20px;\n border-radius: 8px;\n background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n color: var(--neutrals-white-ffffff, #fff);\n text-align: center;\n font-family: 'Avenir Next';\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 18px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n ", ";\n"], ["\n padding: 10px 20px;\n border-radius: 8px;\n background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n color: var(--neutrals-white-ffffff, #fff);\n text-align: center;\n font-family: 'Avenir Next';\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 18px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n ", ";\n"])), function (_a) {
|
|
20739
20739
|
var customStyle = _a.customStyle;
|
|
20740
20740
|
return customStyle && __assign$1({}, customStyle);
|
|
20741
20741
|
});
|
|
@@ -20748,15 +20748,15 @@ var JoinClubCard = function (_a) {
|
|
|
20748
20748
|
};
|
|
20749
20749
|
return (jsxRuntime.jsx(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style, termsText: termsText }, { children: showButton ? (jsxRuntime.jsx(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsxRuntime.jsx(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked }, void 0)) }), void 0));
|
|
20750
20750
|
};
|
|
20751
|
-
var templateObject_1$
|
|
20751
|
+
var templateObject_1$o;
|
|
20752
20752
|
|
|
20753
|
-
var Container$
|
|
20754
|
-
var Body = newStyled.div(templateObject_2$
|
|
20753
|
+
var Container$k = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"])));
|
|
20754
|
+
var Body = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"], ["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"])), function (_a) {
|
|
20755
20755
|
var height = _a.height;
|
|
20756
20756
|
return height;
|
|
20757
20757
|
});
|
|
20758
|
-
var RightContent = newStyled.div(templateObject_3$
|
|
20759
|
-
var Benefits = newStyled.div(templateObject_4$
|
|
20758
|
+
var RightContent = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n width: 100%;\n"])));
|
|
20759
|
+
var Benefits = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"])), function (_a) {
|
|
20760
20760
|
var height = _a.height;
|
|
20761
20761
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20762
20762
|
}, function (_a) {
|
|
@@ -20764,7 +20764,7 @@ var Benefits = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeT
|
|
|
20764
20764
|
return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades['10'].color;
|
|
20765
20765
|
});
|
|
20766
20766
|
var Actions = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n"])));
|
|
20767
|
-
var templateObject_1$
|
|
20767
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$h, templateObject_4$d, templateObject_5$b;
|
|
20768
20768
|
|
|
20769
20769
|
var getTitleProps = function (_a) {
|
|
20770
20770
|
var titleContent = _a.content, bold = _a.bold;
|
|
@@ -20803,7 +20803,7 @@ var OfferAtCart = function (props) {
|
|
|
20803
20803
|
setSelectedSize(sizeOption);
|
|
20804
20804
|
} }, void 0)), jsxRuntime.jsx(ButtonSecondary, { wide: true, text: ctaText, size: exports.ComponentSize.Small, onClick: handleOnClick }, void 0)] }, void 0));
|
|
20805
20805
|
var ErrorMessage = (jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: theme.colors.semantic.urgent.color }, { children: "Please select a size first" }), void 0));
|
|
20806
|
-
return (jsxRuntime.jsxs(Container$
|
|
20806
|
+
return (jsxRuntime.jsxs(Container$k, __assign$1({ className: className }, { children: [jsxRuntime.jsx(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxRuntime.jsxs(Body, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [image && (jsxRuntime.jsx(OfferAtCartImage, { isMobile: isMobile, src: image.src, alt: image.alt, rating: rating }, void 0)), jsxRuntime.jsxs(RightContent, { children: [jsxRuntime.jsx(Benefits, __assign$1({ id: "benefits" }, { children: jsxRuntime.jsx(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0), !isMobile && ActionsSection, !isMobile && showErrorMessage && ErrorMessage] }, void 0)] }), void 0), isMobile && ActionsSection, isMobile && showErrorMessage && ErrorMessage, bottomCopy && jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }), void 0));
|
|
20807
20807
|
};
|
|
20808
20808
|
|
|
20809
20809
|
var renderBottomCopy = function (text) {
|
|
@@ -20818,15 +20818,15 @@ var VariantType;
|
|
|
20818
20818
|
VariantType["V1"] = "v1";
|
|
20819
20819
|
VariantType["V2"] = "v2";
|
|
20820
20820
|
})(VariantType || (VariantType = {}));
|
|
20821
|
-
var ContainerV2 = newStyled.div(templateObject_1$
|
|
20821
|
+
var ContainerV2 = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: ", ";\n"])), function (_a) {
|
|
20822
20822
|
var variant = _a.variant;
|
|
20823
20823
|
return (variant === VariantType.V2 ? '#F7F7F7' : 'white');
|
|
20824
20824
|
});
|
|
20825
|
-
var ActionsV2 = newStyled.div(templateObject_2$
|
|
20826
|
-
var SizeCardItem = newStyled.div(templateObject_3$
|
|
20827
|
-
var SizeCardWrapper = newStyled.div(templateObject_4$
|
|
20825
|
+
var ActionsV2 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"])));
|
|
20826
|
+
var SizeCardItem = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"], ["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"])));
|
|
20827
|
+
var SizeCardWrapper = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"], ["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"])));
|
|
20828
20828
|
var BottomCopyWrapper$1 = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"])));
|
|
20829
|
-
var templateObject_1$
|
|
20829
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$g, templateObject_4$c, templateObject_5$a;
|
|
20830
20830
|
|
|
20831
20831
|
var SizeOptions = function (_a) {
|
|
20832
20832
|
var onAddToCart = _a.onAddToCart, sizeOptions = _a.sizeOptions;
|
|
@@ -20846,6 +20846,18 @@ var OfferAtCartV2 = function (_a) {
|
|
|
20846
20846
|
return (jsxRuntime.jsxs(ContainerV2, __assign$1({ className: className, variant: bottomCopy ? VariantType.V2 : VariantType.V1 }, { children: [jsxRuntime.jsx(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxRuntime.jsxs(Body, { children: [src && alt && (jsxRuntime.jsx(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating, width: isMobile ? '90px' : '122px' }, void 0)), jsxRuntime.jsx(RightContent, { children: jsxRuntime.jsx(Benefits, { children: jsxRuntime.jsx(OfferAtCartBenefits, { benefits: benefits }, void 0) }, void 0) }, void 0)] }, void 0), jsxRuntime.jsx("div", { children: !isMobile && ActionsSection }, void 0), isMobile && ActionsSection, bottomCopy && jsxRuntime.jsx(BottomCopyWrapper$1, { children: renderBottomCopy(bottomCopy) }, void 0)] }), void 0));
|
|
20847
20847
|
};
|
|
20848
20848
|
|
|
20849
|
+
var Container$j = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n width: 100%;\n padding: ", ";\n gap: 14px;\n background-color: #f6f0e7;\n align-items: center;\n"], ["\n display: flex;\n width: 100%;\n padding: ", ";\n gap: 14px;\n background-color: #f6f0e7;\n align-items: center;\n"])), function (props) { return (props.isMobile ? '10px' : '20px'); });
|
|
20850
|
+
var QuatityLabel = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n background: #d4605b;\n border-radius: 50%;\n width: 33px;\n height: 33px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 33px;\n"], ["\n background: #d4605b;\n border-radius: 50%;\n width: 33px;\n height: 33px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 33px;\n"])));
|
|
20851
|
+
var TextSmallLineHeight = newStyled(Text$7)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n line-height: 17px;\n"], ["\n line-height: 17px;\n"])));
|
|
20852
|
+
var ButtonSecondaryNoWrap = newStyled(ButtonSecondary)(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n padding: ", ";\n white-space: nowrap;\n"], ["\n padding: ", ";\n white-space: nowrap;\n"])), function (props) { return (props.size === exports.ComponentSize.XSmall ? '8px' : '16px 32px'); });
|
|
20853
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$f, templateObject_4$b;
|
|
20854
|
+
|
|
20855
|
+
var OfferAtCartV3 = function (_a) {
|
|
20856
|
+
var className = _a.className, _b = _a.quantity, quantity = _b === void 0 ? '2X' : _b, titleContent = _a.title.content, onAddToCart = _a.onAddToCart, ctaText = _a.ctaText;
|
|
20857
|
+
var isMobile = useDeviceType() === 'mobile';
|
|
20858
|
+
return (jsxRuntime.jsxs(Container$j, __assign$1({ isMobile: isMobile, className: className }, { children: [jsxRuntime.jsx(QuatityLabel, { children: quantity }, void 0), jsxRuntime.jsx(TextSmallLineHeight, __assign$1({ variant: "body", weight: "bold", size: isMobile ? 'small' : 'regular' }, { children: titleContent }), void 0), jsxRuntime.jsx(ButtonSecondaryNoWrap, { onClick: onAddToCart, size: isMobile ? exports.ComponentSize.XSmall : exports.ComponentSize.Large, text: ctaText }, void 0)] }), void 0));
|
|
20859
|
+
};
|
|
20860
|
+
|
|
20849
20861
|
var ImageContainer$1 = newStyled.div(function (_a) {
|
|
20850
20862
|
var width = _a.width, height = _a.height;
|
|
20851
20863
|
return ({
|
|
@@ -22559,6 +22571,7 @@ exports.MultiColorPicker = MultiColorPicker;
|
|
|
22559
22571
|
exports.Note = Note;
|
|
22560
22572
|
exports.OfferAtCart = OfferAtCart;
|
|
22561
22573
|
exports.OfferAtCartV2 = OfferAtCartV2;
|
|
22574
|
+
exports.OfferAtCartV3 = OfferAtCartV3;
|
|
22562
22575
|
exports.OfferBanner = OfferBanner;
|
|
22563
22576
|
exports.OrderBar = OrderBar;
|
|
22564
22577
|
exports.Overlay = Overlay;
|