@trafilea/afrodita-components 6.45.5 → 6.46.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 +15 -1
- package/build/index.esm.js +691 -669
- package/build/index.esm.js.map +1 -1
- package/build/index.js +691 -668
- 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$1r = newStyled.div(templateObject_1$2r || (templateObject_1$2r = __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$1q = newStyled.div(templateObject_1$2q || (templateObject_1$2q = _
|
|
|
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$1K || (templateObject_2$1K = __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$1J || (templateObject_2$1J = __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$1r, __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$2r, templateObject_2$1K;
|
|
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$1q = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __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$1p = newStyled.div(templateObject_1$2p || (templateObject_1$2p = _
|
|
|
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$1J || (templateObject_2$1J = __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$1I || (templateObject_2$1I = __makeTemp
|
|
|
3322
3322
|
var DiscountTag$3 = 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$1q, __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$2q, templateObject_2$1J;
|
|
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 = newStyled.p(templateObject_2$
|
|
3436
|
+
var Container$1p = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3437
|
+
var Price = newStyled.p(templateObject_2$1I || (templateObject_2$1I = __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 = newStyled.p(templateObject_2$1H || (templateObject_2$1H = __makeTemp
|
|
|
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$1k || (templateObject_3$1k = __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, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3491
3491
|
};
|
|
3492
|
-
return (jsxRuntime.jsxs(Container$
|
|
3492
|
+
return (jsxRuntime.jsxs(Container$1p, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (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, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3493
3493
|
};
|
|
3494
|
-
var templateObject_1$
|
|
3494
|
+
var templateObject_1$2p, templateObject_2$1I, templateObject_3$1k;
|
|
3495
3495
|
|
|
3496
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3496
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2o || (templateObject_1$2o = __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, __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$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3549
|
-
return (jsxRuntime.jsxs(Container$
|
|
3549
|
+
return (jsxRuntime.jsxs(Container$1p, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __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, __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$2o;
|
|
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$2n || (templateObject_1$2n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3568
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1H || (templateObject_2$1H = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3569
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1j || (templateObject_3$1j = __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$1(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __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$1p, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$1p, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3625
3625
|
marginTop: '-5px',
|
|
3626
3626
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3627
3627
|
marginTop: '-6px',
|
|
@@ -3637,9 +3637,9 @@ 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$2n, templateObject_2$1H, templateObject_3$1j;
|
|
3641
3641
|
|
|
3642
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3642
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2m || (templateObject_1$2m = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3643
3643
|
var PriceLabel = function (_a) {
|
|
3644
3644
|
var _b;
|
|
3645
3645
|
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"]);
|
|
@@ -3667,15 +3667,15 @@ var PriceLabel = function (_a) {
|
|
|
3667
3667
|
};
|
|
3668
3668
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3669
3669
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3670
|
-
return (jsxRuntime.jsxs(Container$
|
|
3670
|
+
return (jsxRuntime.jsxs(Container$1p, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3671
3671
|
marginTop: '-5px',
|
|
3672
3672
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, "data-testid": "test-price-final-product-price'" }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3673
3673
|
marginTop: '-6px',
|
|
3674
3674
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3675
3675
|
};
|
|
3676
|
-
var templateObject_1$
|
|
3676
|
+
var templateObject_1$2m;
|
|
3677
3677
|
|
|
3678
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3678
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2l || (templateObject_1$2l = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3679
3679
|
var PriceLabelV2 = function (_a) {
|
|
3680
3680
|
var _b;
|
|
3681
3681
|
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"]);
|
|
@@ -3706,13 +3706,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
3706
3706
|
var finalPriceString = finalPriceArray[0]
|
|
3707
3707
|
? finalPriceArray[0]
|
|
3708
3708
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3709
|
-
return (jsxRuntime.jsxs(Container$
|
|
3709
|
+
return (jsxRuntime.jsxs(Container$1p, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3710
3710
|
};
|
|
3711
|
-
var templateObject_1$
|
|
3711
|
+
var templateObject_1$2l;
|
|
3712
3712
|
|
|
3713
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3714
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3715
|
-
var templateObject_1$
|
|
3713
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$2k || (templateObject_1$2k = __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"])));
|
|
3714
|
+
var ImgWrapper = newStyled.div(templateObject_2$1G || (templateObject_2$1G = __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"])));
|
|
3715
|
+
var templateObject_1$2k, templateObject_2$1G;
|
|
3716
3716
|
|
|
3717
3717
|
var ClubPriceMemberLabel = function (_a) {
|
|
3718
3718
|
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"]);
|
|
@@ -3721,13 +3721,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3721
3721
|
return (jsxRuntime.jsx("div", { children: isClub ? (jsxRuntime.jsxs(ContainerWrapper$2, __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));
|
|
3722
3722
|
};
|
|
3723
3723
|
|
|
3724
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3724
|
+
var HorizontalDivider = newStyled.div(templateObject_1$2j || (templateObject_1$2j = __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) {
|
|
3725
3725
|
var width = _a.width;
|
|
3726
3726
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3727
3727
|
});
|
|
3728
|
-
var templateObject_1$
|
|
3728
|
+
var templateObject_1$2j;
|
|
3729
3729
|
|
|
3730
|
-
var Container$
|
|
3730
|
+
var Container$1o = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __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) {
|
|
3731
3731
|
var height = _a.height;
|
|
3732
3732
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3733
3733
|
}, function (_a) {
|
|
@@ -3752,11 +3752,11 @@ var Container$1n = newStyled.div(templateObject_1$2h || (templateObject_1$2h = _
|
|
|
3752
3752
|
var SkeletonBox = function (_a) {
|
|
3753
3753
|
var width = _a.width, height = _a.height;
|
|
3754
3754
|
var theme = useTheme();
|
|
3755
|
-
return jsxRuntime.jsx(Container$
|
|
3755
|
+
return jsxRuntime.jsx(Container$1o, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3756
3756
|
};
|
|
3757
|
-
var templateObject_1$
|
|
3757
|
+
var templateObject_1$2i;
|
|
3758
3758
|
|
|
3759
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3759
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2h || (templateObject_1$2h = __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) {
|
|
3760
3760
|
var width = _a.width;
|
|
3761
3761
|
return width;
|
|
3762
3762
|
}, function (_a) {
|
|
@@ -3772,7 +3772,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2g || (templateObject_1$2g
|
|
|
3772
3772
|
var opacity = _a.opacity;
|
|
3773
3773
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3774
3774
|
});
|
|
3775
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3775
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1F || (templateObject_2$1F = __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) {
|
|
3776
3776
|
var width = _a.width;
|
|
3777
3777
|
return width;
|
|
3778
3778
|
}, function (_a) {
|
|
@@ -3785,7 +3785,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1E || (templateObject_2$
|
|
|
3785
3785
|
var opacity = _a.opacity;
|
|
3786
3786
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3787
3787
|
});
|
|
3788
|
-
var templateObject_1$
|
|
3788
|
+
var templateObject_1$2h, templateObject_2$1F;
|
|
3789
3789
|
|
|
3790
3790
|
/* eslint-disable no-undef */
|
|
3791
3791
|
var cache = new Map();
|
|
@@ -3961,7 +3961,7 @@ var buildImageUrl = function (_a) {
|
|
|
3961
3961
|
}
|
|
3962
3962
|
};
|
|
3963
3963
|
|
|
3964
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3964
|
+
var Img$1 = newStyled.img(templateObject_1$2g || (templateObject_1$2g = __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; });
|
|
3965
3965
|
var Image$3 = function (_a) {
|
|
3966
3966
|
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"]);
|
|
3967
3967
|
var config = useTheme().config;
|
|
@@ -3970,15 +3970,15 @@ var Image$3 = function (_a) {
|
|
|
3970
3970
|
: src;
|
|
3971
3971
|
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));
|
|
3972
3972
|
};
|
|
3973
|
-
var templateObject_1$
|
|
3973
|
+
var templateObject_1$2g;
|
|
3974
3974
|
|
|
3975
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3976
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3977
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3975
|
+
var LabelWrapper = newStyled.label(templateObject_1$2f || (templateObject_1$2f = __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"])));
|
|
3976
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1E || (templateObject_2$1E = __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"])));
|
|
3977
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1i || (templateObject_3$1i = __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) {
|
|
3978
3978
|
var $color = _a.$color;
|
|
3979
3979
|
return $color;
|
|
3980
3980
|
});
|
|
3981
|
-
var templateObject_1$
|
|
3981
|
+
var templateObject_1$2f, templateObject_2$1E, templateObject_3$1i;
|
|
3982
3982
|
|
|
3983
3983
|
var ToggleComponent = function (_a) {
|
|
3984
3984
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c;
|
|
@@ -4434,7 +4434,7 @@ var MyAccount = /*#__PURE__*/Object.freeze({
|
|
|
4434
4434
|
|
|
4435
4435
|
var AddressInformation = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/address_information" }), void 0)); };
|
|
4436
4436
|
|
|
4437
|
-
var Benefits$
|
|
4437
|
+
var Benefits$2 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/benefits" }), void 0); };
|
|
4438
4438
|
|
|
4439
4439
|
var ClubMembership = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/club_membership" }), void 0)); };
|
|
4440
4440
|
|
|
@@ -4493,7 +4493,7 @@ var UserV2 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, pro
|
|
|
4493
4493
|
var Navigation = /*#__PURE__*/Object.freeze({
|
|
4494
4494
|
__proto__: null,
|
|
4495
4495
|
AddressInformation: AddressInformation,
|
|
4496
|
-
Benefits: Benefits$
|
|
4496
|
+
Benefits: Benefits$2,
|
|
4497
4497
|
ClubMembership: ClubMembership,
|
|
4498
4498
|
Ellipsis: Ellipsis,
|
|
4499
4499
|
EllipsisHorizontal: EllipsisHorizontal,
|
|
@@ -4839,14 +4839,14 @@ function jsxs(type, props, key) {
|
|
|
4839
4839
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4840
4840
|
// `variants` styles that are consistent through all themes.
|
|
4841
4841
|
var TAGS = {
|
|
4842
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4843
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4844
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4845
|
-
display1: newStyled.h1(templateObject_4$
|
|
4846
|
-
display2: newStyled.h2(templateObject_5$
|
|
4847
|
-
display3: newStyled.h3(templateObject_6$
|
|
4848
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4849
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4842
|
+
hero1: newStyled.h1(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject([""], [""]))),
|
|
4843
|
+
hero2: newStyled.h2(templateObject_2$1D || (templateObject_2$1D = __makeTemplateObject([""], [""]))),
|
|
4844
|
+
hero3: newStyled.h3(templateObject_3$1h || (templateObject_3$1h = __makeTemplateObject([""], [""]))),
|
|
4845
|
+
display1: newStyled.h1(templateObject_4$11 || (templateObject_4$11 = __makeTemplateObject([""], [""]))),
|
|
4846
|
+
display2: newStyled.h2(templateObject_5$O || (templateObject_5$O = __makeTemplateObject([""], [""]))),
|
|
4847
|
+
display3: newStyled.h3(templateObject_6$G || (templateObject_6$G = __makeTemplateObject([""], [""]))),
|
|
4848
|
+
heading1: newStyled.h1(templateObject_7$x || (templateObject_7$x = __makeTemplateObject([""], [""]))),
|
|
4849
|
+
heading2: newStyled.h2(templateObject_8$q || (templateObject_8$q = __makeTemplateObject([""], [""]))),
|
|
4850
4850
|
heading3: newStyled.h3(templateObject_9$d || (templateObject_9$d = __makeTemplateObject([""], [""]))),
|
|
4851
4851
|
heading4: newStyled.h4(templateObject_10$c || (templateObject_10$c = __makeTemplateObject([""], [""]))),
|
|
4852
4852
|
heading5: newStyled.h5(templateObject_11$8 || (templateObject_11$8 = __makeTemplateObject([""], [""]))),
|
|
@@ -4979,17 +4979,17 @@ var DEFAULTS = {
|
|
|
4979
4979
|
size: 'regular',
|
|
4980
4980
|
},
|
|
4981
4981
|
};
|
|
4982
|
-
var templateObject_1$
|
|
4983
|
-
|
|
4984
|
-
var Container$
|
|
4985
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4986
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4987
|
-
var Label$7 = newStyled.div(templateObject_4
|
|
4988
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4989
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4982
|
+
var templateObject_1$2e, templateObject_2$1D, templateObject_3$1h, templateObject_4$11, templateObject_5$O, templateObject_6$G, templateObject_7$x, templateObject_8$q, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4983
|
+
|
|
4984
|
+
var Container$1n = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __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"])));
|
|
4985
|
+
var Card$4 = newStyled.div(templateObject_2$1C || (templateObject_2$1C = __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"])));
|
|
4986
|
+
var Tag$2 = newStyled.div(templateObject_3$1g || (templateObject_3$1g = __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"])));
|
|
4987
|
+
var Label$7 = newStyled.div(templateObject_4$10 || (templateObject_4$10 = __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"])));
|
|
4988
|
+
var Check$1 = newStyled.div(templateObject_5$N || (templateObject_5$N = __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"])));
|
|
4989
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$F || (templateObject_6$F = __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"])));
|
|
4990
4990
|
var PackSelectorV2 = function (_a) {
|
|
4991
4991
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4992
|
-
return (jsxRuntime.jsx(Container$
|
|
4992
|
+
return (jsxRuntime.jsx(Container$1n, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4993
4993
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4994
4994
|
}) }), void 0));
|
|
4995
4995
|
};
|
|
@@ -5011,27 +5011,27 @@ var PackCard$1 = function (_a) {
|
|
|
5011
5011
|
currency: currencyCode || 'USD',
|
|
5012
5012
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5013
5013
|
};
|
|
5014
|
-
var templateObject_1$
|
|
5014
|
+
var templateObject_1$2d, templateObject_2$1C, templateObject_3$1g, templateObject_4$10, templateObject_5$N, templateObject_6$F;
|
|
5015
5015
|
|
|
5016
|
-
var Container$
|
|
5017
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
5016
|
+
var Container$1m = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5017
|
+
var DropContainer = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5018
5018
|
var DropList = function (_a) {
|
|
5019
5019
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5020
|
-
return (jsxRuntime.jsx(Container$
|
|
5020
|
+
return (jsxRuntime.jsx(Container$1m, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5021
5021
|
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));
|
|
5022
5022
|
}) }, void 0));
|
|
5023
5023
|
};
|
|
5024
|
-
var templateObject_1$
|
|
5024
|
+
var templateObject_1$2c, templateObject_2$1B;
|
|
5025
5025
|
|
|
5026
5026
|
var DROPS_TOTAL = 5;
|
|
5027
|
-
var Container$
|
|
5028
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5029
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
5027
|
+
var Container$1l = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5028
|
+
var Title$b = newStyled.p(templateObject_2$1A || (templateObject_2$1A = __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"])));
|
|
5029
|
+
var Description$3 = newStyled.p(templateObject_3$1f || (templateObject_3$1f = __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"])));
|
|
5030
5030
|
var AbsorbencyLevel = function (_a) {
|
|
5031
5031
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5032
|
-
return (jsxRuntime.jsxs(Container$
|
|
5032
|
+
return (jsxRuntime.jsxs(Container$1l, { 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));
|
|
5033
5033
|
};
|
|
5034
|
-
var templateObject_1$
|
|
5034
|
+
var templateObject_1$2b, templateObject_2$1A, templateObject_3$1f;
|
|
5035
5035
|
|
|
5036
5036
|
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(`
|
|
5037
5037
|
`),"","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(`
|
|
@@ -5107,7 +5107,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5107
5107
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5108
5108
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5109
5109
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5110
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5110
|
+
var StyledContent$1 = newStyled.button(templateObject_1$2a || (templateObject_1$2a = __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"])));
|
|
5111
5111
|
var Accordion$1 = function (_a) {
|
|
5112
5112
|
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;
|
|
5113
5113
|
var theme = useTheme();
|
|
@@ -5131,9 +5131,9 @@ var Accordion$1 = function (_a) {
|
|
|
5131
5131
|
} }, { 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));
|
|
5132
5132
|
} }), void 0));
|
|
5133
5133
|
};
|
|
5134
|
-
var templateObject_1$
|
|
5134
|
+
var templateObject_1$2a;
|
|
5135
5135
|
|
|
5136
|
-
var Container$
|
|
5136
|
+
var Container$1k = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5137
5137
|
var AccordionOptions = function (_a) {
|
|
5138
5138
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5139
5139
|
var _b = React$2.useState({
|
|
@@ -5146,7 +5146,7 @@ var AccordionOptions = function (_a) {
|
|
|
5146
5146
|
}
|
|
5147
5147
|
return false;
|
|
5148
5148
|
};
|
|
5149
|
-
return (jsxRuntime.jsx(Container$
|
|
5149
|
+
return (jsxRuntime.jsx(Container$1k, { children: accordions.map(function (accordion, index) {
|
|
5150
5150
|
var forceOpenValue = getForceOpen(index);
|
|
5151
5151
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5152
5152
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5157,7 +5157,7 @@ var AccordionOptions = function (_a) {
|
|
|
5157
5157
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5158
5158
|
}) }, void 0));
|
|
5159
5159
|
};
|
|
5160
|
-
var templateObject_1$
|
|
5160
|
+
var templateObject_1$29;
|
|
5161
5161
|
|
|
5162
5162
|
/**
|
|
5163
5163
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5293,27 +5293,27 @@ var isValidDate = function (value) {
|
|
|
5293
5293
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5294
5294
|
};
|
|
5295
5295
|
|
|
5296
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5297
|
-
var FlexContainer$4 = newStyled.div(templateObject_2$
|
|
5298
|
-
var templateObject_1$
|
|
5296
|
+
var Bold = newStyled.span(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5297
|
+
var FlexContainer$4 = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __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"])));
|
|
5298
|
+
var templateObject_1$28, templateObject_2$1z;
|
|
5299
5299
|
|
|
5300
|
-
var Container$
|
|
5300
|
+
var Container$1j = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __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) {
|
|
5301
5301
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5302
5302
|
return width;
|
|
5303
5303
|
}, function (_a) {
|
|
5304
5304
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5305
5305
|
return height;
|
|
5306
5306
|
});
|
|
5307
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5308
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5309
|
-
var RightSide = newStyled.div(templateObject_4
|
|
5310
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5311
|
-
var templateObject_1$
|
|
5307
|
+
var FlexCentered = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __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"])));
|
|
5308
|
+
var LeftSide = newStyled.div(templateObject_3$1e || (templateObject_3$1e = __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"])));
|
|
5309
|
+
var RightSide = newStyled.div(templateObject_4$$ || (templateObject_4$$ = __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"])));
|
|
5310
|
+
var FlexStart = newStyled.div(templateObject_5$M || (templateObject_5$M = __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"])));
|
|
5311
|
+
var templateObject_1$27, templateObject_2$1y, templateObject_3$1e, templateObject_4$$, templateObject_5$M;
|
|
5312
5312
|
|
|
5313
5313
|
var CouponCard = function (_a) {
|
|
5314
5314
|
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;
|
|
5315
5315
|
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5316
|
-
return (jsxRuntime.jsxs(Container$
|
|
5316
|
+
return (jsxRuntime.jsxs(Container$1j, __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 () {
|
|
5317
5317
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5318
5318
|
setShowCoupon(function (prev) { return !prev; });
|
|
5319
5319
|
} }, 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: {
|
|
@@ -5461,14 +5461,14 @@ var sizeOptions = [
|
|
|
5461
5461
|
},
|
|
5462
5462
|
];
|
|
5463
5463
|
|
|
5464
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5465
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5464
|
+
var ErrorText = newStyled.h3(templateObject_1$26 || (templateObject_1$26 = __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; });
|
|
5465
|
+
var ErrorContainer = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __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"])));
|
|
5466
5466
|
var Error$1 = function (_a) {
|
|
5467
5467
|
var error = _a.error;
|
|
5468
5468
|
var theme = useTheme();
|
|
5469
5469
|
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));
|
|
5470
5470
|
};
|
|
5471
|
-
var templateObject_1$
|
|
5471
|
+
var templateObject_1$26, templateObject_2$1x;
|
|
5472
5472
|
|
|
5473
5473
|
var BaseSelectButton = function (_a) {
|
|
5474
5474
|
var children = _a.children, as = _a.as;
|
|
@@ -5485,7 +5485,7 @@ function BaseSelectOption(_a) {
|
|
|
5485
5485
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5486
5486
|
}
|
|
5487
5487
|
|
|
5488
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5488
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5489
5489
|
function BaseSelect(_a) {
|
|
5490
5490
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5491
5491
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5495,7 +5495,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5495
5495
|
Options: BaseSelectOptions,
|
|
5496
5496
|
Option: BaseSelectOption,
|
|
5497
5497
|
});
|
|
5498
|
-
var templateObject_1$
|
|
5498
|
+
var templateObject_1$25;
|
|
5499
5499
|
|
|
5500
5500
|
var CustomButton = newStyled.button(function (_a) {
|
|
5501
5501
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5534,7 +5534,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5534
5534
|
});
|
|
5535
5535
|
});
|
|
5536
5536
|
// TODO Remove this when we find the real solution
|
|
5537
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5537
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5538
5538
|
var open = _a.open;
|
|
5539
5539
|
return open &&
|
|
5540
5540
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5554,7 +5554,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5554
5554
|
} }), void 0));
|
|
5555
5555
|
};
|
|
5556
5556
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5557
|
-
var templateObject_1$
|
|
5557
|
+
var templateObject_1$24;
|
|
5558
5558
|
|
|
5559
5559
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5560
5560
|
var theme = _a.theme;
|
|
@@ -5721,7 +5721,7 @@ var CustomCheckboxStyles = {
|
|
|
5721
5721
|
},
|
|
5722
5722
|
};
|
|
5723
5723
|
|
|
5724
|
-
var Container$
|
|
5724
|
+
var Container$1i = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __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"])));
|
|
5725
5725
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5726
5726
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5727
5727
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5732,7 +5732,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5732
5732
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5733
5733
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5734
5734
|
]; });
|
|
5735
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5735
|
+
var Input$5 = newStyled.input(templateObject_2$1w || (templateObject_2$1w = __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) {
|
|
5736
5736
|
var disabled = _a.disabled;
|
|
5737
5737
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5738
5738
|
});
|
|
@@ -5746,9 +5746,9 @@ var Checkbox = function (_a) {
|
|
|
5746
5746
|
}
|
|
5747
5747
|
onChange(e.target.checked);
|
|
5748
5748
|
};
|
|
5749
|
-
return (jsxRuntime.jsxs(Container$
|
|
5749
|
+
return (jsxRuntime.jsxs(Container$1i, { 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));
|
|
5750
5750
|
};
|
|
5751
|
-
var templateObject_1$
|
|
5751
|
+
var templateObject_1$23, templateObject_2$1w;
|
|
5752
5752
|
|
|
5753
5753
|
var CustomOption = newStyled.li(function (_a) {
|
|
5754
5754
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5797,9 +5797,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5797
5797
|
Option: BaseDropdownOption,
|
|
5798
5798
|
});
|
|
5799
5799
|
|
|
5800
|
-
var Container$
|
|
5801
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5802
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5800
|
+
var Container$1h = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject([""], [""])));
|
|
5801
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1v || (templateObject_2$1v = __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"])));
|
|
5802
|
+
var SelectedOption = newStyled.span(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5803
5803
|
var fontWeight = _a.fontWeight;
|
|
5804
5804
|
return fontWeight || '';
|
|
5805
5805
|
});
|
|
@@ -5832,10 +5832,10 @@ function SimpleDropdown(_a) {
|
|
|
5832
5832
|
}
|
|
5833
5833
|
setSelectedValue(value);
|
|
5834
5834
|
}, [value, options, initialValue]);
|
|
5835
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5835
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1h : React$2.Fragment;
|
|
5836
5836
|
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));
|
|
5837
5837
|
}
|
|
5838
|
-
var templateObject_1$
|
|
5838
|
+
var templateObject_1$22, templateObject_2$1v, templateObject_3$1d;
|
|
5839
5839
|
|
|
5840
5840
|
/* base styles & size variants */
|
|
5841
5841
|
var CustomRadioStyles$2 = {
|
|
@@ -5900,9 +5900,9 @@ var ContainerStyles$2 = {
|
|
|
5900
5900
|
},
|
|
5901
5901
|
};
|
|
5902
5902
|
|
|
5903
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5904
|
-
var Container$
|
|
5905
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5903
|
+
var Wrapper$7 = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5904
|
+
var Container$1g = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5905
|
+
var Input$4 = newStyled.input(templateObject_2$1u || (templateObject_2$1u = __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) {
|
|
5906
5906
|
var disabled = _a.disabled;
|
|
5907
5907
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5908
5908
|
});
|
|
@@ -5910,14 +5910,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5910
5910
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5911
5911
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5912
5912
|
]; });
|
|
5913
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5913
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$1c || (templateObject_3$1c = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5914
5914
|
var theme = _a.theme;
|
|
5915
5915
|
return theme.component.radio.textSize;
|
|
5916
5916
|
}, function (_a) {
|
|
5917
5917
|
var theme = _a.theme;
|
|
5918
5918
|
return theme.component.radio.lineHeight;
|
|
5919
5919
|
});
|
|
5920
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5920
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$_ || (templateObject_4$_ = __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) {
|
|
5921
5921
|
var theme = _a.theme;
|
|
5922
5922
|
return theme.component.radio.textSize;
|
|
5923
5923
|
}, function (_a) {
|
|
@@ -5934,9 +5934,9 @@ var RadioInput = function (_a) {
|
|
|
5934
5934
|
var value = event.currentTarget.value;
|
|
5935
5935
|
onChange({ value: value, label: label });
|
|
5936
5936
|
};
|
|
5937
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5937
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$1g, __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));
|
|
5938
5938
|
};
|
|
5939
|
-
var templateObject_1$
|
|
5939
|
+
var templateObject_1$21, templateObject_2$1u, templateObject_3$1c, templateObject_4$_;
|
|
5940
5940
|
|
|
5941
5941
|
var useOnClickOutside = function (ref, handler) {
|
|
5942
5942
|
React$2.useEffect(function () {
|
|
@@ -6029,7 +6029,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6029
6029
|
}
|
|
6030
6030
|
};
|
|
6031
6031
|
|
|
6032
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
6032
|
+
var Wrapper$6 = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __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) {
|
|
6033
6033
|
var position = _a.position;
|
|
6034
6034
|
return getWrapperFlexDirection(position);
|
|
6035
6035
|
}, function (_a) {
|
|
@@ -6039,7 +6039,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __ma
|
|
|
6039
6039
|
var disableHover = _a.disableHover;
|
|
6040
6040
|
return (disableHover ? 0 : 1);
|
|
6041
6041
|
});
|
|
6042
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6042
|
+
var TooltipContainer = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __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) {
|
|
6043
6043
|
var position = _a.position;
|
|
6044
6044
|
return getContainerFlexDirection(position);
|
|
6045
6045
|
}, function (_a) {
|
|
@@ -6067,14 +6067,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1s || (templateObject_2$1s
|
|
|
6067
6067
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6068
6068
|
return actual === expected ? margin : '0';
|
|
6069
6069
|
};
|
|
6070
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
6070
|
+
var ContentWrapper = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __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) {
|
|
6071
6071
|
var borderColor = _a.borderColor;
|
|
6072
6072
|
return borderColor;
|
|
6073
6073
|
}, function (_a) {
|
|
6074
6074
|
var backgroundColor = _a.backgroundColor;
|
|
6075
6075
|
return backgroundColor;
|
|
6076
6076
|
});
|
|
6077
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
6077
|
+
var TooltipText = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __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) {
|
|
6078
6078
|
var theme = _a.theme;
|
|
6079
6079
|
return theme.component.autoship.tooltip.text.alignment;
|
|
6080
6080
|
}, function (_a) {
|
|
@@ -6084,17 +6084,17 @@ var TooltipText = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __ma
|
|
|
6084
6084
|
var color = _a.color;
|
|
6085
6085
|
return color;
|
|
6086
6086
|
});
|
|
6087
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
6088
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
6087
|
+
var TopSection = newStyled.div(templateObject_5$L || (templateObject_5$L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
6088
|
+
var Title$a = newStyled.h1(templateObject_6$E || (templateObject_6$E = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
6089
6089
|
var color = _a.color;
|
|
6090
6090
|
return color;
|
|
6091
6091
|
});
|
|
6092
|
-
var IconContainer$6 = newStyled.div(templateObject_7$
|
|
6093
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
6092
|
+
var IconContainer$6 = newStyled.div(templateObject_7$w || (templateObject_7$w = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
6093
|
+
var CloseToolTip = newStyled.button(templateObject_8$p || (templateObject_8$p = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
6094
6094
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6095
6095
|
return right;
|
|
6096
6096
|
});
|
|
6097
|
-
var templateObject_1$
|
|
6097
|
+
var templateObject_1$20, templateObject_2$1t, templateObject_3$1b, templateObject_4$Z, templateObject_5$L, templateObject_6$E, templateObject_7$w, templateObject_8$p;
|
|
6098
6098
|
|
|
6099
6099
|
var Tooltip = function (_a) {
|
|
6100
6100
|
var _b;
|
|
@@ -6137,8 +6137,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
6137
6137
|
};
|
|
6138
6138
|
};
|
|
6139
6139
|
|
|
6140
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6141
|
-
var ContainerBase$
|
|
6140
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6141
|
+
var ContainerBase$4 = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __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) {
|
|
6142
6142
|
var selected = _a.selected, theme = _a.theme;
|
|
6143
6143
|
return selected
|
|
6144
6144
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6152,21 +6152,21 @@ var ContainerBase$3 = newStyled.div(templateObject_2$1r || (templateObject_2$1r
|
|
|
6152
6152
|
var theme = _a.theme;
|
|
6153
6153
|
return theme.colors.pallete.primary.color;
|
|
6154
6154
|
});
|
|
6155
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$
|
|
6155
|
+
var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_3$1a || (templateObject_3$1a = __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) {
|
|
6156
6156
|
var onClick = _a.onClick;
|
|
6157
6157
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6158
6158
|
});
|
|
6159
|
-
var SubscriptionContainer$
|
|
6160
|
-
var SubscriptionHeader$
|
|
6159
|
+
var SubscriptionContainer$4 = newStyled(ContainerBase$4)(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6160
|
+
var SubscriptionHeader$4 = newStyled.div(templateObject_5$K || (templateObject_5$K = __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) {
|
|
6161
6161
|
var theme = _a.theme;
|
|
6162
6162
|
return theme.colors.shades[200].color;
|
|
6163
6163
|
}, function (_a) {
|
|
6164
6164
|
var theme = _a.theme;
|
|
6165
6165
|
return theme.colors.pallete.primary.color;
|
|
6166
6166
|
});
|
|
6167
|
-
var BenefitsContainer$3 = newStyled.div(templateObject_6$
|
|
6168
|
-
var Benefit$4 = newStyled.div(templateObject_7$
|
|
6169
|
-
var BenefitText$3 = newStyled(Text$7)(templateObject_8$
|
|
6167
|
+
var BenefitsContainer$3 = newStyled.div(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6168
|
+
var Benefit$4 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
6169
|
+
var BenefitText$3 = newStyled(Text$7)(templateObject_8$o || (templateObject_8$o = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6170
6170
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$c || (templateObject_9$c = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
6171
6171
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
6172
6172
|
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$7 || (templateObject_11$7 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
@@ -6174,8 +6174,8 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6174
6174
|
var selected = _a.selected, theme = _a.theme;
|
|
6175
6175
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6176
6176
|
});
|
|
6177
|
-
var Container$
|
|
6178
|
-
var templateObject_1$
|
|
6177
|
+
var Container$1f = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6178
|
+
var templateObject_1$1$, templateObject_2$1s, templateObject_3$1a, templateObject_4$Y, templateObject_5$K, templateObject_6$D, templateObject_7$v, templateObject_8$o, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6179
6179
|
|
|
6180
6180
|
var radioIds$2 = {
|
|
6181
6181
|
oneTime: {
|
|
@@ -6225,17 +6225,17 @@ var Autoship = function (_a) {
|
|
|
6225
6225
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6226
6226
|
};
|
|
6227
6227
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6228
|
-
return (jsxRuntime.jsxs(Container$
|
|
6228
|
+
return (jsxRuntime.jsxs(Container$1f, __assign$1({ className: className }, { children: [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 () { return handleChange(radioIds$2.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer$4, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader$4, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, { 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, onChange: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer$3, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$4, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6229
6229
|
? benefitsColor.selected
|
|
6230
6230
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$3, { 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$3, { 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));
|
|
6231
6231
|
};
|
|
6232
6232
|
|
|
6233
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6233
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6234
6234
|
var theme = _a.theme;
|
|
6235
6235
|
return theme.name === 'TheSpaDr' &&
|
|
6236
6236
|
"\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 ";
|
|
6237
6237
|
});
|
|
6238
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
6238
|
+
var DiscountTag$2 = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __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) {
|
|
6239
6239
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6240
6240
|
return isSelected
|
|
6241
6241
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6251,7 +6251,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6251
6251
|
}
|
|
6252
6252
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6253
6253
|
};
|
|
6254
|
-
var ContainerBase$
|
|
6254
|
+
var ContainerBase$3 = newStyled.div(templateObject_3$19 || (templateObject_3$19 = __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) {
|
|
6255
6255
|
var selected = _a.selected, theme = _a.theme;
|
|
6256
6256
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6257
6257
|
}, function (_a) {
|
|
@@ -6263,32 +6263,32 @@ var ContainerBase$2 = newStyled.div(templateObject_3$18 || (templateObject_3$18
|
|
|
6263
6263
|
var theme = _a.theme;
|
|
6264
6264
|
return theme.colors.pallete.primary.color;
|
|
6265
6265
|
});
|
|
6266
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$
|
|
6266
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$3)(templateObject_4$X || (templateObject_4$X = __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) {
|
|
6267
6267
|
var onClick = _a.onClick;
|
|
6268
6268
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6269
6269
|
});
|
|
6270
|
-
var SubscriptionContainer$
|
|
6271
|
-
var SubscriptionHeader$
|
|
6270
|
+
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_5$J || (templateObject_5$J = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6271
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_6$C || (templateObject_6$C = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6272
6272
|
var theme = _a.theme;
|
|
6273
6273
|
return theme.colors.shades[200].color;
|
|
6274
6274
|
}, function (_a) {
|
|
6275
6275
|
var theme = _a.theme;
|
|
6276
6276
|
return theme.colors.pallete.primary.color;
|
|
6277
6277
|
});
|
|
6278
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_7$
|
|
6279
|
-
var Benefit$3 = newStyled.div(templateObject_8$
|
|
6278
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_7$u || (templateObject_7$u = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6279
|
+
var Benefit$3 = newStyled.div(templateObject_8$n || (templateObject_8$n = __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"])));
|
|
6280
6280
|
var BenefitText$2 = newStyled(Text$7)(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6281
6281
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$a || (templateObject_10$a = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
6282
6282
|
var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
6283
6283
|
var selected = _a.selected, theme = _a.theme;
|
|
6284
6284
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6285
6285
|
});
|
|
6286
|
-
var Container$
|
|
6286
|
+
var Container$1e = newStyled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6287
6287
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6288
6288
|
var theme = _a.theme;
|
|
6289
6289
|
return theme.component.autoship.tooltip.margin;
|
|
6290
6290
|
});
|
|
6291
|
-
var templateObject_1$
|
|
6291
|
+
var templateObject_1$1_, templateObject_2$1r, templateObject_3$19, templateObject_4$X, templateObject_5$J, templateObject_6$C, templateObject_7$u, templateObject_8$n, templateObject_9$b, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6292
6292
|
|
|
6293
6293
|
var radioIds$1 = {
|
|
6294
6294
|
oneTime: {
|
|
@@ -6348,7 +6348,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6348
6348
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6349
6349
|
};
|
|
6350
6350
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6351
|
-
return (jsxRuntime.jsxs(Container$
|
|
6351
|
+
return (jsxRuntime.jsxs(Container$1e, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$3, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag$2, __assign$1({ isSelected: radioIds$1.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader$3, { children: [jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$1.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$2, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer$2, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$3, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
6352
6352
|
? benefitsColor.selected
|
|
6353
6353
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$2, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(FlexContainer$2, __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$2, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$2, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6354
6354
|
};
|
|
@@ -6367,13 +6367,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6367
6367
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6368
6368
|
_a$2);
|
|
6369
6369
|
|
|
6370
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6371
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6372
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6373
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6374
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6375
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6376
|
-
var templateObject_1$
|
|
6370
|
+
var CustomerDetails = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject([""], [""])));
|
|
6371
|
+
var CustomerInfo = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __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"])));
|
|
6372
|
+
var Name = newStyled.h4(templateObject_3$18 || (templateObject_3$18 = __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"])));
|
|
6373
|
+
var StarIconContainer = newStyled.div(templateObject_4$W || (templateObject_4$W = __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"])));
|
|
6374
|
+
var Description$2 = newStyled.p(templateObject_5$I || (templateObject_5$I = __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"])));
|
|
6375
|
+
var ReviewDays = newStyled.span(templateObject_6$B || (templateObject_6$B = __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"])));
|
|
6376
|
+
var templateObject_1$1Z, templateObject_2$1q, templateObject_3$18, templateObject_4$W, templateObject_5$I, templateObject_6$B;
|
|
6377
6377
|
|
|
6378
6378
|
var NameWithStars = function (_a) {
|
|
6379
6379
|
var name = _a.name, size = _a.size;
|
|
@@ -6391,10 +6391,10 @@ var ResultFeedback = function (_a) {
|
|
|
6391
6391
|
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));
|
|
6392
6392
|
};
|
|
6393
6393
|
|
|
6394
|
-
var Container$
|
|
6395
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6396
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6397
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6394
|
+
var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __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; });
|
|
6395
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __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"])));
|
|
6396
|
+
var ImageCard = newStyled.div(templateObject_3$17 || (templateObject_3$17 = __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; });
|
|
6397
|
+
var UserInfoText = newStyled.div(templateObject_4$V || (templateObject_4$V = __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) {
|
|
6398
6398
|
var theme = _a.theme;
|
|
6399
6399
|
return theme.colors.pallete.secondary.color;
|
|
6400
6400
|
}, function (_a) {
|
|
@@ -6404,7 +6404,7 @@ var UserInfoText = newStyled.div(templateObject_4$U || (templateObject_4$U = __m
|
|
|
6404
6404
|
var theme = _a.theme, size = _a.size;
|
|
6405
6405
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6406
6406
|
});
|
|
6407
|
-
var templateObject_1$
|
|
6407
|
+
var templateObject_1$1Y, templateObject_2$1p, templateObject_3$17, templateObject_4$V;
|
|
6408
6408
|
|
|
6409
6409
|
/* base styles & size variants */
|
|
6410
6410
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6479,10 +6479,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6479
6479
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6480
6480
|
var infoText = buildInfoText(name, age, months);
|
|
6481
6481
|
var Component = componentByVariant[variant];
|
|
6482
|
-
return (jsxRuntime.jsxs(Container$
|
|
6482
|
+
return (jsxRuntime.jsxs(Container$1d, __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));
|
|
6483
6483
|
};
|
|
6484
6484
|
|
|
6485
|
-
var Section = newStyled.div(templateObject_1$
|
|
6485
|
+
var Section = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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) {
|
|
6486
6486
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6487
6487
|
});
|
|
6488
6488
|
var CardHeader = function (_a) {
|
|
@@ -6493,16 +6493,16 @@ var CardFooter = function (_a) {
|
|
|
6493
6493
|
var children = _a.children;
|
|
6494
6494
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6495
6495
|
};
|
|
6496
|
-
var templateObject_1$
|
|
6496
|
+
var templateObject_1$1X;
|
|
6497
6497
|
|
|
6498
|
-
var Body$1 = newStyled.div(templateObject_1$
|
|
6498
|
+
var Body$1 = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __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"])));
|
|
6499
6499
|
var CardBody$1 = function (_a) {
|
|
6500
6500
|
var children = _a.children;
|
|
6501
6501
|
return jsxRuntime.jsx(Body$1, { children: children }, void 0);
|
|
6502
6502
|
};
|
|
6503
|
-
var templateObject_1$
|
|
6503
|
+
var templateObject_1$1W;
|
|
6504
6504
|
|
|
6505
|
-
var Container$
|
|
6505
|
+
var Container$1c = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __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) {
|
|
6506
6506
|
var flex = _a.flex;
|
|
6507
6507
|
return flex &&
|
|
6508
6508
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6517,23 +6517,23 @@ var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = _
|
|
|
6517
6517
|
var Card$2 = function (_a) {
|
|
6518
6518
|
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;
|
|
6519
6519
|
var theme = useTheme();
|
|
6520
|
-
return (jsxRuntime.jsx(Container$
|
|
6520
|
+
return (jsxRuntime.jsx(Container$1c, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6521
6521
|
};
|
|
6522
6522
|
var Card$3 = Object.assign(Card$2, {
|
|
6523
6523
|
Header: CardHeader,
|
|
6524
6524
|
Footer: CardFooter,
|
|
6525
6525
|
Body: CardBody$1,
|
|
6526
6526
|
});
|
|
6527
|
-
var templateObject_1$
|
|
6527
|
+
var templateObject_1$1V;
|
|
6528
6528
|
|
|
6529
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6530
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6531
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6529
|
+
var StyledWrapper = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __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"])));
|
|
6530
|
+
var StyledContainer = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __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"])));
|
|
6531
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$16 || (templateObject_3$16 = __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) {
|
|
6532
6532
|
var color = _a.color;
|
|
6533
6533
|
return color;
|
|
6534
6534
|
});
|
|
6535
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6536
|
-
var templateObject_1$
|
|
6535
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$U || (templateObject_4$U = __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"])));
|
|
6536
|
+
var templateObject_1$1U, templateObject_2$1o, templateObject_3$16, templateObject_4$U;
|
|
6537
6537
|
|
|
6538
6538
|
var Minimalistic = function (_a) {
|
|
6539
6539
|
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;
|
|
@@ -6541,28 +6541,28 @@ var Minimalistic = function (_a) {
|
|
|
6541
6541
|
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));
|
|
6542
6542
|
};
|
|
6543
6543
|
|
|
6544
|
-
var Container$
|
|
6545
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6546
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6547
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6544
|
+
var Container$1b = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6545
|
+
var Title$9 = newStyled.h1(templateObject_2$1n || (templateObject_2$1n = __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; });
|
|
6546
|
+
var Details$1 = newStyled.span(templateObject_3$15 || (templateObject_3$15 = __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; });
|
|
6547
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$T || (templateObject_4$T = __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"])));
|
|
6548
6548
|
var Simple = function (_a) {
|
|
6549
6549
|
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;
|
|
6550
6550
|
var theme = useTheme();
|
|
6551
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
6551
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$1b, { 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));
|
|
6552
6552
|
};
|
|
6553
|
-
var templateObject_1$
|
|
6553
|
+
var templateObject_1$1T, templateObject_2$1n, templateObject_3$15, templateObject_4$T;
|
|
6554
6554
|
|
|
6555
6555
|
var Bundle = {
|
|
6556
6556
|
Minimalistic: Minimalistic,
|
|
6557
6557
|
Simple: Simple,
|
|
6558
6558
|
};
|
|
6559
6559
|
|
|
6560
|
-
var Container$
|
|
6560
|
+
var Container$1a = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __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) {
|
|
6561
6561
|
var displayBNPL = _a.displayBNPL;
|
|
6562
6562
|
return (displayBNPL ? 'flex' : 'none');
|
|
6563
6563
|
});
|
|
6564
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6565
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6564
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __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"])));
|
|
6565
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$14 || (templateObject_3$14 = __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"])));
|
|
6566
6566
|
var BuyNowPayLater = function (_a) {
|
|
6567
6567
|
var _b;
|
|
6568
6568
|
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;
|
|
@@ -6582,48 +6582,48 @@ var BuyNowPayLater = function (_a) {
|
|
|
6582
6582
|
else {
|
|
6583
6583
|
dynamicText = "or 4 interest-free payments of ";
|
|
6584
6584
|
}
|
|
6585
|
-
return (jsxRuntime.jsx(Container$
|
|
6585
|
+
return (jsxRuntime.jsx(Container$1a, __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: {
|
|
6586
6586
|
display: 'inline',
|
|
6587
6587
|
fontSize: fontSize,
|
|
6588
6588
|
paddingLeft: '0.25rem',
|
|
6589
6589
|
paddingRight: '0.25rem',
|
|
6590
6590
|
}, 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));
|
|
6591
6591
|
};
|
|
6592
|
-
var templateObject_1$
|
|
6592
|
+
var templateObject_1$1S, templateObject_2$1m, templateObject_3$14;
|
|
6593
6593
|
|
|
6594
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6594
|
+
var Text$6 = newStyled.span(templateObject_1$1R || (templateObject_1$1R = __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; });
|
|
6595
6595
|
var Title$8 = function (_a) {
|
|
6596
6596
|
var title = _a.title;
|
|
6597
6597
|
var theme = useTheme();
|
|
6598
6598
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6599
6599
|
};
|
|
6600
|
-
var templateObject_1$
|
|
6600
|
+
var templateObject_1$1R;
|
|
6601
6601
|
|
|
6602
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6602
|
+
var P$4 = newStyled.p(templateObject_1$1Q || (templateObject_1$1Q = __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; });
|
|
6603
6603
|
var Promo = function (_a) {
|
|
6604
6604
|
var text = _a.text;
|
|
6605
6605
|
var theme = useTheme();
|
|
6606
6606
|
return (jsxRuntime.jsx(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6607
6607
|
};
|
|
6608
|
-
var templateObject_1$
|
|
6608
|
+
var templateObject_1$1Q;
|
|
6609
6609
|
|
|
6610
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6610
|
+
var Text$5 = newStyled.span(templateObject_1$1P || (templateObject_1$1P = __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; });
|
|
6611
6611
|
var Description$1 = function (_a) {
|
|
6612
6612
|
var text = _a.text;
|
|
6613
6613
|
var theme = useTheme();
|
|
6614
6614
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6615
6615
|
};
|
|
6616
|
-
var templateObject_1$
|
|
6616
|
+
var templateObject_1$1P;
|
|
6617
6617
|
|
|
6618
|
-
var Container$
|
|
6618
|
+
var Container$19 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __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"); });
|
|
6619
6619
|
var CloseButton$1 = function (_a) {
|
|
6620
6620
|
var onClick = _a.onClick, size = _a.size;
|
|
6621
6621
|
var theme = useTheme();
|
|
6622
|
-
return (jsxRuntime.jsx(Container$
|
|
6622
|
+
return (jsxRuntime.jsx(Container$19, __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));
|
|
6623
6623
|
};
|
|
6624
|
-
var templateObject_1$
|
|
6624
|
+
var templateObject_1$1O;
|
|
6625
6625
|
|
|
6626
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6626
|
+
var Text$4 = newStyled.h3(templateObject_1$1N || (templateObject_1$1N = __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) {
|
|
6627
6627
|
var backgroundColor = _a.backgroundColor;
|
|
6628
6628
|
return backgroundColor;
|
|
6629
6629
|
}, function (_a) {
|
|
@@ -6638,7 +6638,7 @@ var OfferBanner = function (_a) {
|
|
|
6638
6638
|
var theme = useTheme();
|
|
6639
6639
|
return (jsxRuntime.jsx(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6640
6640
|
};
|
|
6641
|
-
var templateObject_1$
|
|
6641
|
+
var templateObject_1$1N;
|
|
6642
6642
|
|
|
6643
6643
|
var CartProductItem = {
|
|
6644
6644
|
Title: Title$8,
|
|
@@ -6648,20 +6648,20 @@ var CartProductItem = {
|
|
|
6648
6648
|
CloseButton: CloseButton$1,
|
|
6649
6649
|
};
|
|
6650
6650
|
|
|
6651
|
-
var Container$
|
|
6652
|
-
var MobileContainer = newStyled(Container$
|
|
6653
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6654
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6655
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6656
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6657
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6658
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6651
|
+
var Container$18 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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"])));
|
|
6652
|
+
var MobileContainer = newStyled(Container$18)(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6653
|
+
var DollarPart = newStyled.span(templateObject_3$13 || (templateObject_3$13 = __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"])));
|
|
6654
|
+
var ClubMembersText = newStyled.span(templateObject_4$S || (templateObject_4$S = __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"])));
|
|
6655
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$H || (templateObject_5$H = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6656
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$A || (templateObject_6$A = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6657
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$t || (templateObject_7$t = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6658
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$m || (templateObject_8$m = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6659
6659
|
var ClubPriceLabel = function (_a) {
|
|
6660
6660
|
var clubPrice = _a.clubPrice;
|
|
6661
6661
|
var isMobile = useWindowDimensions().isMobile;
|
|
6662
|
-
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$
|
|
6662
|
+
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$18, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6663
6663
|
};
|
|
6664
|
-
var templateObject_1$
|
|
6664
|
+
var templateObject_1$1M, templateObject_2$1l, templateObject_3$13, templateObject_4$S, templateObject_5$H, templateObject_6$A, templateObject_7$t, templateObject_8$m;
|
|
6665
6665
|
|
|
6666
6666
|
var Spacing = function (_a) {
|
|
6667
6667
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6669,10 +6669,10 @@ var Spacing = function (_a) {
|
|
|
6669
6669
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6670
6670
|
};
|
|
6671
6671
|
|
|
6672
|
-
var Container$
|
|
6673
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6674
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6675
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6672
|
+
var Container$17 = newStyled('div')(templateObject_1$1L || (templateObject_1$1L = __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"])));
|
|
6673
|
+
var Content$2 = newStyled('div')(templateObject_2$1k || (templateObject_2$1k = __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"])));
|
|
6674
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$12 || (templateObject_3$12 = __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"])));
|
|
6675
|
+
var Bar$2 = newStyled('div')(templateObject_4$R || (templateObject_4$R = __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) {
|
|
6676
6676
|
var index = _a.index;
|
|
6677
6677
|
return "".concat(6 + 3 * index, "px");
|
|
6678
6678
|
}, function (_a) {
|
|
@@ -6681,12 +6681,12 @@ var Bar$2 = newStyled('div')(templateObject_4$Q || (templateObject_4$Q = __makeT
|
|
|
6681
6681
|
});
|
|
6682
6682
|
var StrengthBars = function (_a) {
|
|
6683
6683
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6684
|
-
return (jsxRuntime.jsxs(Container$
|
|
6684
|
+
return (jsxRuntime.jsxs(Container$17, __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));
|
|
6685
6685
|
};
|
|
6686
|
-
var templateObject_1$
|
|
6686
|
+
var templateObject_1$1L, templateObject_2$1k, templateObject_3$12, templateObject_4$R;
|
|
6687
6687
|
|
|
6688
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6689
|
-
var templateObject_1$
|
|
6688
|
+
var Benefit$2 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
6689
|
+
var templateObject_1$1K;
|
|
6690
6690
|
|
|
6691
6691
|
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;}}";
|
|
6692
6692
|
|
|
@@ -6708,10 +6708,10 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6708
6708
|
|
|
6709
6709
|
var STARTS_NUMBER = 5;
|
|
6710
6710
|
|
|
6711
|
-
var Container$
|
|
6712
|
-
var templateObject_1$
|
|
6711
|
+
var Container$16 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6712
|
+
var templateObject_1$1J;
|
|
6713
6713
|
|
|
6714
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6714
|
+
var StarContainer = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6715
6715
|
var marginRight = _a.marginRight;
|
|
6716
6716
|
return marginRight;
|
|
6717
6717
|
});
|
|
@@ -6723,11 +6723,11 @@ var StarList = function (_a) {
|
|
|
6723
6723
|
width: theme.component.stars.element[size].width,
|
|
6724
6724
|
height: theme.component.stars.element[size].height,
|
|
6725
6725
|
};
|
|
6726
|
-
return (jsxRuntime.jsx(Container$
|
|
6726
|
+
return (jsxRuntime.jsx(Container$16, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6727
6727
|
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)));
|
|
6728
6728
|
}) }, void 0));
|
|
6729
6729
|
};
|
|
6730
|
-
var templateObject_1$
|
|
6730
|
+
var templateObject_1$1I;
|
|
6731
6731
|
|
|
6732
6732
|
/* base styles & size variants */
|
|
6733
6733
|
var LabelStyles = {
|
|
@@ -6775,7 +6775,7 @@ var LabelStyles = {
|
|
|
6775
6775
|
});
|
|
6776
6776
|
},
|
|
6777
6777
|
};
|
|
6778
|
-
var Container$
|
|
6778
|
+
var Container$15 = newStyled.a(templateObject_1$1H || (templateObject_1$1H = __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"])));
|
|
6779
6779
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6780
6780
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6781
6781
|
return [
|
|
@@ -6794,8 +6794,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6794
6794
|
}),
|
|
6795
6795
|
];
|
|
6796
6796
|
});
|
|
6797
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6798
|
-
var templateObject_1$
|
|
6797
|
+
var RatingLabel = newStyled.span(templateObject_2$1j || (templateObject_2$1j = __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; });
|
|
6798
|
+
var templateObject_1$1H, templateObject_2$1j;
|
|
6799
6799
|
|
|
6800
6800
|
var Rating = function (_a) {
|
|
6801
6801
|
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;
|
|
@@ -6816,19 +6816,19 @@ var Rating = function (_a) {
|
|
|
6816
6816
|
href: reviewsContainerId,
|
|
6817
6817
|
}
|
|
6818
6818
|
: {};
|
|
6819
|
-
return (jsxRuntime.jsxs(Container$
|
|
6819
|
+
return (jsxRuntime.jsxs(Container$15, __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));
|
|
6820
6820
|
};
|
|
6821
6821
|
|
|
6822
|
-
var ImageWrapper$4 = newStyled.div(templateObject_1$
|
|
6822
|
+
var ImageWrapper$4 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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) {
|
|
6823
6823
|
var width = _a.width;
|
|
6824
6824
|
return width;
|
|
6825
6825
|
});
|
|
6826
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6827
|
-
var RatingText = newStyled.span(templateObject_3$
|
|
6826
|
+
var RatingWrapper = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __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"])));
|
|
6827
|
+
var RatingText = newStyled.span(templateObject_3$11 || (templateObject_3$11 = __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) {
|
|
6828
6828
|
var fontSize = _a.fontSize;
|
|
6829
6829
|
return fontSize;
|
|
6830
6830
|
});
|
|
6831
|
-
var templateObject_1$
|
|
6831
|
+
var templateObject_1$1G, templateObject_2$1i, templateObject_3$11;
|
|
6832
6832
|
|
|
6833
6833
|
var OfferAtCartImage = function (_a) {
|
|
6834
6834
|
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width;
|
|
@@ -6875,9 +6875,9 @@ var getDropdownOptions = function (frequency) {
|
|
|
6875
6875
|
}); });
|
|
6876
6876
|
};
|
|
6877
6877
|
|
|
6878
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
6879
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_2$
|
|
6880
|
-
var templateObject_1$
|
|
6878
|
+
var Benefit$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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"])));
|
|
6879
|
+
var BenefitText$1 = newStyled(Text$7)(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6880
|
+
var templateObject_1$1F, templateObject_2$1h;
|
|
6881
6881
|
|
|
6882
6882
|
var BenefitsList = function (_a) {
|
|
6883
6883
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6888,23 +6888,23 @@ var BenefitsList = function (_a) {
|
|
|
6888
6888
|
}) }, void 0));
|
|
6889
6889
|
};
|
|
6890
6890
|
|
|
6891
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6891
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6892
6892
|
var timerColor = _a.timerColor;
|
|
6893
6893
|
return timerColor || '';
|
|
6894
6894
|
});
|
|
6895
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
6895
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __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) {
|
|
6896
6896
|
var timerColor = _a.timerColor;
|
|
6897
6897
|
return timerColor || '';
|
|
6898
6898
|
});
|
|
6899
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3
|
|
6899
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$10 || (templateObject_3$10 = __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) {
|
|
6900
6900
|
var theme = _a.theme;
|
|
6901
6901
|
return theme.colors.shades.white.color;
|
|
6902
6902
|
}, function (_a) {
|
|
6903
6903
|
var theme = _a.theme;
|
|
6904
6904
|
return theme.colors.shades.white.color;
|
|
6905
6905
|
});
|
|
6906
|
-
var Unit = newStyled.p(templateObject_4$
|
|
6907
|
-
var templateObject_1$
|
|
6906
|
+
var Unit = newStyled.p(templateObject_4$Q || (templateObject_4$Q = __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"])));
|
|
6907
|
+
var templateObject_1$1E, templateObject_2$1g, templateObject_3$10, templateObject_4$Q;
|
|
6908
6908
|
|
|
6909
6909
|
var HRS = 'HRS';
|
|
6910
6910
|
var MIN = 'MIN';
|
|
@@ -6945,7 +6945,7 @@ var Timer = function (_a) {
|
|
|
6945
6945
|
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));
|
|
6946
6946
|
};
|
|
6947
6947
|
|
|
6948
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
6948
|
+
var TimerContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __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) {
|
|
6949
6949
|
var textPosition = _a.textPosition;
|
|
6950
6950
|
return textPosition;
|
|
6951
6951
|
}, function (_a) {
|
|
@@ -6958,7 +6958,7 @@ var TimerContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C =
|
|
|
6958
6958
|
var borderRadius = _a.borderRadius;
|
|
6959
6959
|
return borderRadius || '8px';
|
|
6960
6960
|
});
|
|
6961
|
-
var templateObject_1$
|
|
6961
|
+
var templateObject_1$1D;
|
|
6962
6962
|
|
|
6963
6963
|
var getDefaultCountdown = function () {
|
|
6964
6964
|
var tomorrowDate = new Date();
|
|
@@ -6974,7 +6974,7 @@ var HurryUp = function (_a) {
|
|
|
6974
6974
|
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));
|
|
6975
6975
|
};
|
|
6976
6976
|
|
|
6977
|
-
var Container$
|
|
6977
|
+
var Container$14 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __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) {
|
|
6978
6978
|
var size = _a.size;
|
|
6979
6979
|
return (size ? size : '100%');
|
|
6980
6980
|
}, function (_a) {
|
|
@@ -6989,7 +6989,7 @@ var borderSize = {
|
|
|
6989
6989
|
large: '3px',
|
|
6990
6990
|
};
|
|
6991
6991
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
6992
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
6992
|
+
var StyledSpinner = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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) {
|
|
6993
6993
|
var size = _a.size;
|
|
6994
6994
|
return borderSize[size];
|
|
6995
6995
|
}, function (_a) {
|
|
@@ -7002,29 +7002,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1e || (templateObject_2$1e =
|
|
|
7002
7002
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
7003
7003
|
return duration;
|
|
7004
7004
|
});
|
|
7005
|
-
var templateObject_1$
|
|
7005
|
+
var templateObject_1$1C, templateObject_2$1f;
|
|
7006
7006
|
|
|
7007
7007
|
var Spinner = function (_a) {
|
|
7008
7008
|
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;
|
|
7009
|
-
return (jsxRuntime.jsx(Container$
|
|
7009
|
+
return (jsxRuntime.jsx(Container$14, __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));
|
|
7010
7010
|
};
|
|
7011
7011
|
|
|
7012
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
7013
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
7014
|
-
var templateObject_1$
|
|
7012
|
+
var ProgressContainer = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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); });
|
|
7013
|
+
var ProgressFiller = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __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; });
|
|
7014
|
+
var templateObject_1$1B, templateObject_2$1e;
|
|
7015
7015
|
|
|
7016
7016
|
var ProgressBar$1 = function (_a) {
|
|
7017
7017
|
var progress = _a.progress, hide = _a.hide;
|
|
7018
7018
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
7019
7019
|
};
|
|
7020
7020
|
|
|
7021
|
-
var Container$
|
|
7022
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
7023
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3
|
|
7024
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
7025
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
7026
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
7027
|
-
var templateObject_1$
|
|
7021
|
+
var Container$13 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
7022
|
+
var HTMLVideo = newStyled.video(templateObject_2$1d || (templateObject_2$1d = __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; });
|
|
7023
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$$ || (templateObject_3$$ = __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"])));
|
|
7024
|
+
var PlayContainer = newStyled.div(templateObject_4$P || (templateObject_4$P = __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"])));
|
|
7025
|
+
var PauseContainer = newStyled.div(templateObject_5$G || (templateObject_5$G = __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"])));
|
|
7026
|
+
var MuteButton = newStyled.button(templateObject_6$z || (templateObject_6$z = __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"])));
|
|
7027
|
+
var templateObject_1$1A, templateObject_2$1d, templateObject_3$$, templateObject_4$P, templateObject_5$G, templateObject_6$z;
|
|
7028
7028
|
|
|
7029
7029
|
var Video$1 = function (_a) {
|
|
7030
7030
|
var _b, _c, _d, _e;
|
|
@@ -7074,14 +7074,14 @@ var Video$1 = function (_a) {
|
|
|
7074
7074
|
setVideoProgress(videoRef.current.currentTime);
|
|
7075
7075
|
}
|
|
7076
7076
|
};
|
|
7077
|
-
return (jsxRuntime.jsxs(Container$
|
|
7077
|
+
return (jsxRuntime.jsxs(Container$13, __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));
|
|
7078
7078
|
};
|
|
7079
7079
|
|
|
7080
|
-
var LikeCount = newStyled.span(templateObject_1$
|
|
7080
|
+
var LikeCount = newStyled.span(templateObject_1$1z || (templateObject_1$1z = __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) {
|
|
7081
7081
|
var theme = _a.theme;
|
|
7082
7082
|
return theme.colors.shades.black.color;
|
|
7083
7083
|
});
|
|
7084
|
-
var LikeBtnContainer = newStyled.button(templateObject_2$
|
|
7084
|
+
var LikeBtnContainer = newStyled.button(templateObject_2$1c || (templateObject_2$1c = __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) {
|
|
7085
7085
|
var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
|
|
7086
7086
|
return position;
|
|
7087
7087
|
}, function (_a) {
|
|
@@ -7100,7 +7100,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1b || (templateObject_2
|
|
|
7100
7100
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
7101
7101
|
return boxSizing;
|
|
7102
7102
|
});
|
|
7103
|
-
var templateObject_1$
|
|
7103
|
+
var templateObject_1$1z, templateObject_2$1c;
|
|
7104
7104
|
|
|
7105
7105
|
var getStylesBySize$c = function (size) {
|
|
7106
7106
|
switch (size) {
|
|
@@ -7121,7 +7121,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7121
7121
|
};
|
|
7122
7122
|
}
|
|
7123
7123
|
};
|
|
7124
|
-
var Container$
|
|
7124
|
+
var Container$12 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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) {
|
|
7125
7125
|
var backgroundColor = _a.backgroundColor;
|
|
7126
7126
|
return backgroundColor;
|
|
7127
7127
|
}, function (_a) {
|
|
@@ -7162,9 +7162,9 @@ var IconButton = function (_a) {
|
|
|
7162
7162
|
var _b, _c;
|
|
7163
7163
|
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;
|
|
7164
7164
|
var theme = useTheme();
|
|
7165
|
-
return (jsxRuntime.jsx(Container$
|
|
7165
|
+
return (jsxRuntime.jsx(Container$12, __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));
|
|
7166
7166
|
};
|
|
7167
|
-
var templateObject_1$
|
|
7167
|
+
var templateObject_1$1y;
|
|
7168
7168
|
|
|
7169
7169
|
var LikeButton = function (_a) {
|
|
7170
7170
|
var _b;
|
|
@@ -7177,11 +7177,11 @@ var LikeButton = function (_a) {
|
|
|
7177
7177
|
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));
|
|
7178
7178
|
};
|
|
7179
7179
|
|
|
7180
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
7181
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
7182
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
7183
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
7184
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
7180
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
7181
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
7182
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7183
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7184
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
7185
7185
|
var RegularPriceTag = function () {
|
|
7186
7186
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
7187
7187
|
};
|
|
@@ -7231,11 +7231,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
7231
7231
|
: exports.ComponentSize.XSmall;
|
|
7232
7232
|
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
7233
7233
|
};
|
|
7234
|
-
return (jsxRuntime.jsxs(Container$
|
|
7234
|
+
return (jsxRuntime.jsxs(Container$1p, __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, __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, __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, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
7235
7235
|
? finalPriceArray[0]
|
|
7236
7236
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __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$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7237
7237
|
};
|
|
7238
|
-
var templateObject_1$
|
|
7238
|
+
var templateObject_1$1x, templateObject_2$1b, templateObject_3$_, templateObject_4$O, templateObject_5$F;
|
|
7239
7239
|
|
|
7240
7240
|
var STYLES_BY_THEME = {
|
|
7241
7241
|
TheSpaDr: {
|
|
@@ -7308,10 +7308,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7308
7308
|
height: height,
|
|
7309
7309
|
});
|
|
7310
7310
|
});
|
|
7311
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
7312
|
-
var Container$
|
|
7313
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
7314
|
-
var Title$7 = newStyled.h2(templateObject_4$
|
|
7311
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1w || (templateObject_1$1w = __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"])));
|
|
7312
|
+
var Container$11 = newStyled.a(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
7313
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __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"])));
|
|
7314
|
+
var Title$7 = newStyled.h2(templateObject_4$N || (templateObject_4$N = __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) {
|
|
7315
7315
|
var theme = _a.theme;
|
|
7316
7316
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
7317
7317
|
}, function (_a) {
|
|
@@ -7362,17 +7362,17 @@ var getStylesBySize$b = function (size) {
|
|
|
7362
7362
|
};
|
|
7363
7363
|
}
|
|
7364
7364
|
};
|
|
7365
|
-
var TopTagContainer$9 = newStyled.div(templateObject_5$
|
|
7365
|
+
var TopTagContainer$9 = newStyled.div(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7366
7366
|
var style = _a.style;
|
|
7367
7367
|
return style.width;
|
|
7368
7368
|
});
|
|
7369
|
-
var BottomTagContainer$9 = newStyled.div(templateObject_6$
|
|
7369
|
+
var BottomTagContainer$9 = newStyled.div(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7370
7370
|
var style = _a.style;
|
|
7371
7371
|
return style.width;
|
|
7372
7372
|
});
|
|
7373
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
7374
|
-
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$
|
|
7375
|
-
var templateObject_1$
|
|
7373
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7374
|
+
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7375
|
+
var templateObject_1$1w, templateObject_2$1a, templateObject_3$Z, templateObject_4$N, templateObject_5$E, templateObject_6$y, templateObject_7$s, templateObject_8$l;
|
|
7376
7376
|
|
|
7377
7377
|
var ProductItemMobile = function (_a) {
|
|
7378
7378
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7464,12 +7464,12 @@ var ProductItemMobile = function (_a) {
|
|
|
7464
7464
|
setIsLiked(function (prev) { return !prev; });
|
|
7465
7465
|
likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.onClick(e);
|
|
7466
7466
|
};
|
|
7467
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7467
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$11, __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: {
|
|
7468
7468
|
background: {
|
|
7469
7469
|
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,
|
|
7470
7470
|
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,
|
|
7471
7471
|
},
|
|
7472
|
-
} }, 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$
|
|
7472
|
+
} }, 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$11, __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$3, __assign$1({}, discountTag, { size: exports.ComponentSize.Medium, style: {
|
|
7473
7473
|
letterSpacing: '-0.05rem',
|
|
7474
7474
|
} }), 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) {
|
|
7475
7475
|
e.preventDefault();
|
|
@@ -7489,10 +7489,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7489
7489
|
height: height,
|
|
7490
7490
|
});
|
|
7491
7491
|
});
|
|
7492
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
7493
|
-
var Container
|
|
7494
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
7495
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
7492
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1v || (templateObject_1$1v = __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; });
|
|
7493
|
+
var Container$10 = newStyled.a(templateObject_2$19 || (templateObject_2$19 = __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"])));
|
|
7494
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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"])));
|
|
7495
|
+
var Title$6 = newStyled.p(templateObject_4$M || (templateObject_4$M = __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; });
|
|
7496
7496
|
var getStylesBySize$a = function (size) {
|
|
7497
7497
|
switch (size) {
|
|
7498
7498
|
case exports.ComponentSize.Medium:
|
|
@@ -7518,16 +7518,16 @@ var getStylesBySize$a = function (size) {
|
|
|
7518
7518
|
};
|
|
7519
7519
|
}
|
|
7520
7520
|
};
|
|
7521
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
7521
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7522
7522
|
var style = _a.style;
|
|
7523
7523
|
return style.width;
|
|
7524
7524
|
});
|
|
7525
|
-
var TopRightTagContainer$3 = newStyled.div(templateObject_6$
|
|
7526
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_7$
|
|
7525
|
+
var TopRightTagContainer$3 = newStyled.div(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
7526
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7527
7527
|
var style = _a.style;
|
|
7528
7528
|
return style.width;
|
|
7529
7529
|
});
|
|
7530
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
7530
|
+
var MarginTopContainer = newStyled.div(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7531
7531
|
var ProductItemTK = function (_a) {
|
|
7532
7532
|
var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
|
|
7533
7533
|
display: false,
|
|
@@ -7571,26 +7571,26 @@ var ProductItemTK = function (_a) {
|
|
|
7571
7571
|
: undefined }, void 0));
|
|
7572
7572
|
};
|
|
7573
7573
|
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)); };
|
|
7574
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container
|
|
7574
|
+
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$10, __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$10, __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 ? (
|
|
7575
7575
|
// @ts-ignore
|
|
7576
7576
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
7577
7577
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
7578
7578
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7579
7579
|
} }, { 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));
|
|
7580
7580
|
};
|
|
7581
|
-
var templateObject_1$
|
|
7581
|
+
var templateObject_1$1v, templateObject_2$19, templateObject_3$Y, templateObject_4$M, templateObject_5$D, templateObject_6$x, templateObject_7$r, templateObject_8$k;
|
|
7582
7582
|
|
|
7583
|
-
var Container
|
|
7583
|
+
var Container$$ = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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"])));
|
|
7584
7584
|
function withProductGrid(ProductItemComponent, data) {
|
|
7585
7585
|
function WithProductGrid(props) {
|
|
7586
|
-
return (jsxRuntime.jsx(Container
|
|
7586
|
+
return (jsxRuntime.jsx(Container$$, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
7587
7587
|
}
|
|
7588
7588
|
/* istanbul ignore next */
|
|
7589
7589
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
7590
7590
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7591
7591
|
return WithProductGrid;
|
|
7592
7592
|
}
|
|
7593
|
-
var templateObject_1$
|
|
7593
|
+
var templateObject_1$1u;
|
|
7594
7594
|
|
|
7595
7595
|
var Collection = {
|
|
7596
7596
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7598,11 +7598,11 @@ var Collection = {
|
|
|
7598
7598
|
ProductItemTK: ProductItemTK,
|
|
7599
7599
|
};
|
|
7600
7600
|
|
|
7601
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7602
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7603
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
7604
|
-
var Span = newStyled.span(templateObject_4$
|
|
7605
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
7601
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7602
|
+
newStyled(lt.Label)(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7603
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
7604
|
+
var Span = newStyled.span(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7605
|
+
var OptionsContainer = newStyled.div(templateObject_5$C || (templateObject_5$C = __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"])));
|
|
7606
7606
|
var Label$5 = function (_a) {
|
|
7607
7607
|
var label = _a.label, values = _a.values;
|
|
7608
7608
|
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -7620,7 +7620,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7620
7620
|
Option: Option,
|
|
7621
7621
|
OptionsContainer: OptionsContainer,
|
|
7622
7622
|
});
|
|
7623
|
-
var templateObject_1$
|
|
7623
|
+
var templateObject_1$1t, templateObject_2$18, templateObject_3$X, templateObject_4$L, templateObject_5$C;
|
|
7624
7624
|
|
|
7625
7625
|
var OneColorSelector = function (_a) {
|
|
7626
7626
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7661,21 +7661,21 @@ var OutOfStock = function (_a) {
|
|
|
7661
7661
|
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));
|
|
7662
7662
|
};
|
|
7663
7663
|
|
|
7664
|
-
var Container$
|
|
7664
|
+
var Container$_ = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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) {
|
|
7665
7665
|
var borderColor = _a.borderColor;
|
|
7666
7666
|
return borderColor;
|
|
7667
7667
|
}, function (_a) {
|
|
7668
7668
|
var noStock = _a.noStock;
|
|
7669
7669
|
return (noStock ? '0.4' : '1');
|
|
7670
7670
|
});
|
|
7671
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7671
|
+
var Image$2 = newStyled.img(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7672
7672
|
var PatternSelector = function (_a) {
|
|
7673
7673
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7674
7674
|
var theme = useTheme();
|
|
7675
7675
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7676
|
-
return (jsxRuntime.jsx(Container$
|
|
7676
|
+
return (jsxRuntime.jsx(Container$_, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7677
7677
|
};
|
|
7678
|
-
var templateObject_1$
|
|
7678
|
+
var templateObject_1$1s, templateObject_2$17;
|
|
7679
7679
|
|
|
7680
7680
|
var renderOptions$1 = function (options, showCross) {
|
|
7681
7681
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7703,10 +7703,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7703
7703
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7704
7704
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7705
7705
|
var showCloseIcon = (tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {}).showCloseIcon;
|
|
7706
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7706
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1r || (templateObject_1$1r = __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 "])));
|
|
7707
7707
|
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));
|
|
7708
7708
|
};
|
|
7709
|
-
var templateObject_1$
|
|
7709
|
+
var templateObject_1$1r;
|
|
7710
7710
|
|
|
7711
7711
|
var renderOptions = function (selectedColor, options) {
|
|
7712
7712
|
if (options == null || options.length === 0) {
|
|
@@ -7744,21 +7744,21 @@ var MultiColorPicker = function (_a) {
|
|
|
7744
7744
|
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));
|
|
7745
7745
|
};
|
|
7746
7746
|
|
|
7747
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7748
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7749
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7747
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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'); });
|
|
7748
|
+
var Col$1 = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7749
|
+
var Row$2 = newStyled.div(templateObject_3$W || (templateObject_3$W = __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) {
|
|
7750
7750
|
return props.rightToLeft &&
|
|
7751
7751
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7752
7752
|
});
|
|
7753
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7754
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
7755
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7753
|
+
var H5 = newStyled.h5(templateObject_4$K || (templateObject_4$K = __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; });
|
|
7754
|
+
var H3 = newStyled.h3(templateObject_5$B || (templateObject_5$B = __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; });
|
|
7755
|
+
var FreeShipping = newStyled.span(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7756
7756
|
var CrossSellCheckbox = function (_a) {
|
|
7757
7757
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7758
7758
|
var theme = useTheme();
|
|
7759
7759
|
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));
|
|
7760
7760
|
};
|
|
7761
|
-
var templateObject_1$
|
|
7761
|
+
var templateObject_1$1q, templateObject_2$16, templateObject_3$W, templateObject_4$K, templateObject_5$B, templateObject_6$w;
|
|
7762
7762
|
|
|
7763
7763
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7764
7764
|
__proto__: null,
|
|
@@ -7787,7 +7787,7 @@ var sizeMapper = (_a = {},
|
|
|
7787
7787
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7788
7788
|
_a[exports.ComponentSize.XXSmall] = 'small',
|
|
7789
7789
|
_a);
|
|
7790
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7790
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7791
7791
|
var wide = _a.wide;
|
|
7792
7792
|
return (wide ? '100%' : 'fit-content');
|
|
7793
7793
|
}, function (_a) {
|
|
@@ -7809,11 +7809,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1o || (templateObj
|
|
|
7809
7809
|
var theme = _a.theme;
|
|
7810
7810
|
return theme.colors.text.disabled;
|
|
7811
7811
|
});
|
|
7812
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7812
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7813
7813
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7814
7814
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7815
7815
|
});
|
|
7816
|
-
var templateObject_1$
|
|
7816
|
+
var templateObject_1$1p, templateObject_2$15;
|
|
7817
7817
|
|
|
7818
7818
|
var BaseCTA = function (_a) {
|
|
7819
7819
|
var _b, _c, _d;
|
|
@@ -7904,44 +7904,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7904
7904
|
} }), void 0));
|
|
7905
7905
|
};
|
|
7906
7906
|
|
|
7907
|
-
var Container$
|
|
7908
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
7909
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7910
|
-
var Details = newStyled.span(templateObject_4$
|
|
7907
|
+
var Container$Z = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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; });
|
|
7908
|
+
var IconContainer$5 = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
7909
|
+
var Text$3 = newStyled.p(templateObject_3$V || (templateObject_3$V = __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; });
|
|
7910
|
+
var Details = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7911
7911
|
var Note = function (_a) {
|
|
7912
7912
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7913
7913
|
var theme = useTheme();
|
|
7914
|
-
return (jsxRuntime.jsxs(Container$
|
|
7914
|
+
return (jsxRuntime.jsxs(Container$Z, __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));
|
|
7915
7915
|
};
|
|
7916
|
-
var templateObject_1$
|
|
7916
|
+
var templateObject_1$1o, templateObject_2$14, templateObject_3$V, templateObject_4$J;
|
|
7917
7917
|
|
|
7918
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7918
|
+
var Title$5 = newStyled.h1(templateObject_1$1n || (templateObject_1$1n = __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) {
|
|
7919
7919
|
var theme = _a.theme;
|
|
7920
7920
|
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 ");
|
|
7921
7921
|
});
|
|
7922
|
-
var Line = newStyled.div(templateObject_2$
|
|
7923
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7922
|
+
var Line = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __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; });
|
|
7923
|
+
var Row$1 = newStyled.div(templateObject_3$U || (templateObject_3$U = __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({
|
|
7924
7924
|
flexDirection: ['column', 'row'],
|
|
7925
7925
|
}));
|
|
7926
|
-
var Col = newStyled.div(templateObject_4$
|
|
7926
|
+
var Col = newStyled.div(templateObject_4$I || (templateObject_4$I = __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({
|
|
7927
7927
|
margin: ['0', '0 1.25rem'],
|
|
7928
7928
|
marginBottom: ['1.875rem', '0'],
|
|
7929
7929
|
alignItems: ['center', 'flex-start'],
|
|
7930
7930
|
textAlign: ['center', 'inherit'],
|
|
7931
7931
|
width: ['100%', 'inherit'],
|
|
7932
7932
|
}));
|
|
7933
|
-
var IconContainer$4 = newStyled.div(templateObject_5$
|
|
7933
|
+
var IconContainer$4 = newStyled.div(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7934
7934
|
marginRight: ['0', '0.438rem'],
|
|
7935
7935
|
marginBottom: ['10px', '0'],
|
|
7936
7936
|
width: ['auto', '1.5rem'],
|
|
7937
7937
|
}));
|
|
7938
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7938
|
+
var SectionTitle = newStyled.h1(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7939
7939
|
display: ['block', 'flex'],
|
|
7940
7940
|
}), function (_a) {
|
|
7941
7941
|
var theme = _a.theme;
|
|
7942
7942
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7943
7943
|
});
|
|
7944
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7944
|
+
var SectionDetails = newStyled.p(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7945
7945
|
var theme = _a.theme;
|
|
7946
7946
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7947
7947
|
}, function (_a) {
|
|
@@ -7952,22 +7952,22 @@ var SectionDetails = newStyled.p(templateObject_7$p || (templateObject_7$p = __m
|
|
|
7952
7952
|
})
|
|
7953
7953
|
: '';
|
|
7954
7954
|
});
|
|
7955
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
7955
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
7956
7956
|
var DeliveryDetails = function (_a) {
|
|
7957
7957
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7958
7958
|
var theme = useTheme();
|
|
7959
7959
|
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));
|
|
7960
7960
|
};
|
|
7961
|
-
var templateObject_1$
|
|
7961
|
+
var templateObject_1$1n, templateObject_2$13, templateObject_3$U, templateObject_4$I, templateObject_5$A, templateObject_6$v, templateObject_7$q, templateObject_8$j;
|
|
7962
7962
|
|
|
7963
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7963
|
+
var Backdrop = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
7964
7964
|
var top = _a.top;
|
|
7965
7965
|
return top;
|
|
7966
7966
|
}, function (_a) {
|
|
7967
7967
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7968
7968
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7969
7969
|
});
|
|
7970
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7970
|
+
var Sidebar = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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) {
|
|
7971
7971
|
var height = _a.height;
|
|
7972
7972
|
return height;
|
|
7973
7973
|
}, function (_a) {
|
|
@@ -8014,20 +8014,20 @@ var Drawer = function (_a) {
|
|
|
8014
8014
|
}, [isOpen, onClose, onOpen]);
|
|
8015
8015
|
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;
|
|
8016
8016
|
};
|
|
8017
|
-
var templateObject_1$
|
|
8017
|
+
var templateObject_1$1m, templateObject_2$12;
|
|
8018
8018
|
|
|
8019
8019
|
var TooltipArrow = function (_a) {
|
|
8020
8020
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
8021
8021
|
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));
|
|
8022
8022
|
};
|
|
8023
8023
|
|
|
8024
|
-
var List = newStyled.ul(templateObject_1$
|
|
8025
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
8026
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
8027
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
8028
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
8029
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
8030
|
-
var templateObject_1$
|
|
8024
|
+
var List = newStyled.ul(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
8025
|
+
var Item$2 = newStyled.li(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
8026
|
+
var DropdownWrapper = newStyled.div(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
8027
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$H || (templateObject_4$H = __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"])));
|
|
8028
|
+
var StyledDropdown = newStyled.ul(templateObject_5$z || (templateObject_5$z = __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; });
|
|
8029
|
+
var DropdownItem = newStyled.li(templateObject_6$u || (templateObject_6$u = __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; });
|
|
8030
|
+
var templateObject_1$1l, templateObject_2$11, templateObject_3$T, templateObject_4$H, templateObject_5$z, templateObject_6$u;
|
|
8031
8031
|
|
|
8032
8032
|
var DropdownListIcons = function (_a) {
|
|
8033
8033
|
var items = _a.items;
|
|
@@ -8040,13 +8040,13 @@ var Dropdown = function (_a) {
|
|
|
8040
8040
|
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));
|
|
8041
8041
|
};
|
|
8042
8042
|
|
|
8043
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
8044
|
-
var DropdownLabel = newStyled.div(templateObject_2
|
|
8045
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
8046
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
8047
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
8048
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
8049
|
-
var templateObject_1$
|
|
8043
|
+
var DropdownContainer = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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"])));
|
|
8044
|
+
var DropdownLabel = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __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"])));
|
|
8045
|
+
var SizeLabel = newStyled.span(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8046
|
+
var DetailLabel = newStyled.span(templateObject_4$G || (templateObject_4$G = __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"])));
|
|
8047
|
+
var DropdownOptions = newStyled.div(templateObject_5$y || (templateObject_5$y = __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"])));
|
|
8048
|
+
var DropdownOption = newStyled.div(templateObject_6$t || (templateObject_6$t = __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"])));
|
|
8049
|
+
var templateObject_1$1k, templateObject_2$10, templateObject_3$S, templateObject_4$G, templateObject_5$y, templateObject_6$t;
|
|
8050
8050
|
|
|
8051
8051
|
var SizeDropdown = function (_a) {
|
|
8052
8052
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8069,15 +8069,15 @@ var SizeDropdown = function (_a) {
|
|
|
8069
8069
|
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));
|
|
8070
8070
|
};
|
|
8071
8071
|
|
|
8072
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
8073
|
-
var DialogDropdownWrapper2 = newStyled.div(templateObject_2
|
|
8074
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_3$
|
|
8072
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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; });
|
|
8073
|
+
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __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; });
|
|
8074
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_3$R || (templateObject_3$R = __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) {
|
|
8075
8075
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
8076
8076
|
}, function (props) {
|
|
8077
8077
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8078
8078
|
});
|
|
8079
|
-
var DialogDropdownListItem = newStyled.li(templateObject_4$
|
|
8080
|
-
var DialogDropdownLink = newStyled.a(templateObject_5$
|
|
8079
|
+
var DialogDropdownListItem = newStyled.li(templateObject_4$F || (templateObject_4$F = __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"])));
|
|
8080
|
+
var DialogDropdownLink = newStyled.a(templateObject_5$x || (templateObject_5$x = __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"])));
|
|
8081
8081
|
var DropdownDialog = function (_a) {
|
|
8082
8082
|
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;
|
|
8083
8083
|
var theme = useTheme$1();
|
|
@@ -8086,7 +8086,7 @@ var DropdownDialog = function (_a) {
|
|
|
8086
8086
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8087
8087
|
}) }), void 0) }), void 0));
|
|
8088
8088
|
};
|
|
8089
|
-
var templateObject_1$
|
|
8089
|
+
var templateObject_1$1j, templateObject_2$$, templateObject_3$R, templateObject_4$F, templateObject_5$x;
|
|
8090
8090
|
|
|
8091
8091
|
function FilteringDropdown(_a) {
|
|
8092
8092
|
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;
|
|
@@ -8119,29 +8119,29 @@ function FilteringDropdown(_a) {
|
|
|
8119
8119
|
}) }, void 0)] }), void 0));
|
|
8120
8120
|
}
|
|
8121
8121
|
|
|
8122
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
8123
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
8124
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
8125
|
-
var Container$
|
|
8122
|
+
var Title$4 = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __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; });
|
|
8123
|
+
var P$3 = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __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; });
|
|
8124
|
+
var ArrowContainer = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
8125
|
+
var Container$Y = newStyled.div(templateObject_4$E || (templateObject_4$E = __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'); });
|
|
8126
8126
|
var Accordion = function (_a) {
|
|
8127
8127
|
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;
|
|
8128
8128
|
var theme = useTheme();
|
|
8129
8129
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8130
|
-
return (jsxRuntime.jsxs(Container$
|
|
8130
|
+
return (jsxRuntime.jsxs(Container$Y, __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));
|
|
8131
8131
|
};
|
|
8132
|
-
var templateObject_1$
|
|
8133
|
-
|
|
8134
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
8135
|
-
var Header$3 = newStyled.div(templateObject_2$
|
|
8136
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
8137
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
8138
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
8139
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
8140
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
8141
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
8132
|
+
var templateObject_1$1i, templateObject_2$_, templateObject_3$Q, templateObject_4$E;
|
|
8133
|
+
|
|
8134
|
+
var SectionContent = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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; });
|
|
8135
|
+
var Header$3 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
8136
|
+
var MobileHeader = newStyled.div(templateObject_3$P || (templateObject_3$P = __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"])));
|
|
8137
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$D || (templateObject_4$D = __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"])));
|
|
8138
|
+
var H4 = newStyled.h4(templateObject_5$w || (templateObject_5$w = __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; });
|
|
8139
|
+
var FilterLink = newStyled.a(templateObject_6$s || (templateObject_6$s = __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; });
|
|
8140
|
+
var OptionContainer = newStyled.div(templateObject_7$p || (templateObject_7$p = __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'); });
|
|
8141
|
+
var ClearAll = newStyled.span(templateObject_8$i || (templateObject_8$i = __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; });
|
|
8142
8142
|
var MobileFooter = newStyled.div(templateObject_9$a || (templateObject_9$a = __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"])));
|
|
8143
8143
|
var MobileClearContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __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"])));
|
|
8144
|
-
var templateObject_1$
|
|
8144
|
+
var templateObject_1$1h, templateObject_2$Z, templateObject_3$P, templateObject_4$D, templateObject_5$w, templateObject_6$s, templateObject_7$p, templateObject_8$i, templateObject_9$a, templateObject_10$9;
|
|
8145
8145
|
|
|
8146
8146
|
var getStylesBySize$9 = function (size, theme) {
|
|
8147
8147
|
switch (size) {
|
|
@@ -8206,9 +8206,9 @@ var SelectorSecondary = function (_a) {
|
|
|
8206
8206
|
} }), id: id }, void 0));
|
|
8207
8207
|
};
|
|
8208
8208
|
|
|
8209
|
-
var UL = newStyled.ul(templateObject_1$
|
|
8210
|
-
var LI = newStyled.li(templateObject_2$
|
|
8211
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
8209
|
+
var UL = newStyled.ul(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
8210
|
+
var LI = newStyled.li(templateObject_2$Y || (templateObject_2$Y = __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; });
|
|
8211
|
+
var CloseIconContainer = newStyled.div(templateObject_3$O || (templateObject_3$O = __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"])));
|
|
8212
8212
|
var Tags = function (_a) {
|
|
8213
8213
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
8214
8214
|
var theme = useTheme();
|
|
@@ -8216,7 +8216,7 @@ var Tags = function (_a) {
|
|
|
8216
8216
|
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));
|
|
8217
8217
|
}) }), void 0));
|
|
8218
8218
|
};
|
|
8219
|
-
var templateObject_1$
|
|
8219
|
+
var templateObject_1$1g, templateObject_2$Y, templateObject_3$O;
|
|
8220
8220
|
|
|
8221
8221
|
var Filters = function (_a) {
|
|
8222
8222
|
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;
|
|
@@ -8352,8 +8352,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8352
8352
|
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));
|
|
8353
8353
|
};
|
|
8354
8354
|
|
|
8355
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
8356
|
-
var Container$
|
|
8355
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
8356
|
+
var Container$X = newStyled.div(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
8357
8357
|
var FitGuarantee = function (_a) {
|
|
8358
8358
|
var _b;
|
|
8359
8359
|
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;
|
|
@@ -8364,17 +8364,17 @@ var FitGuarantee = function (_a) {
|
|
|
8364
8364
|
console.error('Icon', iconName, 'not found');
|
|
8365
8365
|
return null;
|
|
8366
8366
|
}
|
|
8367
|
-
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$
|
|
8367
|
+
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$X, __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$X, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
8368
8368
|
margin: '0.1rem 0',
|
|
8369
8369
|
width: '100%',
|
|
8370
8370
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
8371
8371
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8372
8372
|
} }, { 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));
|
|
8373
8373
|
};
|
|
8374
|
-
var templateObject_1$
|
|
8374
|
+
var templateObject_1$1f, templateObject_2$X;
|
|
8375
8375
|
|
|
8376
|
-
var Container$
|
|
8377
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
8376
|
+
var Container$W = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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"])));
|
|
8377
|
+
var P$2 = newStyled.p(templateObject_2$W || (templateObject_2$W = __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; });
|
|
8378
8378
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8379
8379
|
border: 'none',
|
|
8380
8380
|
background: 'transparent',
|
|
@@ -8387,9 +8387,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
8387
8387
|
var FitPredictor = function (_a) {
|
|
8388
8388
|
var onClick = _a.onClick;
|
|
8389
8389
|
var theme = useTheme();
|
|
8390
|
-
return (jsxs(Container$
|
|
8390
|
+
return (jsxs(Container$W, __assign$1({ theme: theme }, { children: [jsx(Container$W, { 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));
|
|
8391
8391
|
};
|
|
8392
|
-
var templateObject_1$
|
|
8392
|
+
var templateObject_1$1e, templateObject_2$W;
|
|
8393
8393
|
|
|
8394
8394
|
var Button$8 = newStyled.button(function () { return ({
|
|
8395
8395
|
background: 'transparent',
|
|
@@ -12633,14 +12633,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12633
12633
|
return Slider;
|
|
12634
12634
|
}(React__default["default"].Component);
|
|
12635
12635
|
|
|
12636
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12636
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
12637
12637
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12638
12638
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12639
12639
|
}, function (_a) {
|
|
12640
12640
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12641
12641
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12642
12642
|
});
|
|
12643
|
-
var templateObject_1$
|
|
12643
|
+
var templateObject_1$1d;
|
|
12644
12644
|
|
|
12645
12645
|
var getStylesBySize$8 = function (size) {
|
|
12646
12646
|
// rem units
|
|
@@ -12699,7 +12699,7 @@ var SliderNavigation = function (_a) {
|
|
|
12699
12699
|
} }, { 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));
|
|
12700
12700
|
};
|
|
12701
12701
|
|
|
12702
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12702
|
+
var Image$1 = newStyled.img(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
12703
12703
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12704
12704
|
return borderRadiusVariant &&
|
|
12705
12705
|
"\n border-radius: 20px;\n ";
|
|
@@ -12717,7 +12717,7 @@ var Image$1 = newStyled.img(templateObject_1$1b || (templateObject_1$1b = __make
|
|
|
12717
12717
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12718
12718
|
: 'inherit';
|
|
12719
12719
|
});
|
|
12720
|
-
var templateObject_1$
|
|
12720
|
+
var templateObject_1$1c;
|
|
12721
12721
|
|
|
12722
12722
|
var ImageSmallPreview = function (_a) {
|
|
12723
12723
|
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;
|
|
@@ -12725,9 +12725,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12725
12725
|
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));
|
|
12726
12726
|
};
|
|
12727
12727
|
|
|
12728
|
-
var horizontalStyles = css(templateObject_1$
|
|
12729
|
-
var verticalStyles = css(templateObject_2$
|
|
12730
|
-
var Container$
|
|
12728
|
+
var horizontalStyles = css(templateObject_1$1b || (templateObject_1$1b = __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"])));
|
|
12729
|
+
var verticalStyles = css(templateObject_2$V || (templateObject_2$V = __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"])));
|
|
12730
|
+
var Container$V = newStyled.div(templateObject_3$N || (templateObject_3$N = __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) {
|
|
12731
12731
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12732
12732
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12733
12733
|
}, function (_a) {
|
|
@@ -12738,12 +12738,12 @@ var Container$U = newStyled.div(templateObject_3$M || (templateObject_3$M = __ma
|
|
|
12738
12738
|
return hasOverflowArrows &&
|
|
12739
12739
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12740
12740
|
});
|
|
12741
|
-
var Button$7 = newStyled.button(templateObject_4$
|
|
12742
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12743
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12744
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12745
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
12746
|
-
var templateObject_1$
|
|
12741
|
+
var Button$7 = newStyled.button(templateObject_4$C || (templateObject_4$C = __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"])));
|
|
12742
|
+
var ArrowsContainer = newStyled.div(templateObject_5$v || (templateObject_5$v = __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"])));
|
|
12743
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$r || (templateObject_6$r = __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"])));
|
|
12744
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$o || (templateObject_7$o = __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"])));
|
|
12745
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$h || (templateObject_8$h = __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"])));
|
|
12746
|
+
var templateObject_1$1b, templateObject_2$V, templateObject_3$N, templateObject_4$C, templateObject_5$v, templateObject_6$r, templateObject_7$o, templateObject_8$h;
|
|
12747
12747
|
|
|
12748
12748
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12749
12749
|
var loading = 'eager';
|
|
@@ -12771,7 +12771,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12771
12771
|
var element = document.querySelector(".imageListContainer");
|
|
12772
12772
|
element.scrollBy(0, 200);
|
|
12773
12773
|
};
|
|
12774
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
12774
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$V, __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: {
|
|
12775
12775
|
arrowWidth: 0.75,
|
|
12776
12776
|
arrowHeight: 1.25,
|
|
12777
12777
|
arrowPadding: 1.625,
|
|
@@ -14371,40 +14371,40 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14371
14371
|
afterZoomOut: PropTypes.func
|
|
14372
14372
|
} : {};
|
|
14373
14373
|
|
|
14374
|
-
var Container$
|
|
14374
|
+
var Container$U = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
14375
14375
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14376
14376
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14377
14377
|
});
|
|
14378
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
14378
|
+
var TopTagContainer$7 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
14379
14379
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14380
14380
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
14381
14381
|
}, function (_a) {
|
|
14382
14382
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14383
14383
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
14384
14384
|
});
|
|
14385
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
14385
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
14386
14386
|
var isCTAHidden = _a.isCTAHidden;
|
|
14387
14387
|
return (isCTAHidden ? '60px' : '120px');
|
|
14388
14388
|
});
|
|
14389
|
-
var TopRightTagWrapper = newStyled.div(templateObject_4$
|
|
14390
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_5$
|
|
14391
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$
|
|
14392
|
-
var ImageStyled = newStyled(Image$3)(templateObject_7$
|
|
14389
|
+
var TopRightTagWrapper = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14390
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14391
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$q || (templateObject_6$q = __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"])));
|
|
14392
|
+
var ImageStyled = newStyled(Image$3)(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14393
14393
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14394
14394
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14395
14395
|
});
|
|
14396
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$
|
|
14396
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14397
14397
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14398
14398
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14399
14399
|
});
|
|
14400
|
-
var templateObject_1$
|
|
14400
|
+
var templateObject_1$1a, templateObject_2$U, templateObject_3$M, templateObject_4$B, templateObject_5$u, templateObject_6$q, templateObject_7$n, templateObject_8$g;
|
|
14401
14401
|
|
|
14402
14402
|
var ImageProductSlide$1 = function (_a) {
|
|
14403
14403
|
var _b;
|
|
14404
14404
|
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;
|
|
14405
14405
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14406
14406
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
14407
|
-
return (jsxRuntime.jsxs(Container$
|
|
14407
|
+
return (jsxRuntime.jsxs(Container$U, __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: {
|
|
14408
14408
|
alt: content.alt,
|
|
14409
14409
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
14410
14410
|
loading: 'eager',
|
|
@@ -14412,8 +14412,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14412
14412
|
}, 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));
|
|
14413
14413
|
};
|
|
14414
14414
|
|
|
14415
|
-
var Container$
|
|
14416
|
-
var templateObject_1$
|
|
14415
|
+
var Container$T = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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"])));
|
|
14416
|
+
var templateObject_1$19;
|
|
14417
14417
|
|
|
14418
14418
|
var getInitialIndex = function (images, selectedValue) {
|
|
14419
14419
|
if (selectedValue) {
|
|
@@ -14439,10 +14439,10 @@ var ProductGallery = function (_a) {
|
|
|
14439
14439
|
setActiveIndex(index);
|
|
14440
14440
|
};
|
|
14441
14441
|
var selectedImage = images[activeIndex];
|
|
14442
|
-
return (jsxRuntime.jsxs(Container$
|
|
14442
|
+
return (jsxRuntime.jsxs(Container$T, { 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));
|
|
14443
14443
|
};
|
|
14444
14444
|
|
|
14445
|
-
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$
|
|
14445
|
+
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$18 || (templateObject_1$18 = __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; });
|
|
14446
14446
|
var AmazonButton = function (_a) {
|
|
14447
14447
|
var onClick = _a.onClick;
|
|
14448
14448
|
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));
|
|
@@ -14451,9 +14451,9 @@ var PaypalButton = function (_a) {
|
|
|
14451
14451
|
var onClick = _a.onClick;
|
|
14452
14452
|
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));
|
|
14453
14453
|
};
|
|
14454
|
-
var templateObject_1$
|
|
14454
|
+
var templateObject_1$18;
|
|
14455
14455
|
|
|
14456
|
-
var Container$
|
|
14456
|
+
var Container$S = newStyled.div(function (props) { return ({
|
|
14457
14457
|
height: 'auto',
|
|
14458
14458
|
textAlign: 'center',
|
|
14459
14459
|
justifyContent: 'center',
|
|
@@ -14503,12 +14503,12 @@ var IconsWithTitle = function (_a) {
|
|
|
14503
14503
|
textAlign: 'center',
|
|
14504
14504
|
lineHeight: '18px',
|
|
14505
14505
|
};
|
|
14506
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
14506
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$S, __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));
|
|
14507
14507
|
};
|
|
14508
14508
|
|
|
14509
|
-
var Container$
|
|
14510
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14511
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14509
|
+
var Container$R = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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'); });
|
|
14510
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$T || (templateObject_2$T = __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'); });
|
|
14511
|
+
var StyledTitle = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14512
14512
|
var titlePosition = _a.titlePosition;
|
|
14513
14513
|
return titlePosition == 'center' &&
|
|
14514
14514
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14516,15 +14516,15 @@ var StyledTitle = newStyled.div(templateObject_3$K || (templateObject_3$K = __ma
|
|
|
14516
14516
|
var ImageCardWithDescription = function (_a) {
|
|
14517
14517
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14518
14518
|
var isMobile = useWindowDimensions().isMobile;
|
|
14519
|
-
return (jsxRuntime.jsxs(Container$
|
|
14519
|
+
return (jsxRuntime.jsxs(Container$R, __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));
|
|
14520
14520
|
};
|
|
14521
|
-
var templateObject_1$
|
|
14521
|
+
var templateObject_1$17, templateObject_2$T, templateObject_3$L;
|
|
14522
14522
|
|
|
14523
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14523
|
+
var Label$4 = newStyled.span(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
14524
14524
|
var color = _a.color;
|
|
14525
14525
|
return color;
|
|
14526
14526
|
});
|
|
14527
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14527
|
+
var MandatoryIcon = newStyled.span(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14528
14528
|
var color = _a.color;
|
|
14529
14529
|
return color;
|
|
14530
14530
|
});
|
|
@@ -14533,7 +14533,7 @@ var InputLabel = function (_a) {
|
|
|
14533
14533
|
var theme = useTheme();
|
|
14534
14534
|
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));
|
|
14535
14535
|
};
|
|
14536
|
-
var templateObject_1$
|
|
14536
|
+
var templateObject_1$16, templateObject_2$S;
|
|
14537
14537
|
|
|
14538
14538
|
var containerByStatus = function (theme, status) {
|
|
14539
14539
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -14542,12 +14542,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14542
14542
|
return theme.colors.semantic.urgent.color;
|
|
14543
14543
|
return '';
|
|
14544
14544
|
};
|
|
14545
|
-
var Container$
|
|
14545
|
+
var Container$Q = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14546
14546
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14547
14547
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14548
14548
|
});
|
|
14549
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14550
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14549
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$R || (templateObject_2$R = __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"])));
|
|
14550
|
+
var StyledInput = newStyled.input(templateObject_3$K || (templateObject_3$K = __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) {
|
|
14551
14551
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14552
14552
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14553
14553
|
}, function (_a) {
|
|
@@ -14602,11 +14602,11 @@ var StyledInput = newStyled.input(templateObject_3$J || (templateObject_3$J = __
|
|
|
14602
14602
|
return hasValue &&
|
|
14603
14603
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14604
14604
|
});
|
|
14605
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14605
|
+
var InputWrapper = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14606
14606
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14607
14607
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14608
14608
|
});
|
|
14609
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14609
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
14610
14610
|
var theme = _a.theme;
|
|
14611
14611
|
return theme.component.input.placeholderColor;
|
|
14612
14612
|
}, function (_a) {
|
|
@@ -14619,8 +14619,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$s || (templateObject_5
|
|
|
14619
14619
|
var theme = _a.theme;
|
|
14620
14620
|
return theme.component.input.lineHeight;
|
|
14621
14621
|
});
|
|
14622
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14623
|
-
var templateObject_1$
|
|
14622
|
+
var ClearInput = newStyled.div(templateObject_6$p || (templateObject_6$p = __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"])));
|
|
14623
|
+
var templateObject_1$15, templateObject_2$R, templateObject_3$K, templateObject_4$A, templateObject_5$t, templateObject_6$p;
|
|
14624
14624
|
|
|
14625
14625
|
var BaseInput = function (_a) {
|
|
14626
14626
|
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"]);
|
|
@@ -14644,7 +14644,7 @@ var BaseInput = function (_a) {
|
|
|
14644
14644
|
}, [status]);
|
|
14645
14645
|
var hasValue = Boolean(value);
|
|
14646
14646
|
var errorMessage = customErrorMessage || (status === exports.InputValidationType.Error && required);
|
|
14647
|
-
return (jsxRuntime.jsxs(Container$
|
|
14647
|
+
return (jsxRuntime.jsxs(Container$Q, __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) {
|
|
14648
14648
|
onChange(event.target.value, event);
|
|
14649
14649
|
}, 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 () {
|
|
14650
14650
|
onChange('', { target: { value: '' } });
|
|
@@ -14665,11 +14665,11 @@ var Button$6 = function (_a) {
|
|
|
14665
14665
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14666
14666
|
};
|
|
14667
14667
|
|
|
14668
|
-
var Container$
|
|
14668
|
+
var Container$P = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
14669
14669
|
var theme = _a.theme;
|
|
14670
14670
|
return theme.component.inputCustom.input.borderRadius;
|
|
14671
14671
|
});
|
|
14672
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14672
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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) {
|
|
14673
14673
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14674
14674
|
return defaultRounded
|
|
14675
14675
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14684,23 +14684,23 @@ var Custom = function (_a) {
|
|
|
14684
14684
|
text: text,
|
|
14685
14685
|
disabled: rest.disabled,
|
|
14686
14686
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14687
|
-
return (jsxRuntime.jsx(Container$
|
|
14687
|
+
return (jsxRuntime.jsx(Container$P, __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));
|
|
14688
14688
|
};
|
|
14689
|
-
var templateObject_1$
|
|
14689
|
+
var templateObject_1$14, templateObject_2$Q;
|
|
14690
14690
|
|
|
14691
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14691
|
+
var SuccessContainer = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14692
14692
|
var size = _a.size;
|
|
14693
14693
|
return (size === 'small' ? '36px' : '');
|
|
14694
14694
|
});
|
|
14695
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14696
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14695
|
+
var SuccessMessage = newStyled.div(templateObject_2$P || (templateObject_2$P = __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"])));
|
|
14696
|
+
var SuccessText = newStyled.span(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
14697
14697
|
var Success = function (_a) {
|
|
14698
14698
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14699
14699
|
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));
|
|
14700
14700
|
};
|
|
14701
|
-
var templateObject_1$
|
|
14701
|
+
var templateObject_1$13, templateObject_2$P, templateObject_3$J;
|
|
14702
14702
|
|
|
14703
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14703
|
+
var ButtonContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
14704
14704
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14705
14705
|
return status === exports.InputValidationType.Empty &&
|
|
14706
14706
|
type === 'primary' &&
|
|
@@ -14717,16 +14717,16 @@ var BasePlusButton = function (_a) {
|
|
|
14717
14717
|
}
|
|
14718
14718
|
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));
|
|
14719
14719
|
};
|
|
14720
|
-
var templateObject_1$
|
|
14720
|
+
var templateObject_1$12;
|
|
14721
14721
|
|
|
14722
|
-
var Container$
|
|
14723
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14722
|
+
var Container$O = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14723
|
+
var IconContainer$3 = newStyled.div(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
14724
14724
|
var BasePlusIcon = function (_a) {
|
|
14725
14725
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14726
14726
|
var theme = useTheme();
|
|
14727
|
-
return (jsxRuntime.jsx(Container$
|
|
14727
|
+
return (jsxRuntime.jsx(Container$O, { 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));
|
|
14728
14728
|
};
|
|
14729
|
-
var templateObject_1$
|
|
14729
|
+
var templateObject_1$11, templateObject_2$O;
|
|
14730
14730
|
|
|
14731
14731
|
var Input$3 = {
|
|
14732
14732
|
Simple: BaseInput,
|
|
@@ -14866,21 +14866,21 @@ var Portal = function (_a) {
|
|
|
14866
14866
|
var visibleStyle = function (_a) {
|
|
14867
14867
|
var opened = _a.opened;
|
|
14868
14868
|
return opened
|
|
14869
|
-
? css(templateObject_1
|
|
14869
|
+
? css(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14870
14870
|
};
|
|
14871
14871
|
var transformStyle = function (_a) {
|
|
14872
14872
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14873
14873
|
return opened
|
|
14874
|
-
? css(templateObject_3$
|
|
14874
|
+
? css(templateObject_3$I || (templateObject_3$I = __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$z || (templateObject_4$z = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14875
14875
|
};
|
|
14876
|
-
var Container$
|
|
14876
|
+
var Container$N = newStyled.div(templateObject_6$o || (templateObject_6$o = __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) {
|
|
14877
14877
|
var width = _a.width;
|
|
14878
14878
|
return width
|
|
14879
|
-
? css(templateObject_5$
|
|
14879
|
+
? css(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14880
14880
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14881
14881
|
});
|
|
14882
14882
|
}, visibleStyle, transformStyle);
|
|
14883
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14883
|
+
var Overlay = newStyled.div(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"])), visibleStyle);
|
|
14884
14884
|
var Modal = function (_a) {
|
|
14885
14885
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d;
|
|
14886
14886
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14890,7 +14890,7 @@ var Modal = function (_a) {
|
|
|
14890
14890
|
}
|
|
14891
14891
|
close();
|
|
14892
14892
|
};
|
|
14893
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14893
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$N, __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 () {
|
|
14894
14894
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14895
14895
|
onDismiss();
|
|
14896
14896
|
} }, void 0)] }), void 0));
|
|
@@ -14921,7 +14921,7 @@ var useModal = function (id) {
|
|
|
14921
14921
|
close: close,
|
|
14922
14922
|
}); }, [close, open, opened]);
|
|
14923
14923
|
};
|
|
14924
|
-
var templateObject_1
|
|
14924
|
+
var templateObject_1$10, templateObject_2$N, templateObject_3$I, templateObject_4$z, templateObject_5$s, templateObject_6$o, templateObject_7$m;
|
|
14925
14925
|
|
|
14926
14926
|
var htmlReactParser = {exports: {}};
|
|
14927
14927
|
|
|
@@ -18702,7 +18702,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18702
18702
|
HTMLReactParser$1.attributesToProps;
|
|
18703
18703
|
HTMLReactParser$1.Element;
|
|
18704
18704
|
|
|
18705
|
-
var Bar$1 = newStyled.div(templateObject_1
|
|
18705
|
+
var Bar$1 = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
18706
18706
|
var height = _a.height;
|
|
18707
18707
|
return height || '0.5rem';
|
|
18708
18708
|
}, function (_a) {
|
|
@@ -18741,7 +18741,7 @@ var BarContainer = newStyled.div({
|
|
|
18741
18741
|
padding: '0 16px',
|
|
18742
18742
|
position: 'relative',
|
|
18743
18743
|
});
|
|
18744
|
-
var Container$
|
|
18744
|
+
var Container$M = newStyled.div(function (_a) {
|
|
18745
18745
|
var backgroundColor = _a.backgroundColor;
|
|
18746
18746
|
return ({
|
|
18747
18747
|
width: '475px',
|
|
@@ -18754,7 +18754,7 @@ var Container$L = newStyled.div(function (_a) {
|
|
|
18754
18754
|
background: backgroundColor,
|
|
18755
18755
|
});
|
|
18756
18756
|
});
|
|
18757
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18757
|
+
var MessageContainer = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18758
18758
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18759
18759
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18760
18760
|
};
|
|
@@ -18783,33 +18783,33 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18783
18783
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18784
18784
|
return (jsxRuntime.jsx(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18785
18785
|
};
|
|
18786
|
-
return (jsxRuntime.jsxs(Container$
|
|
18786
|
+
return (jsxRuntime.jsxs(Container$M, __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));
|
|
18787
18787
|
};
|
|
18788
|
-
var templateObject_1
|
|
18788
|
+
var templateObject_1$$, templateObject_2$M;
|
|
18789
18789
|
|
|
18790
|
-
var Container$
|
|
18790
|
+
var Container$L = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
18791
18791
|
var theme = _a.theme;
|
|
18792
18792
|
return theme.component.orderBar.backgroundColor;
|
|
18793
18793
|
});
|
|
18794
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18794
|
+
var H1 = newStyled.h1(templateObject_2$L || (templateObject_2$L = __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; });
|
|
18795
18795
|
var OrderBar = function (_a) {
|
|
18796
18796
|
var message = _a.message, color = _a.color;
|
|
18797
18797
|
var theme = useTheme();
|
|
18798
|
-
return (jsxRuntime.jsxs(Container$
|
|
18798
|
+
return (jsxRuntime.jsxs(Container$L, __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));
|
|
18799
18799
|
};
|
|
18800
|
-
var templateObject_1$
|
|
18801
|
-
|
|
18802
|
-
var Container$
|
|
18803
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18804
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18805
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18806
|
-
var Check = newStyled.div(templateObject_5$
|
|
18807
|
-
var IconContainer$2 = newStyled.div(templateObject_6$
|
|
18808
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18809
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
18800
|
+
var templateObject_1$_, templateObject_2$L;
|
|
18801
|
+
|
|
18802
|
+
var Container$K = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
18803
|
+
var Card$1 = newStyled.div(templateObject_2$K || (templateObject_2$K = __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"])));
|
|
18804
|
+
var Tag$1 = newStyled.div(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
18805
|
+
var Label$3 = newStyled.div(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
18806
|
+
var Check = newStyled.div(templateObject_5$r || (templateObject_5$r = __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"])));
|
|
18807
|
+
var IconContainer$2 = newStyled.div(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
18808
|
+
var IconPlaceholder = newStyled.div(templateObject_7$l || (templateObject_7$l = __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"])));
|
|
18809
|
+
var DiscountContainer = newStyled.div(templateObject_8$f || (templateObject_8$f = __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"])));
|
|
18810
18810
|
var PackSelector = function (_a) {
|
|
18811
18811
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18812
|
-
return (jsxRuntime.jsx(Container$
|
|
18812
|
+
return (jsxRuntime.jsx(Container$K, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18813
18813
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18814
18814
|
}) }), void 0));
|
|
18815
18815
|
};
|
|
@@ -18836,14 +18836,14 @@ var PackCard = function (_a) {
|
|
|
18836
18836
|
currency: currencyCode || 'USD',
|
|
18837
18837
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18838
18838
|
};
|
|
18839
|
-
var templateObject_1$
|
|
18839
|
+
var templateObject_1$Z, templateObject_2$K, templateObject_3$H, templateObject_4$y, templateObject_5$r, templateObject_6$n, templateObject_7$l, templateObject_8$f;
|
|
18840
18840
|
|
|
18841
|
-
var Container$
|
|
18842
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18843
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18841
|
+
var Container$J = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
18842
|
+
var IconContainer$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
18843
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18844
18844
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18845
18845
|
}));
|
|
18846
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18846
|
+
var PageNumber = newStyled.span(templateObject_4$x || (templateObject_4$x = __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) {
|
|
18847
18847
|
var bold = _a.bold;
|
|
18848
18848
|
return (bold ? '700' : '500');
|
|
18849
18849
|
}, function (_a) {
|
|
@@ -18860,7 +18860,7 @@ var PageNumber = newStyled.span(templateObject_4$w || (templateObject_4$w = __ma
|
|
|
18860
18860
|
var background = _a.background;
|
|
18861
18861
|
return background || 'unset';
|
|
18862
18862
|
});
|
|
18863
|
-
var templateObject_1$
|
|
18863
|
+
var templateObject_1$Y, templateObject_2$J, templateObject_3$G, templateObject_4$x;
|
|
18864
18864
|
|
|
18865
18865
|
var Pagination = function (_a) {
|
|
18866
18866
|
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;
|
|
@@ -18906,7 +18906,7 @@ var Pagination = function (_a) {
|
|
|
18906
18906
|
}
|
|
18907
18907
|
return pages;
|
|
18908
18908
|
}, [from, page, showReducedPages, to]);
|
|
18909
|
-
return (jsxRuntime.jsxs(Container$
|
|
18909
|
+
return (jsxRuntime.jsxs(Container$J, __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));
|
|
18910
18910
|
};
|
|
18911
18911
|
|
|
18912
18912
|
var PaginatorBlog = function (_a) {
|
|
@@ -18920,12 +18920,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18920
18920
|
setPage(page);
|
|
18921
18921
|
onChange(page);
|
|
18922
18922
|
};
|
|
18923
|
-
return (jsxRuntime.jsxs(Container$
|
|
18923
|
+
return (jsxRuntime.jsxs(Container$J, __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
|
|
18924
18924
|
? theme.colors.shades['white'].color
|
|
18925
18925
|
: 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));
|
|
18926
18926
|
};
|
|
18927
18927
|
|
|
18928
|
-
var Container$
|
|
18928
|
+
var Container$I = newStyled.div(templateObject_1$X || (templateObject_1$X = __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) {
|
|
18929
18929
|
var width = _a.width;
|
|
18930
18930
|
return width;
|
|
18931
18931
|
}, function (_a) {
|
|
@@ -18941,14 +18941,14 @@ var Container$H = newStyled.div(templateObject_1$W || (templateObject_1$W = __ma
|
|
|
18941
18941
|
var PaymentMethod = function (_a) {
|
|
18942
18942
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18943
18943
|
var theme = useTheme();
|
|
18944
|
-
return (jsxRuntime.jsx(Container$
|
|
18944
|
+
return (jsxRuntime.jsx(Container$I, __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));
|
|
18945
18945
|
};
|
|
18946
|
-
var templateObject_1$
|
|
18946
|
+
var templateObject_1$X;
|
|
18947
18947
|
|
|
18948
|
-
var Container$
|
|
18948
|
+
var Container$H = newStyled.div(templateObject_1$W || (templateObject_1$W = __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"])));
|
|
18949
18949
|
var IMAGE_WIDTH = '63px';
|
|
18950
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18951
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18950
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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);
|
|
18951
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$F || (templateObject_3$F = __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({
|
|
18952
18952
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18953
18953
|
}), IMAGE_WIDTH);
|
|
18954
18954
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18971,7 +18971,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18971
18971
|
margin: margin,
|
|
18972
18972
|
});
|
|
18973
18973
|
});
|
|
18974
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18974
|
+
var PriceContainer = newStyled.div(templateObject_4$w || (templateObject_4$w = __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) {
|
|
18975
18975
|
var withTag = _a.withTag; _a.theme;
|
|
18976
18976
|
return withTag
|
|
18977
18977
|
? mediaQueries({
|
|
@@ -18980,9 +18980,9 @@ var PriceContainer = newStyled.div(templateObject_4$v || (templateObject_4$v = _
|
|
|
18980
18980
|
})
|
|
18981
18981
|
: 'justify-content: end';
|
|
18982
18982
|
});
|
|
18983
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18984
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18985
|
-
var Gift = newStyled.span(templateObject_7$
|
|
18983
|
+
var Quantity = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
18984
|
+
var StyledSpan = newStyled.span(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18985
|
+
var Gift = newStyled.span(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"], ["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"])), function (_a) {
|
|
18986
18986
|
var theme = _a.theme;
|
|
18987
18987
|
return theme.colors.semantic.urgent.color;
|
|
18988
18988
|
});
|
|
@@ -18990,9 +18990,9 @@ var SimpleOrderItem = function (_a) {
|
|
|
18990
18990
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18991
18991
|
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;
|
|
18992
18992
|
var theme = useTheme();
|
|
18993
|
-
return (jsxRuntime.jsxs(Container$
|
|
18993
|
+
return (jsxRuntime.jsxs(Container$H, __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));
|
|
18994
18994
|
};
|
|
18995
|
-
var templateObject_1$
|
|
18995
|
+
var templateObject_1$W, templateObject_2$I, templateObject_3$F, templateObject_4$w, templateObject_5$q, templateObject_6$m, templateObject_7$k;
|
|
18996
18996
|
|
|
18997
18997
|
var P$1 = newStyled.p(function (_a) {
|
|
18998
18998
|
var color = _a.color;
|
|
@@ -19006,7 +19006,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
19006
19006
|
margin: '0.938rem 4.188rem',
|
|
19007
19007
|
});
|
|
19008
19008
|
});
|
|
19009
|
-
var Bar = newStyled.div(templateObject_1$
|
|
19009
|
+
var Bar = newStyled.div(templateObject_1$V || (templateObject_1$V = __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) {
|
|
19010
19010
|
var height = _a.height;
|
|
19011
19011
|
return height || '0.5rem';
|
|
19012
19012
|
}, function (_a) {
|
|
@@ -19035,7 +19035,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
19035
19035
|
position: 'absolute',
|
|
19036
19036
|
});
|
|
19037
19037
|
});
|
|
19038
|
-
var Container$
|
|
19038
|
+
var Container$G = newStyled.div(function (_a) {
|
|
19039
19039
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
19040
19040
|
return ({
|
|
19041
19041
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -19049,14 +19049,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
19049
19049
|
var ProgressBar = function (_a) {
|
|
19050
19050
|
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;
|
|
19051
19051
|
var theme = useTheme();
|
|
19052
|
-
return (jsxRuntime.jsxs(Container$
|
|
19052
|
+
return (jsxRuntime.jsxs(Container$G, __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));
|
|
19053
19053
|
};
|
|
19054
|
-
var templateObject_1$
|
|
19054
|
+
var templateObject_1$V;
|
|
19055
19055
|
|
|
19056
|
-
var Container$
|
|
19057
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19058
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19059
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19056
|
+
var Container$F = newStyled.div(templateObject_1$U || (templateObject_1$U = __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; });
|
|
19057
|
+
var Item$1 = newStyled.span(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
19058
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
19059
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$v || (templateObject_4$v = __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)'; });
|
|
19060
19060
|
var QuantityPicker = function (_a) {
|
|
19061
19061
|
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;
|
|
19062
19062
|
var theme = useTheme();
|
|
@@ -19079,9 +19079,9 @@ var QuantityPicker = function (_a) {
|
|
|
19079
19079
|
return clamp(value);
|
|
19080
19080
|
});
|
|
19081
19081
|
}, [value, clamp]);
|
|
19082
|
-
return (jsxRuntime.jsxs(Container$
|
|
19082
|
+
return (jsxRuntime.jsxs(Container$F, __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));
|
|
19083
19083
|
};
|
|
19084
|
-
var templateObject_1$
|
|
19084
|
+
var templateObject_1$U, templateObject_2$H, templateObject_3$E, templateObject_4$v;
|
|
19085
19085
|
|
|
19086
19086
|
/* base styles & size variants */
|
|
19087
19087
|
var CustomRadioStyles$1 = {
|
|
@@ -19150,9 +19150,9 @@ var ContainerStyles$1 = {
|
|
|
19150
19150
|
},
|
|
19151
19151
|
};
|
|
19152
19152
|
|
|
19153
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19154
|
-
var Container$
|
|
19155
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19153
|
+
var Wrapper$3 = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19154
|
+
var Container$E = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19155
|
+
var Input$2 = newStyled.input(templateObject_2$G || (templateObject_2$G = __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) {
|
|
19156
19156
|
var disabled = _a.disabled;
|
|
19157
19157
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19158
19158
|
});
|
|
@@ -19160,7 +19160,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19160
19160
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19161
19161
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19162
19162
|
]; });
|
|
19163
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19163
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
19164
19164
|
var RadioPrimary = function (_a) {
|
|
19165
19165
|
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;
|
|
19166
19166
|
var theme = useTheme();
|
|
@@ -19168,9 +19168,9 @@ var RadioPrimary = function (_a) {
|
|
|
19168
19168
|
var value = event.currentTarget.value;
|
|
19169
19169
|
onChange({ value: value, label: label });
|
|
19170
19170
|
};
|
|
19171
|
-
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
19171
|
+
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$E, __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));
|
|
19172
19172
|
};
|
|
19173
|
-
var templateObject_1$
|
|
19173
|
+
var templateObject_1$T, templateObject_2$G, templateObject_3$D;
|
|
19174
19174
|
|
|
19175
19175
|
var RadioGroupInput = function (_a) {
|
|
19176
19176
|
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;
|
|
@@ -19249,9 +19249,9 @@ var ContainerStyles = {
|
|
|
19249
19249
|
},
|
|
19250
19250
|
};
|
|
19251
19251
|
|
|
19252
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19253
|
-
var Container$
|
|
19254
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19252
|
+
var Wrapper$2 = newStyled.div(templateObject_1$S || (templateObject_1$S = __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"])));
|
|
19253
|
+
var Container$D = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19254
|
+
var Input$1 = newStyled.input(templateObject_2$F || (templateObject_2$F = __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) {
|
|
19255
19255
|
var disabled = _a.disabled;
|
|
19256
19256
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19257
19257
|
});
|
|
@@ -19259,7 +19259,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19259
19259
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19260
19260
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19261
19261
|
]; });
|
|
19262
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19262
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19263
19263
|
var theme = _a.theme;
|
|
19264
19264
|
return theme.component.radio.textSize;
|
|
19265
19265
|
}, function (_a) {
|
|
@@ -19273,9 +19273,9 @@ var ClubRadioInput = function (_a) {
|
|
|
19273
19273
|
var value = event.currentTarget.value;
|
|
19274
19274
|
onChange({ value: value, label: label });
|
|
19275
19275
|
};
|
|
19276
|
-
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$
|
|
19276
|
+
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$D, __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));
|
|
19277
19277
|
};
|
|
19278
|
-
var templateObject_1$
|
|
19278
|
+
var templateObject_1$S, templateObject_2$F, templateObject_3$C;
|
|
19279
19279
|
|
|
19280
19280
|
var ClubRadioGroupInput = function (_a) {
|
|
19281
19281
|
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;
|
|
@@ -19303,14 +19303,14 @@ function formatDate(date, format) {
|
|
|
19303
19303
|
}
|
|
19304
19304
|
}
|
|
19305
19305
|
|
|
19306
|
-
var Container$
|
|
19307
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19308
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19309
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19310
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19311
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19312
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19313
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
19306
|
+
var Container$C = newStyled.div(templateObject_1$R || (templateObject_1$R = __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"])));
|
|
19307
|
+
var Content$1 = newStyled.div(templateObject_2$E || (templateObject_2$E = __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"])));
|
|
19308
|
+
var StarsContent = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19309
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$u || (templateObject_4$u = __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"])));
|
|
19310
|
+
var DateText$1 = newStyled.span(templateObject_5$p || (templateObject_5$p = __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"])));
|
|
19311
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
19312
|
+
var VerifiedText = newStyled.h1(templateObject_7$j || (templateObject_7$j = __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"])));
|
|
19313
|
+
var ReviewTitle$1 = newStyled.h2(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
19314
19314
|
var ReviewDescription = newStyled.div(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
19315
19315
|
var ImageContainer$2 = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
19316
19316
|
var ImageWrapper$3 = newStyled(Image$3)(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
@@ -19341,21 +19341,21 @@ var Review$1 = function (_a) {
|
|
|
19341
19341
|
}
|
|
19342
19342
|
}
|
|
19343
19343
|
}, [opened]);
|
|
19344
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
19344
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$C, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19345
19345
|
(!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));
|
|
19346
19346
|
};
|
|
19347
|
-
var templateObject_1$
|
|
19347
|
+
var templateObject_1$R, templateObject_2$E, templateObject_3$B, templateObject_4$u, templateObject_5$p, templateObject_6$l, templateObject_7$j, templateObject_8$e, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, 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;
|
|
19348
19348
|
|
|
19349
19349
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19350
19350
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19351
|
-
var Container$
|
|
19352
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19353
|
-
var Content = newStyled.div(templateObject_3$
|
|
19354
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19355
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19356
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19357
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19358
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
19351
|
+
var Container$B = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
19352
|
+
var Heading = newStyled.div(templateObject_2$D || (templateObject_2$D = __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"])));
|
|
19353
|
+
var Content = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19354
|
+
var ReviewContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19355
|
+
var DateText = newStyled.span(templateObject_5$o || (templateObject_5$o = __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"])));
|
|
19356
|
+
var VariantText = newStyled.div(templateObject_6$k || (templateObject_6$k = __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"])));
|
|
19357
|
+
var ReviewerName = newStyled.h2(templateObject_7$i || (templateObject_7$i = __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"])));
|
|
19358
|
+
var ReviewTitle = newStyled.h3(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19359
19359
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
19360
19360
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
19361
19361
|
var ImagesContainer = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
@@ -19390,7 +19390,7 @@ var Review = function (_a) {
|
|
|
19390
19390
|
});
|
|
19391
19391
|
};
|
|
19392
19392
|
}, [randomId]);
|
|
19393
|
-
return (jsxRuntime.jsxs(Container$
|
|
19393
|
+
return (jsxRuntime.jsxs(Container$B, { 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: {
|
|
19394
19394
|
__html: showMoreMobile
|
|
19395
19395
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19396
19396
|
: description,
|
|
@@ -19400,15 +19400,15 @@ var Review = function (_a) {
|
|
|
19400
19400
|
: description,
|
|
19401
19401
|
} }, 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));
|
|
19402
19402
|
};
|
|
19403
|
-
var templateObject_1$
|
|
19404
|
-
|
|
19405
|
-
var Container$
|
|
19406
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19407
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19408
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19409
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19410
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19411
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
19403
|
+
var templateObject_1$Q, templateObject_2$D, templateObject_3$A, templateObject_4$t, templateObject_5$o, templateObject_6$k, templateObject_7$i, templateObject_8$d, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19404
|
+
|
|
19405
|
+
var Container$A = newStyled.div(templateObject_1$P || (templateObject_1$P = __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"])));
|
|
19406
|
+
var ReviewsContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __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"])));
|
|
19407
|
+
var ReviewsCount = newStyled.div(templateObject_3$z || (templateObject_3$z = __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"])));
|
|
19408
|
+
var ReviewsStars = newStyled.div(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
19409
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
19410
|
+
var ReviewsImages = newStyled.div(templateObject_6$j || (templateObject_6$j = __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"])));
|
|
19411
|
+
var SummaryItem = newStyled.div(templateObject_7$h || (templateObject_7$h = __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) {
|
|
19412
19412
|
var backgroundUrl = _a.backgroundUrl;
|
|
19413
19413
|
return "url(".concat(backgroundUrl, ")");
|
|
19414
19414
|
});
|
|
@@ -19416,25 +19416,25 @@ var ReviewsHeader = function (_a) {
|
|
|
19416
19416
|
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;
|
|
19417
19417
|
var starsNumber = 5;
|
|
19418
19418
|
var theme = useTheme();
|
|
19419
|
-
return (jsxRuntime.jsxs(Container$
|
|
19419
|
+
return (jsxRuntime.jsxs(Container$A, { 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));
|
|
19420
19420
|
};
|
|
19421
|
-
var templateObject_1$
|
|
19421
|
+
var templateObject_1$P, templateObject_2$C, templateObject_3$z, templateObject_4$s, templateObject_5$n, templateObject_6$j, templateObject_7$h;
|
|
19422
19422
|
|
|
19423
|
-
var Container$
|
|
19424
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
19423
|
+
var Container$z = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
19424
|
+
var Text$1 = newStyled.p(templateObject_2$B || (templateObject_2$B = __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; });
|
|
19425
19425
|
var ScrollToTop = function (_a) {
|
|
19426
19426
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19427
19427
|
var theme = useTheme();
|
|
19428
19428
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19429
|
-
return (jsxRuntime.jsxs(Container$
|
|
19429
|
+
return (jsxRuntime.jsxs(Container$z, __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));
|
|
19430
19430
|
};
|
|
19431
|
-
var templateObject_1$
|
|
19431
|
+
var templateObject_1$O, templateObject_2$B;
|
|
19432
19432
|
|
|
19433
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19433
|
+
var Button$5 = newStyled.button(templateObject_1$N || (templateObject_1$N = __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({
|
|
19434
19434
|
right: ['1rem', '7.75rem'],
|
|
19435
19435
|
top: ['0.75rem', '0.75rem'],
|
|
19436
19436
|
}));
|
|
19437
|
-
var templateObject_1$
|
|
19437
|
+
var templateObject_1$N;
|
|
19438
19438
|
|
|
19439
19439
|
var ClearButton = function (_a) {
|
|
19440
19440
|
var onClick = _a.onClick;
|
|
@@ -19442,7 +19442,7 @@ var ClearButton = function (_a) {
|
|
|
19442
19442
|
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));
|
|
19443
19443
|
};
|
|
19444
19444
|
|
|
19445
|
-
var Container$
|
|
19445
|
+
var Container$y = newStyled.div({
|
|
19446
19446
|
display: 'flex',
|
|
19447
19447
|
justifyContent: 'center',
|
|
19448
19448
|
padding: '1rem',
|
|
@@ -19450,10 +19450,10 @@ var Container$x = newStyled.div({
|
|
|
19450
19450
|
|
|
19451
19451
|
var Footer = function (_a) {
|
|
19452
19452
|
var text = _a.text, onClick = _a.onClick;
|
|
19453
|
-
return (jsxRuntime.jsx(Container$
|
|
19453
|
+
return (jsxRuntime.jsx(Container$y, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19454
19454
|
};
|
|
19455
19455
|
|
|
19456
|
-
var Container$
|
|
19456
|
+
var Container$x = newStyled.div(templateObject_1$M || (templateObject_1$M = __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({
|
|
19457
19457
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19458
19458
|
}));
|
|
19459
19459
|
var Description = newStyled.div({
|
|
@@ -19467,20 +19467,20 @@ var Description = newStyled.div({
|
|
|
19467
19467
|
textAlign: 'start',
|
|
19468
19468
|
},
|
|
19469
19469
|
});
|
|
19470
|
-
var templateObject_1$
|
|
19470
|
+
var templateObject_1$M;
|
|
19471
19471
|
|
|
19472
19472
|
var ProductItem = function (_a) {
|
|
19473
19473
|
var _b;
|
|
19474
19474
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19475
19475
|
var theme = useTheme();
|
|
19476
|
-
return (jsxRuntime.jsxs(Container$
|
|
19476
|
+
return (jsxRuntime.jsxs(Container$x, __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));
|
|
19477
19477
|
};
|
|
19478
19478
|
|
|
19479
19479
|
var OptionsList = newStyled.ul({
|
|
19480
19480
|
margin: '0px',
|
|
19481
19481
|
padding: '0px',
|
|
19482
19482
|
});
|
|
19483
|
-
var OptionItem = newStyled.li(templateObject_1$
|
|
19483
|
+
var OptionItem = newStyled.li(templateObject_1$L || (templateObject_1$L = __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({
|
|
19484
19484
|
padding: [0, '0rem 1rem'],
|
|
19485
19485
|
borderRadius: [0, '0.5rem'],
|
|
19486
19486
|
}));
|
|
@@ -19492,20 +19492,20 @@ var Anchor = newStyled.a({
|
|
|
19492
19492
|
padding: 0,
|
|
19493
19493
|
textDecoration: 'none',
|
|
19494
19494
|
});
|
|
19495
|
-
var Container$
|
|
19495
|
+
var Container$w = newStyled.div(templateObject_2$A || (templateObject_2$A = __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({
|
|
19496
19496
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19497
19497
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19498
19498
|
borderRadius: ['0', '0.5rem'],
|
|
19499
19499
|
}));
|
|
19500
|
-
var Header$2 = newStyled.div(templateObject_3$
|
|
19500
|
+
var Header$2 = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mediaQueries({
|
|
19501
19501
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19502
19502
|
}));
|
|
19503
|
-
var templateObject_1$
|
|
19503
|
+
var templateObject_1$L, templateObject_2$A, templateObject_3$y;
|
|
19504
19504
|
|
|
19505
19505
|
var ResultsPanel = function (_a) {
|
|
19506
19506
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19507
19507
|
var theme = useTheme();
|
|
19508
|
-
return (jsxRuntime.jsxs(Container$
|
|
19508
|
+
return (jsxRuntime.jsxs(Container$w, __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) {
|
|
19509
19509
|
var optionUrl = _a.optionUrl, price = _a.price, src = _a.src, title = _a.title;
|
|
19510
19510
|
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));
|
|
19511
19511
|
}) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
@@ -19519,8 +19519,8 @@ var SearchIconContainer = newStyled.div({
|
|
|
19519
19519
|
background: 'white',
|
|
19520
19520
|
alignSelf: 'center',
|
|
19521
19521
|
});
|
|
19522
|
-
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19523
|
-
var templateObject_1$
|
|
19522
|
+
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
19523
|
+
var templateObject_1$K;
|
|
19524
19524
|
|
|
19525
19525
|
var SearchControl = function (_a) {
|
|
19526
19526
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
@@ -19566,7 +19566,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19566
19566
|
},
|
|
19567
19567
|
},
|
|
19568
19568
|
}); });
|
|
19569
|
-
var Container$
|
|
19569
|
+
var Container$v = newStyled.div({
|
|
19570
19570
|
position: 'relative',
|
|
19571
19571
|
display: 'flex',
|
|
19572
19572
|
});
|
|
@@ -19621,7 +19621,7 @@ var SearchBar = function (_a) {
|
|
|
19621
19621
|
if (e.cancelable) {
|
|
19622
19622
|
e.preventDefault();
|
|
19623
19623
|
}
|
|
19624
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
19624
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$v, __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) {
|
|
19625
19625
|
if (e.key === 'Enter') {
|
|
19626
19626
|
if (e.cancelable) {
|
|
19627
19627
|
e.preventDefault();
|
|
@@ -19632,21 +19632,21 @@ var SearchBar = function (_a) {
|
|
|
19632
19632
|
} }, 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));
|
|
19633
19633
|
};
|
|
19634
19634
|
|
|
19635
|
-
var Container$
|
|
19636
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19637
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19638
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19639
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19640
|
-
var templateObject_1$
|
|
19635
|
+
var Container$u = newStyled.div(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
19636
|
+
var BackArrow = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19637
|
+
var BoldSpan = newStyled.span(templateObject_3$x || (templateObject_3$x = __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"])));
|
|
19638
|
+
var NormalSpan = newStyled.span(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
19639
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$m || (templateObject_5$m = __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"])));
|
|
19640
|
+
var templateObject_1$J, templateObject_2$z, templateObject_3$x, templateObject_4$r, templateObject_5$m;
|
|
19641
19641
|
|
|
19642
19642
|
var SearchNavigation = function (_a) {
|
|
19643
19643
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19644
|
-
return (jsxRuntime.jsxs(Container$
|
|
19644
|
+
return (jsxRuntime.jsxs(Container$u, { 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) {
|
|
19645
19645
|
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));
|
|
19646
19646
|
}) }, void 0)] }, void 0));
|
|
19647
19647
|
};
|
|
19648
19648
|
|
|
19649
|
-
var Container$
|
|
19649
|
+
var Container$t = newStyled.div(templateObject_1$I || (templateObject_1$I = __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) {
|
|
19650
19650
|
var alignCenter = _a.alignCenter;
|
|
19651
19651
|
return alignCenter &&
|
|
19652
19652
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19656,26 +19656,26 @@ var Container$s = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
|
|
|
19656
19656
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19657
19657
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19658
19658
|
});
|
|
19659
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19660
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19659
|
+
var TitleText = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
19660
|
+
var BannerText = newStyled.div(templateObject_3$w || (templateObject_3$w = __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"])));
|
|
19661
19661
|
var ShortBanner = function (_a) {
|
|
19662
19662
|
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;
|
|
19663
19663
|
var theme = useTheme();
|
|
19664
|
-
return (jsxRuntime.jsxs(Container$
|
|
19664
|
+
return (jsxRuntime.jsxs(Container$t, __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));
|
|
19665
19665
|
};
|
|
19666
|
-
var templateObject_1$
|
|
19667
|
-
|
|
19668
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19669
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19670
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19671
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19672
|
-
var TopLabel$1 = newStyled(Label$2)(templateObject_5$
|
|
19673
|
-
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$
|
|
19674
|
-
var Container$
|
|
19675
|
-
var LabelText$1 = newStyled('span')(templateObject_8$
|
|
19666
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$w;
|
|
19667
|
+
|
|
19668
|
+
var TableElement$3 = newStyled.table(templateObject_1$H || (templateObject_1$H = __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; });
|
|
19669
|
+
var TableCell$3 = newStyled.td(templateObject_2$x || (templateObject_2$x = __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; });
|
|
19670
|
+
var TableHead$3 = newStyled.th(templateObject_3$v || (templateObject_3$v = __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; });
|
|
19671
|
+
var Label$2 = newStyled('div')(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
19672
|
+
var TopLabel$1 = newStyled(Label$2)(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19673
|
+
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19674
|
+
var Container$s = newStyled('div')(templateObject_7$g || (templateObject_7$g = __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"])));
|
|
19675
|
+
var LabelText$1 = newStyled('span')(templateObject_8$c || (templateObject_8$c = __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"])));
|
|
19676
19676
|
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __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"])));
|
|
19677
19677
|
var TableRow$3 = newStyled.tr(templateObject_10$6 || (templateObject_10$6 = __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; });
|
|
19678
|
-
var templateObject_1$
|
|
19678
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$v, templateObject_4$q, templateObject_5$l, templateObject_6$i, templateObject_7$g, templateObject_8$c, templateObject_9$7, templateObject_10$6;
|
|
19679
19679
|
|
|
19680
19680
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19681
19681
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19711,21 +19711,21 @@ var SizeChartTable = function (_a) {
|
|
|
19711
19711
|
var theme = useTheme();
|
|
19712
19712
|
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];
|
|
19713
19713
|
var isMultilabel = xLabel && yLabel;
|
|
19714
|
-
return (jsxRuntime.jsxs(Container$
|
|
19714
|
+
return (jsxRuntime.jsxs(Container$s, { 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: {
|
|
19715
19715
|
backgroundColor: getCellColor$2(index, cell),
|
|
19716
19716
|
}, 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));
|
|
19717
19717
|
};
|
|
19718
19718
|
|
|
19719
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19720
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19721
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19722
|
-
var TableRow$2 = newStyled.tr(templateObject_4$
|
|
19719
|
+
var TableElement$2 = newStyled.table(templateObject_1$G || (templateObject_1$G = __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; });
|
|
19720
|
+
var TableCell$2 = newStyled.td(templateObject_2$w || (templateObject_2$w = __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; });
|
|
19721
|
+
var TableHead$2 = newStyled.th(templateObject_3$u || (templateObject_3$u = __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; });
|
|
19722
|
+
var TableRow$2 = newStyled.tr(templateObject_4$p || (templateObject_4$p = __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; });
|
|
19723
19723
|
var SizeTable = function (_a) {
|
|
19724
19724
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19725
19725
|
var theme = useTheme();
|
|
19726
19726
|
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));
|
|
19727
19727
|
};
|
|
19728
|
-
var templateObject_1$
|
|
19728
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$u, templateObject_4$p;
|
|
19729
19729
|
|
|
19730
19730
|
var getStylesBySize$7 = function (size) {
|
|
19731
19731
|
switch (size) {
|
|
@@ -19752,7 +19752,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19752
19752
|
} });
|
|
19753
19753
|
};
|
|
19754
19754
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19755
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19755
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$F || (templateObject_1$F = __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));
|
|
19756
19756
|
};
|
|
19757
19757
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19758
19758
|
if (disabled)
|
|
@@ -19768,23 +19768,23 @@ var TextButton = function (_a) {
|
|
|
19768
19768
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19769
19769
|
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));
|
|
19770
19770
|
};
|
|
19771
|
-
var templateObject_1$
|
|
19771
|
+
var templateObject_1$F;
|
|
19772
19772
|
|
|
19773
|
-
var Container$
|
|
19774
|
-
var P = newStyled.p(templateObject_2$
|
|
19775
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19773
|
+
var Container$r = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
19774
|
+
var P = newStyled.p(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n margin: 0 0 0 10px;\n"], ["\n margin: 0 0 0 10px;\n"])));
|
|
19775
|
+
var PercentageSpan = newStyled.span(templateObject_3$t || (templateObject_3$t = __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"])));
|
|
19776
19776
|
var SizeFitGuide = function (_a) {
|
|
19777
19777
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19778
|
-
return (jsxRuntime.jsxs(Container$
|
|
19778
|
+
return (jsxRuntime.jsxs(Container$r, { 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));
|
|
19779
19779
|
};
|
|
19780
|
-
var templateObject_1$
|
|
19780
|
+
var templateObject_1$E, templateObject_2$v, templateObject_3$t;
|
|
19781
19781
|
|
|
19782
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19782
|
+
var ButtonsContainer = newStyled.div(templateObject_1$D || (templateObject_1$D = __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) {
|
|
19783
19783
|
var inline = _a.inline;
|
|
19784
19784
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19785
19785
|
});
|
|
19786
|
-
var Row = newStyled.div(templateObject_2$
|
|
19787
|
-
var templateObject_1$
|
|
19786
|
+
var Row = newStyled.div(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
19787
|
+
var templateObject_1$D, templateObject_2$u;
|
|
19788
19788
|
|
|
19789
19789
|
var SizeSelector = function (_a) {
|
|
19790
19790
|
var _b;
|
|
@@ -19806,7 +19806,7 @@ var SizeSelector = function (_a) {
|
|
|
19806
19806
|
}) }), void 0)] }), void 0));
|
|
19807
19807
|
};
|
|
19808
19808
|
|
|
19809
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19809
|
+
var TabContainer = newStyled.div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
19810
19810
|
var titleSize = _a.titleSize;
|
|
19811
19811
|
return titleSize;
|
|
19812
19812
|
}, function (_a) {
|
|
@@ -19823,18 +19823,18 @@ var Tab = function (_a) {
|
|
|
19823
19823
|
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;
|
|
19824
19824
|
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));
|
|
19825
19825
|
};
|
|
19826
|
-
var templateObject_1$
|
|
19826
|
+
var templateObject_1$C;
|
|
19827
19827
|
|
|
19828
|
-
var Container$
|
|
19829
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19828
|
+
var Container$q = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19829
|
+
var TabList = newStyled.div(templateObject_2$t || (templateObject_2$t = __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) {
|
|
19830
19830
|
var backgroundColor = _a.backgroundColor;
|
|
19831
19831
|
return backgroundColor;
|
|
19832
19832
|
}, function (_a) {
|
|
19833
19833
|
var borderColor = _a.borderColor;
|
|
19834
19834
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19835
19835
|
});
|
|
19836
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19837
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19836
|
+
var TabContent = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19837
|
+
var TabSeparator = newStyled.div(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
19838
19838
|
var Tabs = function (_a) {
|
|
19839
19839
|
var _b;
|
|
19840
19840
|
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;
|
|
@@ -19843,16 +19843,16 @@ var Tabs = function (_a) {
|
|
|
19843
19843
|
return null;
|
|
19844
19844
|
}
|
|
19845
19845
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19846
|
-
return (jsxRuntime.jsxs(Container$
|
|
19846
|
+
return (jsxRuntime.jsxs(Container$q, __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));
|
|
19847
19847
|
};
|
|
19848
|
-
var templateObject_1$
|
|
19848
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$s, templateObject_4$o;
|
|
19849
19849
|
|
|
19850
|
-
var Container$
|
|
19850
|
+
var Container$p = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
19851
19851
|
var Tag = function (_a) {
|
|
19852
19852
|
var text = _a.text, className = _a.className;
|
|
19853
|
-
return jsxRuntime.jsx(Container$
|
|
19853
|
+
return jsxRuntime.jsx(Container$p, __assign$1({ className: className }, { children: text }), void 0);
|
|
19854
19854
|
};
|
|
19855
|
-
var templateObject_1$
|
|
19855
|
+
var templateObject_1$A;
|
|
19856
19856
|
|
|
19857
19857
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19858
19858
|
switch (size) {
|
|
@@ -19965,9 +19965,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19965
19965
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19966
19966
|
};
|
|
19967
19967
|
|
|
19968
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
19969
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
19970
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19968
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
19969
|
+
var VideoOverlay$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
19970
|
+
var FullscreenVideo = newStyled.div(templateObject_3$r || (templateObject_3$r = __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"])));
|
|
19971
19971
|
var ImageVideo = function (_a) {
|
|
19972
19972
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19973
19973
|
var video = React$2.useRef(null);
|
|
@@ -19987,12 +19987,12 @@ var ImageVideo = function (_a) {
|
|
|
19987
19987
|
height: '100%',
|
|
19988
19988
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19989
19989
|
};
|
|
19990
|
-
var templateObject_1$
|
|
19990
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$r;
|
|
19991
19991
|
|
|
19992
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19993
|
-
var ContainerMobile = css(templateObject_2$
|
|
19994
|
-
var Container$
|
|
19995
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19992
|
+
var ContainerDesktop = css(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
19993
|
+
var ContainerMobile = css(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
19994
|
+
var Container$o = newStyled.div(templateObject_3$q || (templateObject_3$q = __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);
|
|
19995
|
+
var TextContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
19996
19996
|
var TextWithImage = function (_a) {
|
|
19997
19997
|
var _b, _c, _d, _e;
|
|
19998
19998
|
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"]);
|
|
@@ -20012,7 +20012,7 @@ var TextWithImage = function (_a) {
|
|
|
20012
20012
|
// @ts-ignore
|
|
20013
20013
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
20014
20014
|
};
|
|
20015
|
-
return (jsxs(Container$
|
|
20015
|
+
return (jsxs(Container$o, __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: {
|
|
20016
20016
|
backgroundColor: props.btnBGColor,
|
|
20017
20017
|
color: '#ffffff',
|
|
20018
20018
|
border: props.btnBGColor,
|
|
@@ -20022,18 +20022,18 @@ var TextWithImage = function (_a) {
|
|
|
20022
20022
|
},
|
|
20023
20023
|
} }, 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));
|
|
20024
20024
|
};
|
|
20025
|
-
var templateObject_1$
|
|
20025
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$q, templateObject_4$n;
|
|
20026
20026
|
|
|
20027
20027
|
var slideInAnimation = function (distanceFromTop) {
|
|
20028
20028
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20029
|
-
return keyframes(templateObject_1$
|
|
20029
|
+
return keyframes(templateObject_1$x || (templateObject_1$x = __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);
|
|
20030
20030
|
};
|
|
20031
20031
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20032
20032
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20033
|
-
return keyframes(templateObject_2$
|
|
20033
|
+
return keyframes(templateObject_2$q || (templateObject_2$q = __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);
|
|
20034
20034
|
};
|
|
20035
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20036
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20035
|
+
var ToastContainer = newStyled.div(templateObject_3$p || (templateObject_3$p = __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"])));
|
|
20036
|
+
var ToastContent = newStyled.div(templateObject_4$m || (templateObject_4$m = __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) {
|
|
20037
20037
|
var distanceFromTop = _a.distanceFromTop;
|
|
20038
20038
|
return distanceFromTop || '124px';
|
|
20039
20039
|
}, function (_a) {
|
|
@@ -20046,12 +20046,12 @@ var ToastContent = newStyled.div(templateObject_4$l || (templateObject_4$l = __m
|
|
|
20046
20046
|
var distanceFromTop = _a.distanceFromTop;
|
|
20047
20047
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20048
20048
|
});
|
|
20049
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20049
|
+
var ToastText = newStyled.p(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"], ["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"])), function (_a) {
|
|
20050
20050
|
var severity = _a.severity;
|
|
20051
20051
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20052
20052
|
});
|
|
20053
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
20054
|
-
var templateObject_1$
|
|
20053
|
+
var CloseIcon = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20054
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$p, templateObject_4$m, templateObject_5$k, templateObject_6$h;
|
|
20055
20055
|
|
|
20056
20056
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20057
20057
|
var _b;
|
|
@@ -20073,9 +20073,9 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
20073
20073
|
});
|
|
20074
20074
|
Toast.displayName = 'Toast';
|
|
20075
20075
|
|
|
20076
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20077
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20078
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20076
|
+
var Wrapper$1 = newStyled.div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
20077
|
+
var GrandTotal = newStyled.h1(templateObject_2$p || (templateObject_2$p = __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; });
|
|
20078
|
+
var Currency = newStyled.span(templateObject_3$o || (templateObject_3$o = __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) {
|
|
20079
20079
|
var theme = _a.theme;
|
|
20080
20080
|
return theme.component.total.basicTotal.currency.color;
|
|
20081
20081
|
}, function (_a) {
|
|
@@ -20088,41 +20088,41 @@ var Currency = newStyled.span(templateObject_3$n || (templateObject_3$n = __make
|
|
|
20088
20088
|
var theme = _a.theme;
|
|
20089
20089
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20090
20090
|
});
|
|
20091
|
-
var Container$
|
|
20091
|
+
var Container$n = newStyled.div(templateObject_4$l || (templateObject_4$l = __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) {
|
|
20092
20092
|
var highlightColor = _a.highlightColor;
|
|
20093
20093
|
return highlightColor;
|
|
20094
20094
|
});
|
|
20095
|
-
var TotalContainer = newStyled(Container$
|
|
20095
|
+
var TotalContainer = newStyled(Container$n)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20096
20096
|
var showTotalLabel = _a.showTotalLabel;
|
|
20097
20097
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20098
20098
|
});
|
|
20099
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20100
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
20099
|
+
var DiscountText = newStyled.h3(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
20100
|
+
var DiscountAmount = newStyled.h3(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
20101
20101
|
var theme = _a.theme;
|
|
20102
20102
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20103
20103
|
});
|
|
20104
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
20105
|
-
var templateObject_1$
|
|
20104
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20105
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$l, templateObject_5$j, templateObject_6$g, templateObject_7$f, templateObject_8$b;
|
|
20106
20106
|
|
|
20107
20107
|
var Total = function (_a) {
|
|
20108
20108
|
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;
|
|
20109
20109
|
var theme = useTheme();
|
|
20110
|
-
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$
|
|
20110
|
+
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$n, __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));
|
|
20111
20111
|
};
|
|
20112
20112
|
|
|
20113
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20113
|
+
var Wrapper = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20114
20114
|
var color = _a.color;
|
|
20115
20115
|
return color;
|
|
20116
20116
|
});
|
|
20117
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20118
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20117
|
+
var ItemContainer = newStyled.div(templateObject_2$o || (templateObject_2$o = __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"])));
|
|
20118
|
+
var Item = newStyled.h4(templateObject_3$n || (templateObject_3$n = __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) {
|
|
20119
20119
|
var theme = _a.theme;
|
|
20120
20120
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20121
20121
|
}, function (_a) {
|
|
20122
20122
|
var theme = _a.theme;
|
|
20123
20123
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20124
20124
|
});
|
|
20125
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20125
|
+
var CouponItem = newStyled(Item)(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20126
20126
|
var color = _a.color;
|
|
20127
20127
|
return color;
|
|
20128
20128
|
});
|
|
@@ -20135,27 +20135,27 @@ var Subtotal = function (_a) {
|
|
|
20135
20135
|
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));
|
|
20136
20136
|
})] }), void 0));
|
|
20137
20137
|
};
|
|
20138
|
-
var templateObject_1$
|
|
20138
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$k;
|
|
20139
20139
|
|
|
20140
20140
|
var Totals = {
|
|
20141
20141
|
Total: Total,
|
|
20142
20142
|
Subtotal: Subtotal,
|
|
20143
20143
|
};
|
|
20144
20144
|
|
|
20145
|
-
var Container$
|
|
20146
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20147
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20148
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20149
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20150
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
20145
|
+
var Container$m = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20146
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20147
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$m || (templateObject_3$m = __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; });
|
|
20148
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$j || (templateObject_4$j = __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'); });
|
|
20149
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$i || (templateObject_5$i = __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"])));
|
|
20150
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$f || (templateObject_6$f = __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) {
|
|
20151
20151
|
return props.finishedTrack
|
|
20152
20152
|
? props.finishedTrackColor
|
|
20153
20153
|
: props.activeTrack
|
|
20154
20154
|
? props.activeTrackColor
|
|
20155
20155
|
: '';
|
|
20156
20156
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
20157
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
20158
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$
|
|
20157
|
+
var CheckpointStatusMessage = newStyled.span(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"], ["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"])));
|
|
20158
|
+
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$a || (templateObject_8$a = __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) {
|
|
20159
20159
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20160
20160
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20161
20161
|
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
@@ -20183,7 +20183,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20183
20183
|
}
|
|
20184
20184
|
return '30px';
|
|
20185
20185
|
};
|
|
20186
|
-
return (jsxRuntime.jsxs(Container$
|
|
20186
|
+
return (jsxRuntime.jsxs(Container$m, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20187
20187
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20188
20188
|
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
|
|
20189
20189
|
? activeCheckpointColor
|
|
@@ -20194,18 +20194,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20194
20194
|
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));
|
|
20195
20195
|
})] }), void 0));
|
|
20196
20196
|
};
|
|
20197
|
-
var templateObject_1$
|
|
20198
|
-
|
|
20199
|
-
var Container$
|
|
20200
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20201
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20202
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20203
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20204
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
20197
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$m, templateObject_4$j, templateObject_5$i, templateObject_6$f, templateObject_7$e, templateObject_8$a, templateObject_9$6, templateObject_10$5, templateObject_11$3;
|
|
20198
|
+
|
|
20199
|
+
var Container$l = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20200
|
+
var CheckpointContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20201
|
+
var CheckpointDate = newStyled.div(templateObject_3$l || (templateObject_3$l = __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; });
|
|
20202
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$i || (templateObject_4$i = __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'); });
|
|
20203
|
+
var CheckpointStatus = newStyled.p(templateObject_5$h || (templateObject_5$h = __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'); });
|
|
20204
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$e || (templateObject_6$e = __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) {
|
|
20205
20205
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20206
20206
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20207
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
20208
|
-
var LastCheckpointTrack = newStyled.div(templateObject_8$
|
|
20207
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
20208
|
+
var LastCheckpointTrack = newStyled.div(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
20209
20209
|
var TrackingProgress = function (_a) {
|
|
20210
20210
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
20211
20211
|
var theme = useTheme();
|
|
@@ -20225,7 +20225,7 @@ var TrackingProgress = function (_a) {
|
|
|
20225
20225
|
}
|
|
20226
20226
|
return '30px';
|
|
20227
20227
|
};
|
|
20228
|
-
return (jsxRuntime.jsxs(Container$
|
|
20228
|
+
return (jsxRuntime.jsxs(Container$l, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20229
20229
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20230
20230
|
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
|
|
20231
20231
|
? theme.colors.semantic.informative.color
|
|
@@ -20234,19 +20234,19 @@ var TrackingProgress = function (_a) {
|
|
|
20234
20234
|
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));
|
|
20235
20235
|
})] }), void 0));
|
|
20236
20236
|
};
|
|
20237
|
-
var templateObject_1$
|
|
20237
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$l, templateObject_4$i, templateObject_5$h, templateObject_6$e, templateObject_7$d, templateObject_8$9;
|
|
20238
20238
|
|
|
20239
|
-
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20239
|
+
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$s || (templateObject_1$s = __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) {
|
|
20240
20240
|
var checked = _a.checked;
|
|
20241
20241
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20242
20242
|
});
|
|
20243
|
-
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$
|
|
20244
|
-
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$
|
|
20245
|
-
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$
|
|
20246
|
-
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$
|
|
20247
|
-
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$
|
|
20248
|
-
var CheckboxInput = newStyled.input(templateObject_7$
|
|
20249
|
-
var templateObject_1$
|
|
20243
|
+
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
20244
|
+
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
20245
|
+
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
20246
|
+
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20247
|
+
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$d || (templateObject_6$d = __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"])));
|
|
20248
|
+
var CheckboxInput = newStyled.input(templateObject_7$c || (templateObject_7$c = __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"])));
|
|
20249
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$k, templateObject_4$h, templateObject_5$g, templateObject_6$d, templateObject_7$c;
|
|
20250
20250
|
|
|
20251
20251
|
function AutoshipOfferCard(_a) {
|
|
20252
20252
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20270,18 +20270,18 @@ function AutoshipOfferCard(_a) {
|
|
|
20270
20270
|
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));
|
|
20271
20271
|
}
|
|
20272
20272
|
|
|
20273
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
20273
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$r || (templateObject_1$r = __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) {
|
|
20274
20274
|
var checked = _a.checked;
|
|
20275
20275
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20276
20276
|
});
|
|
20277
|
-
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$
|
|
20278
|
-
var AutoShipBodyWrapper = newStyled.div(templateObject_3$
|
|
20279
|
-
var AutoShipBodyTitle = newStyled.div(templateObject_4$
|
|
20280
|
-
var AutoShipBodyListItem = newStyled.div(templateObject_5$
|
|
20281
|
-
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$
|
|
20282
|
-
newStyled.input(templateObject_7$
|
|
20283
|
-
var ButtonRemoveWrapper = newStyled.div(templateObject_8$
|
|
20284
|
-
var templateObject_1$
|
|
20277
|
+
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$k || (templateObject_2$k = __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"])));
|
|
20278
|
+
var AutoShipBodyWrapper = newStyled.div(templateObject_3$j || (templateObject_3$j = __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"])));
|
|
20279
|
+
var AutoShipBodyTitle = newStyled.div(templateObject_4$g || (templateObject_4$g = __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"])));
|
|
20280
|
+
var AutoShipBodyListItem = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20281
|
+
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$c || (templateObject_6$c = __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"])));
|
|
20282
|
+
newStyled.input(templateObject_7$b || (templateObject_7$b = __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"])));
|
|
20283
|
+
var ButtonRemoveWrapper = newStyled.div(templateObject_8$8 || (templateObject_8$8 = __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"])));
|
|
20284
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$j, templateObject_4$g, templateObject_5$f, templateObject_6$c, templateObject_7$b, templateObject_8$8;
|
|
20285
20285
|
|
|
20286
20286
|
function AutoshipOfferCardCta(_a) {
|
|
20287
20287
|
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;
|
|
@@ -20299,6 +20299,28 @@ function AutoshipOfferCardCta(_a) {
|
|
|
20299
20299
|
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));
|
|
20300
20300
|
}
|
|
20301
20301
|
|
|
20302
|
+
var ContainerBase$2 = newStyled.div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
20303
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_2$j || (templateObject_2$j = __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"])));
|
|
20304
|
+
var SubscriptionHeader$2 = newStyled.div(templateObject_3$i || (templateObject_3$i = __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"])));
|
|
20305
|
+
newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20306
|
+
newStyled.div(templateObject_5$e || (templateObject_5$e = __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"])));
|
|
20307
|
+
newStyled(Text$7)(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20308
|
+
var Container$k = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20309
|
+
var Benefits$1 = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __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) {
|
|
20310
|
+
var height = _a.height;
|
|
20311
|
+
return height !== null && height !== void 0 ? height : '100%';
|
|
20312
|
+
});
|
|
20313
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$i, templateObject_4$f, templateObject_5$e, templateObject_6$b, templateObject_7$a, templateObject_8$7;
|
|
20314
|
+
|
|
20315
|
+
var AutoshipPdpCard = function (_a) {
|
|
20316
|
+
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;
|
|
20317
|
+
return (jsxRuntime.jsxs(Container$k, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$2, __assign$1({ "data-testid": "subscription-container" }, { children: [jsxRuntime.jsxs(SubscriptionHeader$2, { children: [jsxRuntime.jsx(Text$7, { variant: "label", dangerouslySetInnerHTML: { __html: title !== null && title !== void 0 ? title : '' } }, void 0), jsxRuntime.jsx(ButtonPrimary, { wide: true, text: ctaText !== null && ctaText !== void 0 ? ctaText : 'Yes, I want this offer', size: exports.ComponentSize.Small, onClick: function () {
|
|
20318
|
+
handleSavings();
|
|
20319
|
+
} }, 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: ctaTextNoSavings !== null && ctaTextNoSavings !== void 0 ? ctaTextNoSavings : 'Continue without more savings - ', size: exports.ComponentSize.Small, onClick: function () {
|
|
20320
|
+
handleWithoutSavings();
|
|
20321
|
+
} }, void 0)] }), void 0));
|
|
20322
|
+
};
|
|
20323
|
+
|
|
20302
20324
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
20303
20325
|
background: props.bgColor,
|
|
20304
20326
|
height: '100%',
|
|
@@ -22241,6 +22263,7 @@ exports.Autoship = Autoship;
|
|
|
22241
22263
|
exports.AutoshipFrequencyDropdown = AutoshipFrequencyDropdown;
|
|
22242
22264
|
exports.AutoshipOfferCard = AutoshipOfferCard;
|
|
22243
22265
|
exports.AutoshipOfferCardCta = AutoshipOfferCardCta;
|
|
22266
|
+
exports.AutoshipPdpCard = AutoshipPdpCard;
|
|
22244
22267
|
exports.AutoshipV2 = AutoshipV2;
|
|
22245
22268
|
exports.BasicAccordion = BasicAccordion;
|
|
22246
22269
|
exports.BeforeAfterCard = BeforeAfterCard;
|