@trafilea/afrodita-components 6.45.4 → 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 +20 -2
- package/build/index.esm.js +694 -669
- package/build/index.esm.js.map +1 -1
- package/build/index.js +694 -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,
|
|
@@ -4555,6 +4555,8 @@ var Loading = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({ tes
|
|
|
4555
4555
|
|
|
4556
4556
|
var McAfee = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "other/mc_afee" }), void 0); };
|
|
4557
4557
|
|
|
4558
|
+
var Megafone = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "other/megafone" }), void 0); };
|
|
4559
|
+
|
|
4558
4560
|
var Play = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "other/play" }), void 0); };
|
|
4559
4561
|
|
|
4560
4562
|
var QrCode = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "other/qr_code" }), void 0); };
|
|
@@ -4605,6 +4607,7 @@ var Other = /*#__PURE__*/Object.freeze({
|
|
|
4605
4607
|
HelpCenter: HelpCenter,
|
|
4606
4608
|
Loading: Loading,
|
|
4607
4609
|
McAfee: McAfee,
|
|
4610
|
+
Megafone: Megafone,
|
|
4608
4611
|
Play: Play,
|
|
4609
4612
|
QrCode: QrCode,
|
|
4610
4613
|
QuestionWithCircle: QuestionWithCircle,
|
|
@@ -4836,14 +4839,14 @@ function jsxs(type, props, key) {
|
|
|
4836
4839
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4837
4840
|
// `variants` styles that are consistent through all themes.
|
|
4838
4841
|
var TAGS = {
|
|
4839
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4840
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4841
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4842
|
-
display1: newStyled.h1(templateObject_4$
|
|
4843
|
-
display2: newStyled.h2(templateObject_5$
|
|
4844
|
-
display3: newStyled.h3(templateObject_6$
|
|
4845
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4846
|
-
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([""], [""]))),
|
|
4847
4850
|
heading3: newStyled.h3(templateObject_9$d || (templateObject_9$d = __makeTemplateObject([""], [""]))),
|
|
4848
4851
|
heading4: newStyled.h4(templateObject_10$c || (templateObject_10$c = __makeTemplateObject([""], [""]))),
|
|
4849
4852
|
heading5: newStyled.h5(templateObject_11$8 || (templateObject_11$8 = __makeTemplateObject([""], [""]))),
|
|
@@ -4976,17 +4979,17 @@ var DEFAULTS = {
|
|
|
4976
4979
|
size: 'regular',
|
|
4977
4980
|
},
|
|
4978
4981
|
};
|
|
4979
|
-
var templateObject_1$
|
|
4980
|
-
|
|
4981
|
-
var Container$
|
|
4982
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4983
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4984
|
-
var Label$7 = newStyled.div(templateObject_4
|
|
4985
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4986
|
-
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"])));
|
|
4987
4990
|
var PackSelectorV2 = function (_a) {
|
|
4988
4991
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4989
|
-
return (jsxRuntime.jsx(Container$
|
|
4992
|
+
return (jsxRuntime.jsx(Container$1n, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4990
4993
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4991
4994
|
}) }), void 0));
|
|
4992
4995
|
};
|
|
@@ -5008,27 +5011,27 @@ var PackCard$1 = function (_a) {
|
|
|
5008
5011
|
currency: currencyCode || 'USD',
|
|
5009
5012
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5010
5013
|
};
|
|
5011
|
-
var templateObject_1$
|
|
5014
|
+
var templateObject_1$2d, templateObject_2$1C, templateObject_3$1g, templateObject_4$10, templateObject_5$N, templateObject_6$F;
|
|
5012
5015
|
|
|
5013
|
-
var Container$
|
|
5014
|
-
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"])));
|
|
5015
5018
|
var DropList = function (_a) {
|
|
5016
5019
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5017
|
-
return (jsxRuntime.jsx(Container$
|
|
5020
|
+
return (jsxRuntime.jsx(Container$1m, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5018
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));
|
|
5019
5022
|
}) }, void 0));
|
|
5020
5023
|
};
|
|
5021
|
-
var templateObject_1$
|
|
5024
|
+
var templateObject_1$2c, templateObject_2$1B;
|
|
5022
5025
|
|
|
5023
5026
|
var DROPS_TOTAL = 5;
|
|
5024
|
-
var Container$
|
|
5025
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5026
|
-
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"])));
|
|
5027
5030
|
var AbsorbencyLevel = function (_a) {
|
|
5028
5031
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5029
|
-
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));
|
|
5030
5033
|
};
|
|
5031
|
-
var templateObject_1$
|
|
5034
|
+
var templateObject_1$2b, templateObject_2$1A, templateObject_3$1f;
|
|
5032
5035
|
|
|
5033
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(`
|
|
5034
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(`
|
|
@@ -5104,7 +5107,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5104
5107
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5105
5108
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5106
5109
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5107
|
-
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"])));
|
|
5108
5111
|
var Accordion$1 = function (_a) {
|
|
5109
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;
|
|
5110
5113
|
var theme = useTheme();
|
|
@@ -5128,9 +5131,9 @@ var Accordion$1 = function (_a) {
|
|
|
5128
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));
|
|
5129
5132
|
} }), void 0));
|
|
5130
5133
|
};
|
|
5131
|
-
var templateObject_1$
|
|
5134
|
+
var templateObject_1$2a;
|
|
5132
5135
|
|
|
5133
|
-
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"])));
|
|
5134
5137
|
var AccordionOptions = function (_a) {
|
|
5135
5138
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5136
5139
|
var _b = React$2.useState({
|
|
@@ -5143,7 +5146,7 @@ var AccordionOptions = function (_a) {
|
|
|
5143
5146
|
}
|
|
5144
5147
|
return false;
|
|
5145
5148
|
};
|
|
5146
|
-
return (jsxRuntime.jsx(Container$
|
|
5149
|
+
return (jsxRuntime.jsx(Container$1k, { children: accordions.map(function (accordion, index) {
|
|
5147
5150
|
var forceOpenValue = getForceOpen(index);
|
|
5148
5151
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5149
5152
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5154,7 +5157,7 @@ var AccordionOptions = function (_a) {
|
|
|
5154
5157
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5155
5158
|
}) }, void 0));
|
|
5156
5159
|
};
|
|
5157
|
-
var templateObject_1$
|
|
5160
|
+
var templateObject_1$29;
|
|
5158
5161
|
|
|
5159
5162
|
/**
|
|
5160
5163
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5290,27 +5293,27 @@ var isValidDate = function (value) {
|
|
|
5290
5293
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5291
5294
|
};
|
|
5292
5295
|
|
|
5293
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5294
|
-
var FlexContainer$4 = newStyled.div(templateObject_2$
|
|
5295
|
-
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;
|
|
5296
5299
|
|
|
5297
|
-
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) {
|
|
5298
5301
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5299
5302
|
return width;
|
|
5300
5303
|
}, function (_a) {
|
|
5301
5304
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5302
5305
|
return height;
|
|
5303
5306
|
});
|
|
5304
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5305
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5306
|
-
var RightSide = newStyled.div(templateObject_4
|
|
5307
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5308
|
-
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;
|
|
5309
5312
|
|
|
5310
5313
|
var CouponCard = function (_a) {
|
|
5311
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;
|
|
5312
5315
|
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5313
|
-
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 () {
|
|
5314
5317
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5315
5318
|
setShowCoupon(function (prev) { return !prev; });
|
|
5316
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: {
|
|
@@ -5458,14 +5461,14 @@ var sizeOptions = [
|
|
|
5458
5461
|
},
|
|
5459
5462
|
];
|
|
5460
5463
|
|
|
5461
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5462
|
-
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"])));
|
|
5463
5466
|
var Error$1 = function (_a) {
|
|
5464
5467
|
var error = _a.error;
|
|
5465
5468
|
var theme = useTheme();
|
|
5466
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));
|
|
5467
5470
|
};
|
|
5468
|
-
var templateObject_1$
|
|
5471
|
+
var templateObject_1$26, templateObject_2$1x;
|
|
5469
5472
|
|
|
5470
5473
|
var BaseSelectButton = function (_a) {
|
|
5471
5474
|
var children = _a.children, as = _a.as;
|
|
@@ -5482,7 +5485,7 @@ function BaseSelectOption(_a) {
|
|
|
5482
5485
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5483
5486
|
}
|
|
5484
5487
|
|
|
5485
|
-
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"])));
|
|
5486
5489
|
function BaseSelect(_a) {
|
|
5487
5490
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5488
5491
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5492,7 +5495,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5492
5495
|
Options: BaseSelectOptions,
|
|
5493
5496
|
Option: BaseSelectOption,
|
|
5494
5497
|
});
|
|
5495
|
-
var templateObject_1$
|
|
5498
|
+
var templateObject_1$25;
|
|
5496
5499
|
|
|
5497
5500
|
var CustomButton = newStyled.button(function (_a) {
|
|
5498
5501
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5531,7 +5534,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5531
5534
|
});
|
|
5532
5535
|
});
|
|
5533
5536
|
// TODO Remove this when we find the real solution
|
|
5534
|
-
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) {
|
|
5535
5538
|
var open = _a.open;
|
|
5536
5539
|
return open &&
|
|
5537
5540
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5551,7 +5554,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5551
5554
|
} }), void 0));
|
|
5552
5555
|
};
|
|
5553
5556
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5554
|
-
var templateObject_1$
|
|
5557
|
+
var templateObject_1$24;
|
|
5555
5558
|
|
|
5556
5559
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5557
5560
|
var theme = _a.theme;
|
|
@@ -5718,7 +5721,7 @@ var CustomCheckboxStyles = {
|
|
|
5718
5721
|
},
|
|
5719
5722
|
};
|
|
5720
5723
|
|
|
5721
|
-
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"])));
|
|
5722
5725
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5723
5726
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5724
5727
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5729,7 +5732,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5729
5732
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5730
5733
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5731
5734
|
]; });
|
|
5732
|
-
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) {
|
|
5733
5736
|
var disabled = _a.disabled;
|
|
5734
5737
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5735
5738
|
});
|
|
@@ -5743,9 +5746,9 @@ var Checkbox = function (_a) {
|
|
|
5743
5746
|
}
|
|
5744
5747
|
onChange(e.target.checked);
|
|
5745
5748
|
};
|
|
5746
|
-
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));
|
|
5747
5750
|
};
|
|
5748
|
-
var templateObject_1$
|
|
5751
|
+
var templateObject_1$23, templateObject_2$1w;
|
|
5749
5752
|
|
|
5750
5753
|
var CustomOption = newStyled.li(function (_a) {
|
|
5751
5754
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5794,9 +5797,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5794
5797
|
Option: BaseDropdownOption,
|
|
5795
5798
|
});
|
|
5796
5799
|
|
|
5797
|
-
var Container$
|
|
5798
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5799
|
-
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) {
|
|
5800
5803
|
var fontWeight = _a.fontWeight;
|
|
5801
5804
|
return fontWeight || '';
|
|
5802
5805
|
});
|
|
@@ -5829,10 +5832,10 @@ function SimpleDropdown(_a) {
|
|
|
5829
5832
|
}
|
|
5830
5833
|
setSelectedValue(value);
|
|
5831
5834
|
}, [value, options, initialValue]);
|
|
5832
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5835
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1h : React$2.Fragment;
|
|
5833
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));
|
|
5834
5837
|
}
|
|
5835
|
-
var templateObject_1$
|
|
5838
|
+
var templateObject_1$22, templateObject_2$1v, templateObject_3$1d;
|
|
5836
5839
|
|
|
5837
5840
|
/* base styles & size variants */
|
|
5838
5841
|
var CustomRadioStyles$2 = {
|
|
@@ -5897,9 +5900,9 @@ var ContainerStyles$2 = {
|
|
|
5897
5900
|
},
|
|
5898
5901
|
};
|
|
5899
5902
|
|
|
5900
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5901
|
-
var Container$
|
|
5902
|
-
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) {
|
|
5903
5906
|
var disabled = _a.disabled;
|
|
5904
5907
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5905
5908
|
});
|
|
@@ -5907,14 +5910,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5907
5910
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5908
5911
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5909
5912
|
]; });
|
|
5910
|
-
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) {
|
|
5911
5914
|
var theme = _a.theme;
|
|
5912
5915
|
return theme.component.radio.textSize;
|
|
5913
5916
|
}, function (_a) {
|
|
5914
5917
|
var theme = _a.theme;
|
|
5915
5918
|
return theme.component.radio.lineHeight;
|
|
5916
5919
|
});
|
|
5917
|
-
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) {
|
|
5918
5921
|
var theme = _a.theme;
|
|
5919
5922
|
return theme.component.radio.textSize;
|
|
5920
5923
|
}, function (_a) {
|
|
@@ -5931,9 +5934,9 @@ var RadioInput = function (_a) {
|
|
|
5931
5934
|
var value = event.currentTarget.value;
|
|
5932
5935
|
onChange({ value: value, label: label });
|
|
5933
5936
|
};
|
|
5934
|
-
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));
|
|
5935
5938
|
};
|
|
5936
|
-
var templateObject_1$
|
|
5939
|
+
var templateObject_1$21, templateObject_2$1u, templateObject_3$1c, templateObject_4$_;
|
|
5937
5940
|
|
|
5938
5941
|
var useOnClickOutside = function (ref, handler) {
|
|
5939
5942
|
React$2.useEffect(function () {
|
|
@@ -6026,7 +6029,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6026
6029
|
}
|
|
6027
6030
|
};
|
|
6028
6031
|
|
|
6029
|
-
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) {
|
|
6030
6033
|
var position = _a.position;
|
|
6031
6034
|
return getWrapperFlexDirection(position);
|
|
6032
6035
|
}, function (_a) {
|
|
@@ -6036,7 +6039,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __ma
|
|
|
6036
6039
|
var disableHover = _a.disableHover;
|
|
6037
6040
|
return (disableHover ? 0 : 1);
|
|
6038
6041
|
});
|
|
6039
|
-
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) {
|
|
6040
6043
|
var position = _a.position;
|
|
6041
6044
|
return getContainerFlexDirection(position);
|
|
6042
6045
|
}, function (_a) {
|
|
@@ -6064,14 +6067,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1s || (templateObject_2$1s
|
|
|
6064
6067
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6065
6068
|
return actual === expected ? margin : '0';
|
|
6066
6069
|
};
|
|
6067
|
-
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) {
|
|
6068
6071
|
var borderColor = _a.borderColor;
|
|
6069
6072
|
return borderColor;
|
|
6070
6073
|
}, function (_a) {
|
|
6071
6074
|
var backgroundColor = _a.backgroundColor;
|
|
6072
6075
|
return backgroundColor;
|
|
6073
6076
|
});
|
|
6074
|
-
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) {
|
|
6075
6078
|
var theme = _a.theme;
|
|
6076
6079
|
return theme.component.autoship.tooltip.text.alignment;
|
|
6077
6080
|
}, function (_a) {
|
|
@@ -6081,17 +6084,17 @@ var TooltipText = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __ma
|
|
|
6081
6084
|
var color = _a.color;
|
|
6082
6085
|
return color;
|
|
6083
6086
|
});
|
|
6084
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
6085
|
-
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) {
|
|
6086
6089
|
var color = _a.color;
|
|
6087
6090
|
return color;
|
|
6088
6091
|
});
|
|
6089
|
-
var IconContainer$6 = newStyled.div(templateObject_7$
|
|
6090
|
-
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) {
|
|
6091
6094
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6092
6095
|
return right;
|
|
6093
6096
|
});
|
|
6094
|
-
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;
|
|
6095
6098
|
|
|
6096
6099
|
var Tooltip = function (_a) {
|
|
6097
6100
|
var _b;
|
|
@@ -6134,8 +6137,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
6134
6137
|
};
|
|
6135
6138
|
};
|
|
6136
6139
|
|
|
6137
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6138
|
-
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) {
|
|
6139
6142
|
var selected = _a.selected, theme = _a.theme;
|
|
6140
6143
|
return selected
|
|
6141
6144
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6149,21 +6152,21 @@ var ContainerBase$3 = newStyled.div(templateObject_2$1r || (templateObject_2$1r
|
|
|
6149
6152
|
var theme = _a.theme;
|
|
6150
6153
|
return theme.colors.pallete.primary.color;
|
|
6151
6154
|
});
|
|
6152
|
-
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) {
|
|
6153
6156
|
var onClick = _a.onClick;
|
|
6154
6157
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6155
6158
|
});
|
|
6156
|
-
var SubscriptionContainer$
|
|
6157
|
-
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) {
|
|
6158
6161
|
var theme = _a.theme;
|
|
6159
6162
|
return theme.colors.shades[200].color;
|
|
6160
6163
|
}, function (_a) {
|
|
6161
6164
|
var theme = _a.theme;
|
|
6162
6165
|
return theme.colors.pallete.primary.color;
|
|
6163
6166
|
});
|
|
6164
|
-
var BenefitsContainer$3 = newStyled.div(templateObject_6$
|
|
6165
|
-
var Benefit$4 = newStyled.div(templateObject_7$
|
|
6166
|
-
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"])));
|
|
6167
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"])));
|
|
6168
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"])));
|
|
6169
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"])));
|
|
@@ -6171,8 +6174,8 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6171
6174
|
var selected = _a.selected, theme = _a.theme;
|
|
6172
6175
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6173
6176
|
});
|
|
6174
|
-
var Container$
|
|
6175
|
-
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;
|
|
6176
6179
|
|
|
6177
6180
|
var radioIds$2 = {
|
|
6178
6181
|
oneTime: {
|
|
@@ -6222,17 +6225,17 @@ var Autoship = function (_a) {
|
|
|
6222
6225
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6223
6226
|
};
|
|
6224
6227
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6225
|
-
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
|
|
6226
6229
|
? benefitsColor.selected
|
|
6227
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));
|
|
6228
6231
|
};
|
|
6229
6232
|
|
|
6230
|
-
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) {
|
|
6231
6234
|
var theme = _a.theme;
|
|
6232
6235
|
return theme.name === 'TheSpaDr' &&
|
|
6233
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 ";
|
|
6234
6237
|
});
|
|
6235
|
-
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) {
|
|
6236
6239
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6237
6240
|
return isSelected
|
|
6238
6241
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6248,7 +6251,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6248
6251
|
}
|
|
6249
6252
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6250
6253
|
};
|
|
6251
|
-
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) {
|
|
6252
6255
|
var selected = _a.selected, theme = _a.theme;
|
|
6253
6256
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6254
6257
|
}, function (_a) {
|
|
@@ -6260,32 +6263,32 @@ var ContainerBase$2 = newStyled.div(templateObject_3$18 || (templateObject_3$18
|
|
|
6260
6263
|
var theme = _a.theme;
|
|
6261
6264
|
return theme.colors.pallete.primary.color;
|
|
6262
6265
|
});
|
|
6263
|
-
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) {
|
|
6264
6267
|
var onClick = _a.onClick;
|
|
6265
6268
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6266
6269
|
});
|
|
6267
|
-
var SubscriptionContainer$
|
|
6268
|
-
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) {
|
|
6269
6272
|
var theme = _a.theme;
|
|
6270
6273
|
return theme.colors.shades[200].color;
|
|
6271
6274
|
}, function (_a) {
|
|
6272
6275
|
var theme = _a.theme;
|
|
6273
6276
|
return theme.colors.pallete.primary.color;
|
|
6274
6277
|
});
|
|
6275
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_7$
|
|
6276
|
-
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"])));
|
|
6277
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"])));
|
|
6278
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"])));
|
|
6279
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) {
|
|
6280
6283
|
var selected = _a.selected, theme = _a.theme;
|
|
6281
6284
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6282
6285
|
});
|
|
6283
|
-
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"])));
|
|
6284
6287
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6285
6288
|
var theme = _a.theme;
|
|
6286
6289
|
return theme.component.autoship.tooltip.margin;
|
|
6287
6290
|
});
|
|
6288
|
-
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;
|
|
6289
6292
|
|
|
6290
6293
|
var radioIds$1 = {
|
|
6291
6294
|
oneTime: {
|
|
@@ -6345,7 +6348,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6345
6348
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6346
6349
|
};
|
|
6347
6350
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6348
|
-
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
|
|
6349
6352
|
? benefitsColor.selected
|
|
6350
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));
|
|
6351
6354
|
};
|
|
@@ -6364,13 +6367,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6364
6367
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6365
6368
|
_a$2);
|
|
6366
6369
|
|
|
6367
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6368
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6369
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6370
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6371
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6372
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6373
|
-
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;
|
|
6374
6377
|
|
|
6375
6378
|
var NameWithStars = function (_a) {
|
|
6376
6379
|
var name = _a.name, size = _a.size;
|
|
@@ -6388,10 +6391,10 @@ var ResultFeedback = function (_a) {
|
|
|
6388
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));
|
|
6389
6392
|
};
|
|
6390
6393
|
|
|
6391
|
-
var Container$
|
|
6392
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6393
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6394
|
-
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) {
|
|
6395
6398
|
var theme = _a.theme;
|
|
6396
6399
|
return theme.colors.pallete.secondary.color;
|
|
6397
6400
|
}, function (_a) {
|
|
@@ -6401,7 +6404,7 @@ var UserInfoText = newStyled.div(templateObject_4$U || (templateObject_4$U = __m
|
|
|
6401
6404
|
var theme = _a.theme, size = _a.size;
|
|
6402
6405
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6403
6406
|
});
|
|
6404
|
-
var templateObject_1$
|
|
6407
|
+
var templateObject_1$1Y, templateObject_2$1p, templateObject_3$17, templateObject_4$V;
|
|
6405
6408
|
|
|
6406
6409
|
/* base styles & size variants */
|
|
6407
6410
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6476,10 +6479,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6476
6479
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6477
6480
|
var infoText = buildInfoText(name, age, months);
|
|
6478
6481
|
var Component = componentByVariant[variant];
|
|
6479
|
-
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));
|
|
6480
6483
|
};
|
|
6481
6484
|
|
|
6482
|
-
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) {
|
|
6483
6486
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6484
6487
|
});
|
|
6485
6488
|
var CardHeader = function (_a) {
|
|
@@ -6490,16 +6493,16 @@ var CardFooter = function (_a) {
|
|
|
6490
6493
|
var children = _a.children;
|
|
6491
6494
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6492
6495
|
};
|
|
6493
|
-
var templateObject_1$
|
|
6496
|
+
var templateObject_1$1X;
|
|
6494
6497
|
|
|
6495
|
-
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"])));
|
|
6496
6499
|
var CardBody$1 = function (_a) {
|
|
6497
6500
|
var children = _a.children;
|
|
6498
6501
|
return jsxRuntime.jsx(Body$1, { children: children }, void 0);
|
|
6499
6502
|
};
|
|
6500
|
-
var templateObject_1$
|
|
6503
|
+
var templateObject_1$1W;
|
|
6501
6504
|
|
|
6502
|
-
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) {
|
|
6503
6506
|
var flex = _a.flex;
|
|
6504
6507
|
return flex &&
|
|
6505
6508
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6514,23 +6517,23 @@ var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = _
|
|
|
6514
6517
|
var Card$2 = function (_a) {
|
|
6515
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;
|
|
6516
6519
|
var theme = useTheme();
|
|
6517
|
-
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));
|
|
6518
6521
|
};
|
|
6519
6522
|
var Card$3 = Object.assign(Card$2, {
|
|
6520
6523
|
Header: CardHeader,
|
|
6521
6524
|
Footer: CardFooter,
|
|
6522
6525
|
Body: CardBody$1,
|
|
6523
6526
|
});
|
|
6524
|
-
var templateObject_1$
|
|
6527
|
+
var templateObject_1$1V;
|
|
6525
6528
|
|
|
6526
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6527
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6528
|
-
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) {
|
|
6529
6532
|
var color = _a.color;
|
|
6530
6533
|
return color;
|
|
6531
6534
|
});
|
|
6532
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6533
|
-
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;
|
|
6534
6537
|
|
|
6535
6538
|
var Minimalistic = function (_a) {
|
|
6536
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;
|
|
@@ -6538,28 +6541,28 @@ var Minimalistic = function (_a) {
|
|
|
6538
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));
|
|
6539
6542
|
};
|
|
6540
6543
|
|
|
6541
|
-
var Container$
|
|
6542
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6543
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6544
|
-
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"])));
|
|
6545
6548
|
var Simple = function (_a) {
|
|
6546
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;
|
|
6547
6550
|
var theme = useTheme();
|
|
6548
|
-
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));
|
|
6549
6552
|
};
|
|
6550
|
-
var templateObject_1$
|
|
6553
|
+
var templateObject_1$1T, templateObject_2$1n, templateObject_3$15, templateObject_4$T;
|
|
6551
6554
|
|
|
6552
6555
|
var Bundle = {
|
|
6553
6556
|
Minimalistic: Minimalistic,
|
|
6554
6557
|
Simple: Simple,
|
|
6555
6558
|
};
|
|
6556
6559
|
|
|
6557
|
-
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) {
|
|
6558
6561
|
var displayBNPL = _a.displayBNPL;
|
|
6559
6562
|
return (displayBNPL ? 'flex' : 'none');
|
|
6560
6563
|
});
|
|
6561
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6562
|
-
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"])));
|
|
6563
6566
|
var BuyNowPayLater = function (_a) {
|
|
6564
6567
|
var _b;
|
|
6565
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;
|
|
@@ -6579,48 +6582,48 @@ var BuyNowPayLater = function (_a) {
|
|
|
6579
6582
|
else {
|
|
6580
6583
|
dynamicText = "or 4 interest-free payments of ";
|
|
6581
6584
|
}
|
|
6582
|
-
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: {
|
|
6583
6586
|
display: 'inline',
|
|
6584
6587
|
fontSize: fontSize,
|
|
6585
6588
|
paddingLeft: '0.25rem',
|
|
6586
6589
|
paddingRight: '0.25rem',
|
|
6587
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));
|
|
6588
6591
|
};
|
|
6589
|
-
var templateObject_1$
|
|
6592
|
+
var templateObject_1$1S, templateObject_2$1m, templateObject_3$14;
|
|
6590
6593
|
|
|
6591
|
-
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; });
|
|
6592
6595
|
var Title$8 = function (_a) {
|
|
6593
6596
|
var title = _a.title;
|
|
6594
6597
|
var theme = useTheme();
|
|
6595
6598
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6596
6599
|
};
|
|
6597
|
-
var templateObject_1$
|
|
6600
|
+
var templateObject_1$1R;
|
|
6598
6601
|
|
|
6599
|
-
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; });
|
|
6600
6603
|
var Promo = function (_a) {
|
|
6601
6604
|
var text = _a.text;
|
|
6602
6605
|
var theme = useTheme();
|
|
6603
6606
|
return (jsxRuntime.jsx(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6604
6607
|
};
|
|
6605
|
-
var templateObject_1$
|
|
6608
|
+
var templateObject_1$1Q;
|
|
6606
6609
|
|
|
6607
|
-
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; });
|
|
6608
6611
|
var Description$1 = function (_a) {
|
|
6609
6612
|
var text = _a.text;
|
|
6610
6613
|
var theme = useTheme();
|
|
6611
6614
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6612
6615
|
};
|
|
6613
|
-
var templateObject_1$
|
|
6616
|
+
var templateObject_1$1P;
|
|
6614
6617
|
|
|
6615
|
-
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"); });
|
|
6616
6619
|
var CloseButton$1 = function (_a) {
|
|
6617
6620
|
var onClick = _a.onClick, size = _a.size;
|
|
6618
6621
|
var theme = useTheme();
|
|
6619
|
-
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));
|
|
6620
6623
|
};
|
|
6621
|
-
var templateObject_1$
|
|
6624
|
+
var templateObject_1$1O;
|
|
6622
6625
|
|
|
6623
|
-
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) {
|
|
6624
6627
|
var backgroundColor = _a.backgroundColor;
|
|
6625
6628
|
return backgroundColor;
|
|
6626
6629
|
}, function (_a) {
|
|
@@ -6635,7 +6638,7 @@ var OfferBanner = function (_a) {
|
|
|
6635
6638
|
var theme = useTheme();
|
|
6636
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));
|
|
6637
6640
|
};
|
|
6638
|
-
var templateObject_1$
|
|
6641
|
+
var templateObject_1$1N;
|
|
6639
6642
|
|
|
6640
6643
|
var CartProductItem = {
|
|
6641
6644
|
Title: Title$8,
|
|
@@ -6645,20 +6648,20 @@ var CartProductItem = {
|
|
|
6645
6648
|
CloseButton: CloseButton$1,
|
|
6646
6649
|
};
|
|
6647
6650
|
|
|
6648
|
-
var Container$
|
|
6649
|
-
var MobileContainer = newStyled(Container$
|
|
6650
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6651
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6652
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6653
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6654
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6655
|
-
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"])));
|
|
6656
6659
|
var ClubPriceLabel = function (_a) {
|
|
6657
6660
|
var clubPrice = _a.clubPrice;
|
|
6658
6661
|
var isMobile = useWindowDimensions().isMobile;
|
|
6659
|
-
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));
|
|
6660
6663
|
};
|
|
6661
|
-
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;
|
|
6662
6665
|
|
|
6663
6666
|
var Spacing = function (_a) {
|
|
6664
6667
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6666,10 +6669,10 @@ var Spacing = function (_a) {
|
|
|
6666
6669
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6667
6670
|
};
|
|
6668
6671
|
|
|
6669
|
-
var Container$
|
|
6670
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6671
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6672
|
-
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) {
|
|
6673
6676
|
var index = _a.index;
|
|
6674
6677
|
return "".concat(6 + 3 * index, "px");
|
|
6675
6678
|
}, function (_a) {
|
|
@@ -6678,12 +6681,12 @@ var Bar$2 = newStyled('div')(templateObject_4$Q || (templateObject_4$Q = __makeT
|
|
|
6678
6681
|
});
|
|
6679
6682
|
var StrengthBars = function (_a) {
|
|
6680
6683
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6681
|
-
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));
|
|
6682
6685
|
};
|
|
6683
|
-
var templateObject_1$
|
|
6686
|
+
var templateObject_1$1L, templateObject_2$1k, templateObject_3$12, templateObject_4$R;
|
|
6684
6687
|
|
|
6685
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6686
|
-
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;
|
|
6687
6690
|
|
|
6688
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;}}";
|
|
6689
6692
|
|
|
@@ -6705,10 +6708,10 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6705
6708
|
|
|
6706
6709
|
var STARTS_NUMBER = 5;
|
|
6707
6710
|
|
|
6708
|
-
var Container$
|
|
6709
|
-
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;
|
|
6710
6713
|
|
|
6711
|
-
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) {
|
|
6712
6715
|
var marginRight = _a.marginRight;
|
|
6713
6716
|
return marginRight;
|
|
6714
6717
|
});
|
|
@@ -6720,11 +6723,11 @@ var StarList = function (_a) {
|
|
|
6720
6723
|
width: theme.component.stars.element[size].width,
|
|
6721
6724
|
height: theme.component.stars.element[size].height,
|
|
6722
6725
|
};
|
|
6723
|
-
return (jsxRuntime.jsx(Container$
|
|
6726
|
+
return (jsxRuntime.jsx(Container$16, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6724
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)));
|
|
6725
6728
|
}) }, void 0));
|
|
6726
6729
|
};
|
|
6727
|
-
var templateObject_1$
|
|
6730
|
+
var templateObject_1$1I;
|
|
6728
6731
|
|
|
6729
6732
|
/* base styles & size variants */
|
|
6730
6733
|
var LabelStyles = {
|
|
@@ -6772,7 +6775,7 @@ var LabelStyles = {
|
|
|
6772
6775
|
});
|
|
6773
6776
|
},
|
|
6774
6777
|
};
|
|
6775
|
-
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"])));
|
|
6776
6779
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6777
6780
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6778
6781
|
return [
|
|
@@ -6791,8 +6794,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6791
6794
|
}),
|
|
6792
6795
|
];
|
|
6793
6796
|
});
|
|
6794
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6795
|
-
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;
|
|
6796
6799
|
|
|
6797
6800
|
var Rating = function (_a) {
|
|
6798
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;
|
|
@@ -6813,19 +6816,19 @@ var Rating = function (_a) {
|
|
|
6813
6816
|
href: reviewsContainerId,
|
|
6814
6817
|
}
|
|
6815
6818
|
: {};
|
|
6816
|
-
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));
|
|
6817
6820
|
};
|
|
6818
6821
|
|
|
6819
|
-
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) {
|
|
6820
6823
|
var width = _a.width;
|
|
6821
6824
|
return width;
|
|
6822
6825
|
});
|
|
6823
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6824
|
-
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) {
|
|
6825
6828
|
var fontSize = _a.fontSize;
|
|
6826
6829
|
return fontSize;
|
|
6827
6830
|
});
|
|
6828
|
-
var templateObject_1$
|
|
6831
|
+
var templateObject_1$1G, templateObject_2$1i, templateObject_3$11;
|
|
6829
6832
|
|
|
6830
6833
|
var OfferAtCartImage = function (_a) {
|
|
6831
6834
|
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width;
|
|
@@ -6872,9 +6875,9 @@ var getDropdownOptions = function (frequency) {
|
|
|
6872
6875
|
}); });
|
|
6873
6876
|
};
|
|
6874
6877
|
|
|
6875
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
6876
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_2$
|
|
6877
|
-
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;
|
|
6878
6881
|
|
|
6879
6882
|
var BenefitsList = function (_a) {
|
|
6880
6883
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6885,23 +6888,23 @@ var BenefitsList = function (_a) {
|
|
|
6885
6888
|
}) }, void 0));
|
|
6886
6889
|
};
|
|
6887
6890
|
|
|
6888
|
-
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) {
|
|
6889
6892
|
var timerColor = _a.timerColor;
|
|
6890
6893
|
return timerColor || '';
|
|
6891
6894
|
});
|
|
6892
|
-
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) {
|
|
6893
6896
|
var timerColor = _a.timerColor;
|
|
6894
6897
|
return timerColor || '';
|
|
6895
6898
|
});
|
|
6896
|
-
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) {
|
|
6897
6900
|
var theme = _a.theme;
|
|
6898
6901
|
return theme.colors.shades.white.color;
|
|
6899
6902
|
}, function (_a) {
|
|
6900
6903
|
var theme = _a.theme;
|
|
6901
6904
|
return theme.colors.shades.white.color;
|
|
6902
6905
|
});
|
|
6903
|
-
var Unit = newStyled.p(templateObject_4$
|
|
6904
|
-
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;
|
|
6905
6908
|
|
|
6906
6909
|
var HRS = 'HRS';
|
|
6907
6910
|
var MIN = 'MIN';
|
|
@@ -6942,7 +6945,7 @@ var Timer = function (_a) {
|
|
|
6942
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));
|
|
6943
6946
|
};
|
|
6944
6947
|
|
|
6945
|
-
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) {
|
|
6946
6949
|
var textPosition = _a.textPosition;
|
|
6947
6950
|
return textPosition;
|
|
6948
6951
|
}, function (_a) {
|
|
@@ -6955,7 +6958,7 @@ var TimerContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C =
|
|
|
6955
6958
|
var borderRadius = _a.borderRadius;
|
|
6956
6959
|
return borderRadius || '8px';
|
|
6957
6960
|
});
|
|
6958
|
-
var templateObject_1$
|
|
6961
|
+
var templateObject_1$1D;
|
|
6959
6962
|
|
|
6960
6963
|
var getDefaultCountdown = function () {
|
|
6961
6964
|
var tomorrowDate = new Date();
|
|
@@ -6971,7 +6974,7 @@ var HurryUp = function (_a) {
|
|
|
6971
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));
|
|
6972
6975
|
};
|
|
6973
6976
|
|
|
6974
|
-
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) {
|
|
6975
6978
|
var size = _a.size;
|
|
6976
6979
|
return (size ? size : '100%');
|
|
6977
6980
|
}, function (_a) {
|
|
@@ -6986,7 +6989,7 @@ var borderSize = {
|
|
|
6986
6989
|
large: '3px',
|
|
6987
6990
|
};
|
|
6988
6991
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
6989
|
-
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) {
|
|
6990
6993
|
var size = _a.size;
|
|
6991
6994
|
return borderSize[size];
|
|
6992
6995
|
}, function (_a) {
|
|
@@ -6999,29 +7002,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1e || (templateObject_2$1e =
|
|
|
6999
7002
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
7000
7003
|
return duration;
|
|
7001
7004
|
});
|
|
7002
|
-
var templateObject_1$
|
|
7005
|
+
var templateObject_1$1C, templateObject_2$1f;
|
|
7003
7006
|
|
|
7004
7007
|
var Spinner = function (_a) {
|
|
7005
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;
|
|
7006
|
-
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));
|
|
7007
7010
|
};
|
|
7008
7011
|
|
|
7009
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
7010
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
7011
|
-
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;
|
|
7012
7015
|
|
|
7013
7016
|
var ProgressBar$1 = function (_a) {
|
|
7014
7017
|
var progress = _a.progress, hide = _a.hide;
|
|
7015
7018
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
7016
7019
|
};
|
|
7017
7020
|
|
|
7018
|
-
var Container$
|
|
7019
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
7020
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3
|
|
7021
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
7022
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
7023
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
7024
|
-
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;
|
|
7025
7028
|
|
|
7026
7029
|
var Video$1 = function (_a) {
|
|
7027
7030
|
var _b, _c, _d, _e;
|
|
@@ -7071,14 +7074,14 @@ var Video$1 = function (_a) {
|
|
|
7071
7074
|
setVideoProgress(videoRef.current.currentTime);
|
|
7072
7075
|
}
|
|
7073
7076
|
};
|
|
7074
|
-
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));
|
|
7075
7078
|
};
|
|
7076
7079
|
|
|
7077
|
-
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) {
|
|
7078
7081
|
var theme = _a.theme;
|
|
7079
7082
|
return theme.colors.shades.black.color;
|
|
7080
7083
|
});
|
|
7081
|
-
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) {
|
|
7082
7085
|
var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
|
|
7083
7086
|
return position;
|
|
7084
7087
|
}, function (_a) {
|
|
@@ -7097,7 +7100,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1b || (templateObject_2
|
|
|
7097
7100
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
7098
7101
|
return boxSizing;
|
|
7099
7102
|
});
|
|
7100
|
-
var templateObject_1$
|
|
7103
|
+
var templateObject_1$1z, templateObject_2$1c;
|
|
7101
7104
|
|
|
7102
7105
|
var getStylesBySize$c = function (size) {
|
|
7103
7106
|
switch (size) {
|
|
@@ -7118,7 +7121,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7118
7121
|
};
|
|
7119
7122
|
}
|
|
7120
7123
|
};
|
|
7121
|
-
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) {
|
|
7122
7125
|
var backgroundColor = _a.backgroundColor;
|
|
7123
7126
|
return backgroundColor;
|
|
7124
7127
|
}, function (_a) {
|
|
@@ -7159,9 +7162,9 @@ var IconButton = function (_a) {
|
|
|
7159
7162
|
var _b, _c;
|
|
7160
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;
|
|
7161
7164
|
var theme = useTheme();
|
|
7162
|
-
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));
|
|
7163
7166
|
};
|
|
7164
|
-
var templateObject_1$
|
|
7167
|
+
var templateObject_1$1y;
|
|
7165
7168
|
|
|
7166
7169
|
var LikeButton = function (_a) {
|
|
7167
7170
|
var _b;
|
|
@@ -7174,11 +7177,11 @@ var LikeButton = function (_a) {
|
|
|
7174
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));
|
|
7175
7178
|
};
|
|
7176
7179
|
|
|
7177
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
7178
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
7179
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
7180
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
7181
|
-
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"])));
|
|
7182
7185
|
var RegularPriceTag = function () {
|
|
7183
7186
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
7184
7187
|
};
|
|
@@ -7228,11 +7231,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
7228
7231
|
: exports.ComponentSize.XSmall;
|
|
7229
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));
|
|
7230
7233
|
};
|
|
7231
|
-
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]
|
|
7232
7235
|
? finalPriceArray[0]
|
|
7233
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));
|
|
7234
7237
|
};
|
|
7235
|
-
var templateObject_1$
|
|
7238
|
+
var templateObject_1$1x, templateObject_2$1b, templateObject_3$_, templateObject_4$O, templateObject_5$F;
|
|
7236
7239
|
|
|
7237
7240
|
var STYLES_BY_THEME = {
|
|
7238
7241
|
TheSpaDr: {
|
|
@@ -7305,10 +7308,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7305
7308
|
height: height,
|
|
7306
7309
|
});
|
|
7307
7310
|
});
|
|
7308
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
7309
|
-
var Container$
|
|
7310
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
7311
|
-
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) {
|
|
7312
7315
|
var theme = _a.theme;
|
|
7313
7316
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
7314
7317
|
}, function (_a) {
|
|
@@ -7359,17 +7362,17 @@ var getStylesBySize$b = function (size) {
|
|
|
7359
7362
|
};
|
|
7360
7363
|
}
|
|
7361
7364
|
};
|
|
7362
|
-
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) {
|
|
7363
7366
|
var style = _a.style;
|
|
7364
7367
|
return style.width;
|
|
7365
7368
|
});
|
|
7366
|
-
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) {
|
|
7367
7370
|
var style = _a.style;
|
|
7368
7371
|
return style.width;
|
|
7369
7372
|
});
|
|
7370
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
7371
|
-
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$
|
|
7372
|
-
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;
|
|
7373
7376
|
|
|
7374
7377
|
var ProductItemMobile = function (_a) {
|
|
7375
7378
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7461,12 +7464,12 @@ var ProductItemMobile = function (_a) {
|
|
|
7461
7464
|
setIsLiked(function (prev) { return !prev; });
|
|
7462
7465
|
likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.onClick(e);
|
|
7463
7466
|
};
|
|
7464
|
-
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: {
|
|
7465
7468
|
background: {
|
|
7466
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,
|
|
7467
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,
|
|
7468
7471
|
},
|
|
7469
|
-
} }, 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: {
|
|
7470
7473
|
letterSpacing: '-0.05rem',
|
|
7471
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) {
|
|
7472
7475
|
e.preventDefault();
|
|
@@ -7486,10 +7489,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7486
7489
|
height: height,
|
|
7487
7490
|
});
|
|
7488
7491
|
});
|
|
7489
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
7490
|
-
var Container
|
|
7491
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
7492
|
-
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; });
|
|
7493
7496
|
var getStylesBySize$a = function (size) {
|
|
7494
7497
|
switch (size) {
|
|
7495
7498
|
case exports.ComponentSize.Medium:
|
|
@@ -7515,16 +7518,16 @@ var getStylesBySize$a = function (size) {
|
|
|
7515
7518
|
};
|
|
7516
7519
|
}
|
|
7517
7520
|
};
|
|
7518
|
-
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) {
|
|
7519
7522
|
var style = _a.style;
|
|
7520
7523
|
return style.width;
|
|
7521
7524
|
});
|
|
7522
|
-
var TopRightTagContainer$3 = newStyled.div(templateObject_6$
|
|
7523
|
-
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) {
|
|
7524
7527
|
var style = _a.style;
|
|
7525
7528
|
return style.width;
|
|
7526
7529
|
});
|
|
7527
|
-
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"])));
|
|
7528
7531
|
var ProductItemTK = function (_a) {
|
|
7529
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 ? {
|
|
7530
7533
|
display: false,
|
|
@@ -7568,26 +7571,26 @@ var ProductItemTK = function (_a) {
|
|
|
7568
7571
|
: undefined }, void 0));
|
|
7569
7572
|
};
|
|
7570
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)); };
|
|
7571
|
-
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 ? (
|
|
7572
7575
|
// @ts-ignore
|
|
7573
7576
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
7574
7577
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
7575
7578
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7576
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));
|
|
7577
7580
|
};
|
|
7578
|
-
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;
|
|
7579
7582
|
|
|
7580
|
-
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"])));
|
|
7581
7584
|
function withProductGrid(ProductItemComponent, data) {
|
|
7582
7585
|
function WithProductGrid(props) {
|
|
7583
|
-
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));
|
|
7584
7587
|
}
|
|
7585
7588
|
/* istanbul ignore next */
|
|
7586
7589
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
7587
7590
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7588
7591
|
return WithProductGrid;
|
|
7589
7592
|
}
|
|
7590
|
-
var templateObject_1$
|
|
7593
|
+
var templateObject_1$1u;
|
|
7591
7594
|
|
|
7592
7595
|
var Collection = {
|
|
7593
7596
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7595,11 +7598,11 @@ var Collection = {
|
|
|
7595
7598
|
ProductItemTK: ProductItemTK,
|
|
7596
7599
|
};
|
|
7597
7600
|
|
|
7598
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7599
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7600
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
7601
|
-
var Span = newStyled.span(templateObject_4$
|
|
7602
|
-
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"])));
|
|
7603
7606
|
var Label$5 = function (_a) {
|
|
7604
7607
|
var label = _a.label, values = _a.values;
|
|
7605
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));
|
|
@@ -7617,7 +7620,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7617
7620
|
Option: Option,
|
|
7618
7621
|
OptionsContainer: OptionsContainer,
|
|
7619
7622
|
});
|
|
7620
|
-
var templateObject_1$
|
|
7623
|
+
var templateObject_1$1t, templateObject_2$18, templateObject_3$X, templateObject_4$L, templateObject_5$C;
|
|
7621
7624
|
|
|
7622
7625
|
var OneColorSelector = function (_a) {
|
|
7623
7626
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7658,21 +7661,21 @@ var OutOfStock = function (_a) {
|
|
|
7658
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));
|
|
7659
7662
|
};
|
|
7660
7663
|
|
|
7661
|
-
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) {
|
|
7662
7665
|
var borderColor = _a.borderColor;
|
|
7663
7666
|
return borderColor;
|
|
7664
7667
|
}, function (_a) {
|
|
7665
7668
|
var noStock = _a.noStock;
|
|
7666
7669
|
return (noStock ? '0.4' : '1');
|
|
7667
7670
|
});
|
|
7668
|
-
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"])));
|
|
7669
7672
|
var PatternSelector = function (_a) {
|
|
7670
7673
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7671
7674
|
var theme = useTheme();
|
|
7672
7675
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7673
|
-
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));
|
|
7674
7677
|
};
|
|
7675
|
-
var templateObject_1$
|
|
7678
|
+
var templateObject_1$1s, templateObject_2$17;
|
|
7676
7679
|
|
|
7677
7680
|
var renderOptions$1 = function (options, showCross) {
|
|
7678
7681
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7700,10 +7703,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7700
7703
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7701
7704
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7702
7705
|
var showCloseIcon = (tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {}).showCloseIcon;
|
|
7703
|
-
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 "])));
|
|
7704
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));
|
|
7705
7708
|
};
|
|
7706
|
-
var templateObject_1$
|
|
7709
|
+
var templateObject_1$1r;
|
|
7707
7710
|
|
|
7708
7711
|
var renderOptions = function (selectedColor, options) {
|
|
7709
7712
|
if (options == null || options.length === 0) {
|
|
@@ -7741,21 +7744,21 @@ var MultiColorPicker = function (_a) {
|
|
|
7741
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));
|
|
7742
7745
|
};
|
|
7743
7746
|
|
|
7744
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7745
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7746
|
-
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) {
|
|
7747
7750
|
return props.rightToLeft &&
|
|
7748
7751
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7749
7752
|
});
|
|
7750
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7751
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
7752
|
-
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; });
|
|
7753
7756
|
var CrossSellCheckbox = function (_a) {
|
|
7754
7757
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7755
7758
|
var theme = useTheme();
|
|
7756
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));
|
|
7757
7760
|
};
|
|
7758
|
-
var templateObject_1$
|
|
7761
|
+
var templateObject_1$1q, templateObject_2$16, templateObject_3$W, templateObject_4$K, templateObject_5$B, templateObject_6$w;
|
|
7759
7762
|
|
|
7760
7763
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7761
7764
|
__proto__: null,
|
|
@@ -7784,7 +7787,7 @@ var sizeMapper = (_a = {},
|
|
|
7784
7787
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7785
7788
|
_a[exports.ComponentSize.XXSmall] = 'small',
|
|
7786
7789
|
_a);
|
|
7787
|
-
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) {
|
|
7788
7791
|
var wide = _a.wide;
|
|
7789
7792
|
return (wide ? '100%' : 'fit-content');
|
|
7790
7793
|
}, function (_a) {
|
|
@@ -7806,11 +7809,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1o || (templateObj
|
|
|
7806
7809
|
var theme = _a.theme;
|
|
7807
7810
|
return theme.colors.text.disabled;
|
|
7808
7811
|
});
|
|
7809
|
-
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) {
|
|
7810
7813
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7811
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 ");
|
|
7812
7815
|
});
|
|
7813
|
-
var templateObject_1$
|
|
7816
|
+
var templateObject_1$1p, templateObject_2$15;
|
|
7814
7817
|
|
|
7815
7818
|
var BaseCTA = function (_a) {
|
|
7816
7819
|
var _b, _c, _d;
|
|
@@ -7901,44 +7904,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7901
7904
|
} }), void 0));
|
|
7902
7905
|
};
|
|
7903
7906
|
|
|
7904
|
-
var Container$
|
|
7905
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
7906
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7907
|
-
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; });
|
|
7908
7911
|
var Note = function (_a) {
|
|
7909
7912
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7910
7913
|
var theme = useTheme();
|
|
7911
|
-
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));
|
|
7912
7915
|
};
|
|
7913
|
-
var templateObject_1$
|
|
7916
|
+
var templateObject_1$1o, templateObject_2$14, templateObject_3$V, templateObject_4$J;
|
|
7914
7917
|
|
|
7915
|
-
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) {
|
|
7916
7919
|
var theme = _a.theme;
|
|
7917
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 ");
|
|
7918
7921
|
});
|
|
7919
|
-
var Line = newStyled.div(templateObject_2$
|
|
7920
|
-
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({
|
|
7921
7924
|
flexDirection: ['column', 'row'],
|
|
7922
7925
|
}));
|
|
7923
|
-
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({
|
|
7924
7927
|
margin: ['0', '0 1.25rem'],
|
|
7925
7928
|
marginBottom: ['1.875rem', '0'],
|
|
7926
7929
|
alignItems: ['center', 'flex-start'],
|
|
7927
7930
|
textAlign: ['center', 'inherit'],
|
|
7928
7931
|
width: ['100%', 'inherit'],
|
|
7929
7932
|
}));
|
|
7930
|
-
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({
|
|
7931
7934
|
marginRight: ['0', '0.438rem'],
|
|
7932
7935
|
marginBottom: ['10px', '0'],
|
|
7933
7936
|
width: ['auto', '1.5rem'],
|
|
7934
7937
|
}));
|
|
7935
|
-
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({
|
|
7936
7939
|
display: ['block', 'flex'],
|
|
7937
7940
|
}), function (_a) {
|
|
7938
7941
|
var theme = _a.theme;
|
|
7939
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 ");
|
|
7940
7943
|
});
|
|
7941
|
-
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) {
|
|
7942
7945
|
var theme = _a.theme;
|
|
7943
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 ");
|
|
7944
7947
|
}, function (_a) {
|
|
@@ -7949,22 +7952,22 @@ var SectionDetails = newStyled.p(templateObject_7$p || (templateObject_7$p = __m
|
|
|
7949
7952
|
})
|
|
7950
7953
|
: '';
|
|
7951
7954
|
});
|
|
7952
|
-
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; });
|
|
7953
7956
|
var DeliveryDetails = function (_a) {
|
|
7954
7957
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7955
7958
|
var theme = useTheme();
|
|
7956
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));
|
|
7957
7960
|
};
|
|
7958
|
-
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;
|
|
7959
7962
|
|
|
7960
|
-
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) {
|
|
7961
7964
|
var top = _a.top;
|
|
7962
7965
|
return top;
|
|
7963
7966
|
}, function (_a) {
|
|
7964
7967
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7965
7968
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7966
7969
|
});
|
|
7967
|
-
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) {
|
|
7968
7971
|
var height = _a.height;
|
|
7969
7972
|
return height;
|
|
7970
7973
|
}, function (_a) {
|
|
@@ -8011,20 +8014,20 @@ var Drawer = function (_a) {
|
|
|
8011
8014
|
}, [isOpen, onClose, onOpen]);
|
|
8012
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;
|
|
8013
8016
|
};
|
|
8014
|
-
var templateObject_1$
|
|
8017
|
+
var templateObject_1$1m, templateObject_2$12;
|
|
8015
8018
|
|
|
8016
8019
|
var TooltipArrow = function (_a) {
|
|
8017
8020
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
8018
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));
|
|
8019
8022
|
};
|
|
8020
8023
|
|
|
8021
|
-
var List = newStyled.ul(templateObject_1$
|
|
8022
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
8023
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
8024
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
8025
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
8026
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
8027
|
-
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;
|
|
8028
8031
|
|
|
8029
8032
|
var DropdownListIcons = function (_a) {
|
|
8030
8033
|
var items = _a.items;
|
|
@@ -8037,13 +8040,13 @@ var Dropdown = function (_a) {
|
|
|
8037
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));
|
|
8038
8041
|
};
|
|
8039
8042
|
|
|
8040
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
8041
|
-
var DropdownLabel = newStyled.div(templateObject_2
|
|
8042
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
8043
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
8044
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
8045
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
8046
|
-
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;
|
|
8047
8050
|
|
|
8048
8051
|
var SizeDropdown = function (_a) {
|
|
8049
8052
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8066,15 +8069,15 @@ var SizeDropdown = function (_a) {
|
|
|
8066
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));
|
|
8067
8070
|
};
|
|
8068
8071
|
|
|
8069
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
8070
|
-
var DialogDropdownWrapper2 = newStyled.div(templateObject_2
|
|
8071
|
-
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) {
|
|
8072
8075
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
8073
8076
|
}, function (props) {
|
|
8074
8077
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8075
8078
|
});
|
|
8076
|
-
var DialogDropdownListItem = newStyled.li(templateObject_4$
|
|
8077
|
-
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"])));
|
|
8078
8081
|
var DropdownDialog = function (_a) {
|
|
8079
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;
|
|
8080
8083
|
var theme = useTheme$1();
|
|
@@ -8083,7 +8086,7 @@ var DropdownDialog = function (_a) {
|
|
|
8083
8086
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8084
8087
|
}) }), void 0) }), void 0));
|
|
8085
8088
|
};
|
|
8086
|
-
var templateObject_1$
|
|
8089
|
+
var templateObject_1$1j, templateObject_2$$, templateObject_3$R, templateObject_4$F, templateObject_5$x;
|
|
8087
8090
|
|
|
8088
8091
|
function FilteringDropdown(_a) {
|
|
8089
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;
|
|
@@ -8116,29 +8119,29 @@ function FilteringDropdown(_a) {
|
|
|
8116
8119
|
}) }, void 0)] }), void 0));
|
|
8117
8120
|
}
|
|
8118
8121
|
|
|
8119
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
8120
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
8121
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
8122
|
-
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'); });
|
|
8123
8126
|
var Accordion = function (_a) {
|
|
8124
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;
|
|
8125
8128
|
var theme = useTheme();
|
|
8126
8129
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8127
|
-
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));
|
|
8128
8131
|
};
|
|
8129
|
-
var templateObject_1$
|
|
8130
|
-
|
|
8131
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
8132
|
-
var Header$3 = newStyled.div(templateObject_2$
|
|
8133
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
8134
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
8135
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
8136
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
8137
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
8138
|
-
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; });
|
|
8139
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"])));
|
|
8140
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"])));
|
|
8141
|
-
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;
|
|
8142
8145
|
|
|
8143
8146
|
var getStylesBySize$9 = function (size, theme) {
|
|
8144
8147
|
switch (size) {
|
|
@@ -8203,9 +8206,9 @@ var SelectorSecondary = function (_a) {
|
|
|
8203
8206
|
} }), id: id }, void 0));
|
|
8204
8207
|
};
|
|
8205
8208
|
|
|
8206
|
-
var UL = newStyled.ul(templateObject_1$
|
|
8207
|
-
var LI = newStyled.li(templateObject_2$
|
|
8208
|
-
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"])));
|
|
8209
8212
|
var Tags = function (_a) {
|
|
8210
8213
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
8211
8214
|
var theme = useTheme();
|
|
@@ -8213,7 +8216,7 @@ var Tags = function (_a) {
|
|
|
8213
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));
|
|
8214
8217
|
}) }), void 0));
|
|
8215
8218
|
};
|
|
8216
|
-
var templateObject_1$
|
|
8219
|
+
var templateObject_1$1g, templateObject_2$Y, templateObject_3$O;
|
|
8217
8220
|
|
|
8218
8221
|
var Filters = function (_a) {
|
|
8219
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;
|
|
@@ -8349,8 +8352,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8349
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));
|
|
8350
8353
|
};
|
|
8351
8354
|
|
|
8352
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
8353
|
-
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"])));
|
|
8354
8357
|
var FitGuarantee = function (_a) {
|
|
8355
8358
|
var _b;
|
|
8356
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;
|
|
@@ -8361,17 +8364,17 @@ var FitGuarantee = function (_a) {
|
|
|
8361
8364
|
console.error('Icon', iconName, 'not found');
|
|
8362
8365
|
return null;
|
|
8363
8366
|
}
|
|
8364
|
-
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: {
|
|
8365
8368
|
margin: '0.1rem 0',
|
|
8366
8369
|
width: '100%',
|
|
8367
8370
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
8368
8371
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8369
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));
|
|
8370
8373
|
};
|
|
8371
|
-
var templateObject_1$
|
|
8374
|
+
var templateObject_1$1f, templateObject_2$X;
|
|
8372
8375
|
|
|
8373
|
-
var Container$
|
|
8374
|
-
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; });
|
|
8375
8378
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8376
8379
|
border: 'none',
|
|
8377
8380
|
background: 'transparent',
|
|
@@ -8384,9 +8387,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
8384
8387
|
var FitPredictor = function (_a) {
|
|
8385
8388
|
var onClick = _a.onClick;
|
|
8386
8389
|
var theme = useTheme();
|
|
8387
|
-
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));
|
|
8388
8391
|
};
|
|
8389
|
-
var templateObject_1$
|
|
8392
|
+
var templateObject_1$1e, templateObject_2$W;
|
|
8390
8393
|
|
|
8391
8394
|
var Button$8 = newStyled.button(function () { return ({
|
|
8392
8395
|
background: 'transparent',
|
|
@@ -12630,14 +12633,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12630
12633
|
return Slider;
|
|
12631
12634
|
}(React__default["default"].Component);
|
|
12632
12635
|
|
|
12633
|
-
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) {
|
|
12634
12637
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12635
12638
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12636
12639
|
}, function (_a) {
|
|
12637
12640
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12638
12641
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12639
12642
|
});
|
|
12640
|
-
var templateObject_1$
|
|
12643
|
+
var templateObject_1$1d;
|
|
12641
12644
|
|
|
12642
12645
|
var getStylesBySize$8 = function (size) {
|
|
12643
12646
|
// rem units
|
|
@@ -12696,7 +12699,7 @@ var SliderNavigation = function (_a) {
|
|
|
12696
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));
|
|
12697
12700
|
};
|
|
12698
12701
|
|
|
12699
|
-
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) {
|
|
12700
12703
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12701
12704
|
return borderRadiusVariant &&
|
|
12702
12705
|
"\n border-radius: 20px;\n ";
|
|
@@ -12714,7 +12717,7 @@ var Image$1 = newStyled.img(templateObject_1$1b || (templateObject_1$1b = __make
|
|
|
12714
12717
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12715
12718
|
: 'inherit';
|
|
12716
12719
|
});
|
|
12717
|
-
var templateObject_1$
|
|
12720
|
+
var templateObject_1$1c;
|
|
12718
12721
|
|
|
12719
12722
|
var ImageSmallPreview = function (_a) {
|
|
12720
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;
|
|
@@ -12722,9 +12725,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12722
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));
|
|
12723
12726
|
};
|
|
12724
12727
|
|
|
12725
|
-
var horizontalStyles = css(templateObject_1$
|
|
12726
|
-
var verticalStyles = css(templateObject_2$
|
|
12727
|
-
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) {
|
|
12728
12731
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12729
12732
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12730
12733
|
}, function (_a) {
|
|
@@ -12735,12 +12738,12 @@ var Container$U = newStyled.div(templateObject_3$M || (templateObject_3$M = __ma
|
|
|
12735
12738
|
return hasOverflowArrows &&
|
|
12736
12739
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12737
12740
|
});
|
|
12738
|
-
var Button$7 = newStyled.button(templateObject_4$
|
|
12739
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12740
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12741
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12742
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
12743
|
-
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;
|
|
12744
12747
|
|
|
12745
12748
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12746
12749
|
var loading = 'eager';
|
|
@@ -12768,7 +12771,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12768
12771
|
var element = document.querySelector(".imageListContainer");
|
|
12769
12772
|
element.scrollBy(0, 200);
|
|
12770
12773
|
};
|
|
12771
|
-
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: {
|
|
12772
12775
|
arrowWidth: 0.75,
|
|
12773
12776
|
arrowHeight: 1.25,
|
|
12774
12777
|
arrowPadding: 1.625,
|
|
@@ -14368,40 +14371,40 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14368
14371
|
afterZoomOut: PropTypes.func
|
|
14369
14372
|
} : {};
|
|
14370
14373
|
|
|
14371
|
-
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) {
|
|
14372
14375
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14373
14376
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14374
14377
|
});
|
|
14375
|
-
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) {
|
|
14376
14379
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14377
14380
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
14378
14381
|
}, function (_a) {
|
|
14379
14382
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14380
14383
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
14381
14384
|
});
|
|
14382
|
-
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) {
|
|
14383
14386
|
var isCTAHidden = _a.isCTAHidden;
|
|
14384
14387
|
return (isCTAHidden ? '60px' : '120px');
|
|
14385
14388
|
});
|
|
14386
|
-
var TopRightTagWrapper = newStyled.div(templateObject_4$
|
|
14387
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_5$
|
|
14388
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$
|
|
14389
|
-
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) {
|
|
14390
14393
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14391
14394
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14392
14395
|
});
|
|
14393
|
-
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) {
|
|
14394
14397
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14395
14398
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14396
14399
|
});
|
|
14397
|
-
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;
|
|
14398
14401
|
|
|
14399
14402
|
var ImageProductSlide$1 = function (_a) {
|
|
14400
14403
|
var _b;
|
|
14401
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;
|
|
14402
14405
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14403
14406
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
14404
|
-
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: {
|
|
14405
14408
|
alt: content.alt,
|
|
14406
14409
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
14407
14410
|
loading: 'eager',
|
|
@@ -14409,8 +14412,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14409
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));
|
|
14410
14413
|
};
|
|
14411
14414
|
|
|
14412
|
-
var Container$
|
|
14413
|
-
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;
|
|
14414
14417
|
|
|
14415
14418
|
var getInitialIndex = function (images, selectedValue) {
|
|
14416
14419
|
if (selectedValue) {
|
|
@@ -14436,10 +14439,10 @@ var ProductGallery = function (_a) {
|
|
|
14436
14439
|
setActiveIndex(index);
|
|
14437
14440
|
};
|
|
14438
14441
|
var selectedImage = images[activeIndex];
|
|
14439
|
-
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));
|
|
14440
14443
|
};
|
|
14441
14444
|
|
|
14442
|
-
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; });
|
|
14443
14446
|
var AmazonButton = function (_a) {
|
|
14444
14447
|
var onClick = _a.onClick;
|
|
14445
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));
|
|
@@ -14448,9 +14451,9 @@ var PaypalButton = function (_a) {
|
|
|
14448
14451
|
var onClick = _a.onClick;
|
|
14449
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));
|
|
14450
14453
|
};
|
|
14451
|
-
var templateObject_1$
|
|
14454
|
+
var templateObject_1$18;
|
|
14452
14455
|
|
|
14453
|
-
var Container$
|
|
14456
|
+
var Container$S = newStyled.div(function (props) { return ({
|
|
14454
14457
|
height: 'auto',
|
|
14455
14458
|
textAlign: 'center',
|
|
14456
14459
|
justifyContent: 'center',
|
|
@@ -14500,12 +14503,12 @@ var IconsWithTitle = function (_a) {
|
|
|
14500
14503
|
textAlign: 'center',
|
|
14501
14504
|
lineHeight: '18px',
|
|
14502
14505
|
};
|
|
14503
|
-
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));
|
|
14504
14507
|
};
|
|
14505
14508
|
|
|
14506
|
-
var Container$
|
|
14507
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14508
|
-
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) {
|
|
14509
14512
|
var titlePosition = _a.titlePosition;
|
|
14510
14513
|
return titlePosition == 'center' &&
|
|
14511
14514
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14513,15 +14516,15 @@ var StyledTitle = newStyled.div(templateObject_3$K || (templateObject_3$K = __ma
|
|
|
14513
14516
|
var ImageCardWithDescription = function (_a) {
|
|
14514
14517
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14515
14518
|
var isMobile = useWindowDimensions().isMobile;
|
|
14516
|
-
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));
|
|
14517
14520
|
};
|
|
14518
|
-
var templateObject_1$
|
|
14521
|
+
var templateObject_1$17, templateObject_2$T, templateObject_3$L;
|
|
14519
14522
|
|
|
14520
|
-
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) {
|
|
14521
14524
|
var color = _a.color;
|
|
14522
14525
|
return color;
|
|
14523
14526
|
});
|
|
14524
|
-
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) {
|
|
14525
14528
|
var color = _a.color;
|
|
14526
14529
|
return color;
|
|
14527
14530
|
});
|
|
@@ -14530,7 +14533,7 @@ var InputLabel = function (_a) {
|
|
|
14530
14533
|
var theme = useTheme();
|
|
14531
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));
|
|
14532
14535
|
};
|
|
14533
|
-
var templateObject_1$
|
|
14536
|
+
var templateObject_1$16, templateObject_2$S;
|
|
14534
14537
|
|
|
14535
14538
|
var containerByStatus = function (theme, status) {
|
|
14536
14539
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -14539,12 +14542,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14539
14542
|
return theme.colors.semantic.urgent.color;
|
|
14540
14543
|
return '';
|
|
14541
14544
|
};
|
|
14542
|
-
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) {
|
|
14543
14546
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14544
14547
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14545
14548
|
});
|
|
14546
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14547
|
-
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) {
|
|
14548
14551
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14549
14552
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14550
14553
|
}, function (_a) {
|
|
@@ -14599,11 +14602,11 @@ var StyledInput = newStyled.input(templateObject_3$J || (templateObject_3$J = __
|
|
|
14599
14602
|
return hasValue &&
|
|
14600
14603
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14601
14604
|
});
|
|
14602
|
-
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) {
|
|
14603
14606
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14604
14607
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14605
14608
|
});
|
|
14606
|
-
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) {
|
|
14607
14610
|
var theme = _a.theme;
|
|
14608
14611
|
return theme.component.input.placeholderColor;
|
|
14609
14612
|
}, function (_a) {
|
|
@@ -14616,8 +14619,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$s || (templateObject_5
|
|
|
14616
14619
|
var theme = _a.theme;
|
|
14617
14620
|
return theme.component.input.lineHeight;
|
|
14618
14621
|
});
|
|
14619
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14620
|
-
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;
|
|
14621
14624
|
|
|
14622
14625
|
var BaseInput = function (_a) {
|
|
14623
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"]);
|
|
@@ -14641,7 +14644,7 @@ var BaseInput = function (_a) {
|
|
|
14641
14644
|
}, [status]);
|
|
14642
14645
|
var hasValue = Boolean(value);
|
|
14643
14646
|
var errorMessage = customErrorMessage || (status === exports.InputValidationType.Error && required);
|
|
14644
|
-
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) {
|
|
14645
14648
|
onChange(event.target.value, event);
|
|
14646
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 () {
|
|
14647
14650
|
onChange('', { target: { value: '' } });
|
|
@@ -14662,11 +14665,11 @@ var Button$6 = function (_a) {
|
|
|
14662
14665
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14663
14666
|
};
|
|
14664
14667
|
|
|
14665
|
-
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) {
|
|
14666
14669
|
var theme = _a.theme;
|
|
14667
14670
|
return theme.component.inputCustom.input.borderRadius;
|
|
14668
14671
|
});
|
|
14669
|
-
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) {
|
|
14670
14673
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14671
14674
|
return defaultRounded
|
|
14672
14675
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14681,23 +14684,23 @@ var Custom = function (_a) {
|
|
|
14681
14684
|
text: text,
|
|
14682
14685
|
disabled: rest.disabled,
|
|
14683
14686
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14684
|
-
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));
|
|
14685
14688
|
};
|
|
14686
|
-
var templateObject_1$
|
|
14689
|
+
var templateObject_1$14, templateObject_2$Q;
|
|
14687
14690
|
|
|
14688
|
-
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) {
|
|
14689
14692
|
var size = _a.size;
|
|
14690
14693
|
return (size === 'small' ? '36px' : '');
|
|
14691
14694
|
});
|
|
14692
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14693
|
-
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"])));
|
|
14694
14697
|
var Success = function (_a) {
|
|
14695
14698
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14696
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));
|
|
14697
14700
|
};
|
|
14698
|
-
var templateObject_1$
|
|
14701
|
+
var templateObject_1$13, templateObject_2$P, templateObject_3$J;
|
|
14699
14702
|
|
|
14700
|
-
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) {
|
|
14701
14704
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14702
14705
|
return status === exports.InputValidationType.Empty &&
|
|
14703
14706
|
type === 'primary' &&
|
|
@@ -14714,16 +14717,16 @@ var BasePlusButton = function (_a) {
|
|
|
14714
14717
|
}
|
|
14715
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));
|
|
14716
14719
|
};
|
|
14717
|
-
var templateObject_1$
|
|
14720
|
+
var templateObject_1$12;
|
|
14718
14721
|
|
|
14719
|
-
var Container$
|
|
14720
|
-
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"])));
|
|
14721
14724
|
var BasePlusIcon = function (_a) {
|
|
14722
14725
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14723
14726
|
var theme = useTheme();
|
|
14724
|
-
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));
|
|
14725
14728
|
};
|
|
14726
|
-
var templateObject_1$
|
|
14729
|
+
var templateObject_1$11, templateObject_2$O;
|
|
14727
14730
|
|
|
14728
14731
|
var Input$3 = {
|
|
14729
14732
|
Simple: BaseInput,
|
|
@@ -14863,21 +14866,21 @@ var Portal = function (_a) {
|
|
|
14863
14866
|
var visibleStyle = function (_a) {
|
|
14864
14867
|
var opened = _a.opened;
|
|
14865
14868
|
return opened
|
|
14866
|
-
? 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 "])));
|
|
14867
14870
|
};
|
|
14868
14871
|
var transformStyle = function (_a) {
|
|
14869
14872
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14870
14873
|
return opened
|
|
14871
|
-
? 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%');
|
|
14872
14875
|
};
|
|
14873
|
-
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) {
|
|
14874
14877
|
var width = _a.width;
|
|
14875
14878
|
return width
|
|
14876
|
-
? css(templateObject_5$
|
|
14879
|
+
? css(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14877
14880
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14878
14881
|
});
|
|
14879
14882
|
}, visibleStyle, transformStyle);
|
|
14880
|
-
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);
|
|
14881
14884
|
var Modal = function (_a) {
|
|
14882
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;
|
|
14883
14886
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14887,7 +14890,7 @@ var Modal = function (_a) {
|
|
|
14887
14890
|
}
|
|
14888
14891
|
close();
|
|
14889
14892
|
};
|
|
14890
|
-
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 () {
|
|
14891
14894
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14892
14895
|
onDismiss();
|
|
14893
14896
|
} }, void 0)] }), void 0));
|
|
@@ -14918,7 +14921,7 @@ var useModal = function (id) {
|
|
|
14918
14921
|
close: close,
|
|
14919
14922
|
}); }, [close, open, opened]);
|
|
14920
14923
|
};
|
|
14921
|
-
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;
|
|
14922
14925
|
|
|
14923
14926
|
var htmlReactParser = {exports: {}};
|
|
14924
14927
|
|
|
@@ -18699,7 +18702,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18699
18702
|
HTMLReactParser$1.attributesToProps;
|
|
18700
18703
|
HTMLReactParser$1.Element;
|
|
18701
18704
|
|
|
18702
|
-
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) {
|
|
18703
18706
|
var height = _a.height;
|
|
18704
18707
|
return height || '0.5rem';
|
|
18705
18708
|
}, function (_a) {
|
|
@@ -18738,7 +18741,7 @@ var BarContainer = newStyled.div({
|
|
|
18738
18741
|
padding: '0 16px',
|
|
18739
18742
|
position: 'relative',
|
|
18740
18743
|
});
|
|
18741
|
-
var Container$
|
|
18744
|
+
var Container$M = newStyled.div(function (_a) {
|
|
18742
18745
|
var backgroundColor = _a.backgroundColor;
|
|
18743
18746
|
return ({
|
|
18744
18747
|
width: '475px',
|
|
@@ -18751,7 +18754,7 @@ var Container$L = newStyled.div(function (_a) {
|
|
|
18751
18754
|
background: backgroundColor,
|
|
18752
18755
|
});
|
|
18753
18756
|
});
|
|
18754
|
-
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"])));
|
|
18755
18758
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18756
18759
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18757
18760
|
};
|
|
@@ -18780,33 +18783,33 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18780
18783
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18781
18784
|
return (jsxRuntime.jsx(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18782
18785
|
};
|
|
18783
|
-
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));
|
|
18784
18787
|
};
|
|
18785
|
-
var templateObject_1
|
|
18788
|
+
var templateObject_1$$, templateObject_2$M;
|
|
18786
18789
|
|
|
18787
|
-
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) {
|
|
18788
18791
|
var theme = _a.theme;
|
|
18789
18792
|
return theme.component.orderBar.backgroundColor;
|
|
18790
18793
|
});
|
|
18791
|
-
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; });
|
|
18792
18795
|
var OrderBar = function (_a) {
|
|
18793
18796
|
var message = _a.message, color = _a.color;
|
|
18794
18797
|
var theme = useTheme();
|
|
18795
|
-
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));
|
|
18796
18799
|
};
|
|
18797
|
-
var templateObject_1$
|
|
18798
|
-
|
|
18799
|
-
var Container$
|
|
18800
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18801
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18802
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18803
|
-
var Check = newStyled.div(templateObject_5$
|
|
18804
|
-
var IconContainer$2 = newStyled.div(templateObject_6$
|
|
18805
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18806
|
-
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"])));
|
|
18807
18810
|
var PackSelector = function (_a) {
|
|
18808
18811
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18809
|
-
return (jsxRuntime.jsx(Container$
|
|
18812
|
+
return (jsxRuntime.jsx(Container$K, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18810
18813
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18811
18814
|
}) }), void 0));
|
|
18812
18815
|
};
|
|
@@ -18833,14 +18836,14 @@ var PackCard = function (_a) {
|
|
|
18833
18836
|
currency: currencyCode || 'USD',
|
|
18834
18837
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18835
18838
|
};
|
|
18836
|
-
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;
|
|
18837
18840
|
|
|
18838
|
-
var Container$
|
|
18839
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18840
|
-
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({
|
|
18841
18844
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18842
18845
|
}));
|
|
18843
|
-
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) {
|
|
18844
18847
|
var bold = _a.bold;
|
|
18845
18848
|
return (bold ? '700' : '500');
|
|
18846
18849
|
}, function (_a) {
|
|
@@ -18857,7 +18860,7 @@ var PageNumber = newStyled.span(templateObject_4$w || (templateObject_4$w = __ma
|
|
|
18857
18860
|
var background = _a.background;
|
|
18858
18861
|
return background || 'unset';
|
|
18859
18862
|
});
|
|
18860
|
-
var templateObject_1$
|
|
18863
|
+
var templateObject_1$Y, templateObject_2$J, templateObject_3$G, templateObject_4$x;
|
|
18861
18864
|
|
|
18862
18865
|
var Pagination = function (_a) {
|
|
18863
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;
|
|
@@ -18903,7 +18906,7 @@ var Pagination = function (_a) {
|
|
|
18903
18906
|
}
|
|
18904
18907
|
return pages;
|
|
18905
18908
|
}, [from, page, showReducedPages, to]);
|
|
18906
|
-
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));
|
|
18907
18910
|
};
|
|
18908
18911
|
|
|
18909
18912
|
var PaginatorBlog = function (_a) {
|
|
@@ -18917,12 +18920,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18917
18920
|
setPage(page);
|
|
18918
18921
|
onChange(page);
|
|
18919
18922
|
};
|
|
18920
|
-
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
|
|
18921
18924
|
? theme.colors.shades['white'].color
|
|
18922
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));
|
|
18923
18926
|
};
|
|
18924
18927
|
|
|
18925
|
-
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) {
|
|
18926
18929
|
var width = _a.width;
|
|
18927
18930
|
return width;
|
|
18928
18931
|
}, function (_a) {
|
|
@@ -18938,14 +18941,14 @@ var Container$H = newStyled.div(templateObject_1$W || (templateObject_1$W = __ma
|
|
|
18938
18941
|
var PaymentMethod = function (_a) {
|
|
18939
18942
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18940
18943
|
var theme = useTheme();
|
|
18941
|
-
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));
|
|
18942
18945
|
};
|
|
18943
|
-
var templateObject_1$
|
|
18946
|
+
var templateObject_1$X;
|
|
18944
18947
|
|
|
18945
|
-
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"])));
|
|
18946
18949
|
var IMAGE_WIDTH = '63px';
|
|
18947
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18948
|
-
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({
|
|
18949
18952
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18950
18953
|
}), IMAGE_WIDTH);
|
|
18951
18954
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18968,7 +18971,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18968
18971
|
margin: margin,
|
|
18969
18972
|
});
|
|
18970
18973
|
});
|
|
18971
|
-
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) {
|
|
18972
18975
|
var withTag = _a.withTag; _a.theme;
|
|
18973
18976
|
return withTag
|
|
18974
18977
|
? mediaQueries({
|
|
@@ -18977,9 +18980,9 @@ var PriceContainer = newStyled.div(templateObject_4$v || (templateObject_4$v = _
|
|
|
18977
18980
|
})
|
|
18978
18981
|
: 'justify-content: end';
|
|
18979
18982
|
});
|
|
18980
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18981
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18982
|
-
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) {
|
|
18983
18986
|
var theme = _a.theme;
|
|
18984
18987
|
return theme.colors.semantic.urgent.color;
|
|
18985
18988
|
});
|
|
@@ -18987,9 +18990,9 @@ var SimpleOrderItem = function (_a) {
|
|
|
18987
18990
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18988
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;
|
|
18989
18992
|
var theme = useTheme();
|
|
18990
|
-
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));
|
|
18991
18994
|
};
|
|
18992
|
-
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;
|
|
18993
18996
|
|
|
18994
18997
|
var P$1 = newStyled.p(function (_a) {
|
|
18995
18998
|
var color = _a.color;
|
|
@@ -19003,7 +19006,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
19003
19006
|
margin: '0.938rem 4.188rem',
|
|
19004
19007
|
});
|
|
19005
19008
|
});
|
|
19006
|
-
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) {
|
|
19007
19010
|
var height = _a.height;
|
|
19008
19011
|
return height || '0.5rem';
|
|
19009
19012
|
}, function (_a) {
|
|
@@ -19032,7 +19035,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
19032
19035
|
position: 'absolute',
|
|
19033
19036
|
});
|
|
19034
19037
|
});
|
|
19035
|
-
var Container$
|
|
19038
|
+
var Container$G = newStyled.div(function (_a) {
|
|
19036
19039
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
19037
19040
|
return ({
|
|
19038
19041
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -19046,14 +19049,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
19046
19049
|
var ProgressBar = function (_a) {
|
|
19047
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;
|
|
19048
19051
|
var theme = useTheme();
|
|
19049
|
-
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));
|
|
19050
19053
|
};
|
|
19051
|
-
var templateObject_1$
|
|
19054
|
+
var templateObject_1$V;
|
|
19052
19055
|
|
|
19053
|
-
var Container$
|
|
19054
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19055
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19056
|
-
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)'; });
|
|
19057
19060
|
var QuantityPicker = function (_a) {
|
|
19058
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;
|
|
19059
19062
|
var theme = useTheme();
|
|
@@ -19076,9 +19079,9 @@ var QuantityPicker = function (_a) {
|
|
|
19076
19079
|
return clamp(value);
|
|
19077
19080
|
});
|
|
19078
19081
|
}, [value, clamp]);
|
|
19079
|
-
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));
|
|
19080
19083
|
};
|
|
19081
|
-
var templateObject_1$
|
|
19084
|
+
var templateObject_1$U, templateObject_2$H, templateObject_3$E, templateObject_4$v;
|
|
19082
19085
|
|
|
19083
19086
|
/* base styles & size variants */
|
|
19084
19087
|
var CustomRadioStyles$1 = {
|
|
@@ -19147,9 +19150,9 @@ var ContainerStyles$1 = {
|
|
|
19147
19150
|
},
|
|
19148
19151
|
};
|
|
19149
19152
|
|
|
19150
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19151
|
-
var Container$
|
|
19152
|
-
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) {
|
|
19153
19156
|
var disabled = _a.disabled;
|
|
19154
19157
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19155
19158
|
});
|
|
@@ -19157,7 +19160,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19157
19160
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19158
19161
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19159
19162
|
]; });
|
|
19160
|
-
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"])));
|
|
19161
19164
|
var RadioPrimary = function (_a) {
|
|
19162
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;
|
|
19163
19166
|
var theme = useTheme();
|
|
@@ -19165,9 +19168,9 @@ var RadioPrimary = function (_a) {
|
|
|
19165
19168
|
var value = event.currentTarget.value;
|
|
19166
19169
|
onChange({ value: value, label: label });
|
|
19167
19170
|
};
|
|
19168
|
-
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));
|
|
19169
19172
|
};
|
|
19170
|
-
var templateObject_1$
|
|
19173
|
+
var templateObject_1$T, templateObject_2$G, templateObject_3$D;
|
|
19171
19174
|
|
|
19172
19175
|
var RadioGroupInput = function (_a) {
|
|
19173
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;
|
|
@@ -19246,9 +19249,9 @@ var ContainerStyles = {
|
|
|
19246
19249
|
},
|
|
19247
19250
|
};
|
|
19248
19251
|
|
|
19249
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19250
|
-
var Container$
|
|
19251
|
-
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) {
|
|
19252
19255
|
var disabled = _a.disabled;
|
|
19253
19256
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19254
19257
|
});
|
|
@@ -19256,7 +19259,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19256
19259
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19257
19260
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19258
19261
|
]; });
|
|
19259
|
-
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) {
|
|
19260
19263
|
var theme = _a.theme;
|
|
19261
19264
|
return theme.component.radio.textSize;
|
|
19262
19265
|
}, function (_a) {
|
|
@@ -19270,9 +19273,9 @@ var ClubRadioInput = function (_a) {
|
|
|
19270
19273
|
var value = event.currentTarget.value;
|
|
19271
19274
|
onChange({ value: value, label: label });
|
|
19272
19275
|
};
|
|
19273
|
-
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));
|
|
19274
19277
|
};
|
|
19275
|
-
var templateObject_1$
|
|
19278
|
+
var templateObject_1$S, templateObject_2$F, templateObject_3$C;
|
|
19276
19279
|
|
|
19277
19280
|
var ClubRadioGroupInput = function (_a) {
|
|
19278
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;
|
|
@@ -19300,14 +19303,14 @@ function formatDate(date, format) {
|
|
|
19300
19303
|
}
|
|
19301
19304
|
}
|
|
19302
19305
|
|
|
19303
|
-
var Container$
|
|
19304
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19305
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19306
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19307
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19308
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19309
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19310
|
-
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"])));
|
|
19311
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"])));
|
|
19312
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"])));
|
|
19313
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"])));
|
|
@@ -19338,21 +19341,21 @@ var Review$1 = function (_a) {
|
|
|
19338
19341
|
}
|
|
19339
19342
|
}
|
|
19340
19343
|
}, [opened]);
|
|
19341
|
-
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 &&
|
|
19342
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));
|
|
19343
19346
|
};
|
|
19344
|
-
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;
|
|
19345
19348
|
|
|
19346
19349
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19347
19350
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19348
|
-
var Container$
|
|
19349
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19350
|
-
var Content = newStyled.div(templateObject_3$
|
|
19351
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19352
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19353
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19354
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19355
|
-
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"])));
|
|
19356
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"])));
|
|
19357
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"])));
|
|
19358
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"])));
|
|
@@ -19387,7 +19390,7 @@ var Review = function (_a) {
|
|
|
19387
19390
|
});
|
|
19388
19391
|
};
|
|
19389
19392
|
}, [randomId]);
|
|
19390
|
-
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: {
|
|
19391
19394
|
__html: showMoreMobile
|
|
19392
19395
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19393
19396
|
: description,
|
|
@@ -19397,15 +19400,15 @@ var Review = function (_a) {
|
|
|
19397
19400
|
: description,
|
|
19398
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));
|
|
19399
19402
|
};
|
|
19400
|
-
var templateObject_1$
|
|
19401
|
-
|
|
19402
|
-
var Container$
|
|
19403
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19404
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19405
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19406
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19407
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19408
|
-
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) {
|
|
19409
19412
|
var backgroundUrl = _a.backgroundUrl;
|
|
19410
19413
|
return "url(".concat(backgroundUrl, ")");
|
|
19411
19414
|
});
|
|
@@ -19413,25 +19416,25 @@ var ReviewsHeader = function (_a) {
|
|
|
19413
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;
|
|
19414
19417
|
var starsNumber = 5;
|
|
19415
19418
|
var theme = useTheme();
|
|
19416
|
-
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));
|
|
19417
19420
|
};
|
|
19418
|
-
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;
|
|
19419
19422
|
|
|
19420
|
-
var Container$
|
|
19421
|
-
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; });
|
|
19422
19425
|
var ScrollToTop = function (_a) {
|
|
19423
19426
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19424
19427
|
var theme = useTheme();
|
|
19425
19428
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19426
|
-
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));
|
|
19427
19430
|
};
|
|
19428
|
-
var templateObject_1$
|
|
19431
|
+
var templateObject_1$O, templateObject_2$B;
|
|
19429
19432
|
|
|
19430
|
-
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({
|
|
19431
19434
|
right: ['1rem', '7.75rem'],
|
|
19432
19435
|
top: ['0.75rem', '0.75rem'],
|
|
19433
19436
|
}));
|
|
19434
|
-
var templateObject_1$
|
|
19437
|
+
var templateObject_1$N;
|
|
19435
19438
|
|
|
19436
19439
|
var ClearButton = function (_a) {
|
|
19437
19440
|
var onClick = _a.onClick;
|
|
@@ -19439,7 +19442,7 @@ var ClearButton = function (_a) {
|
|
|
19439
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));
|
|
19440
19443
|
};
|
|
19441
19444
|
|
|
19442
|
-
var Container$
|
|
19445
|
+
var Container$y = newStyled.div({
|
|
19443
19446
|
display: 'flex',
|
|
19444
19447
|
justifyContent: 'center',
|
|
19445
19448
|
padding: '1rem',
|
|
@@ -19447,10 +19450,10 @@ var Container$x = newStyled.div({
|
|
|
19447
19450
|
|
|
19448
19451
|
var Footer = function (_a) {
|
|
19449
19452
|
var text = _a.text, onClick = _a.onClick;
|
|
19450
|
-
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));
|
|
19451
19454
|
};
|
|
19452
19455
|
|
|
19453
|
-
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({
|
|
19454
19457
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19455
19458
|
}));
|
|
19456
19459
|
var Description = newStyled.div({
|
|
@@ -19464,20 +19467,20 @@ var Description = newStyled.div({
|
|
|
19464
19467
|
textAlign: 'start',
|
|
19465
19468
|
},
|
|
19466
19469
|
});
|
|
19467
|
-
var templateObject_1$
|
|
19470
|
+
var templateObject_1$M;
|
|
19468
19471
|
|
|
19469
19472
|
var ProductItem = function (_a) {
|
|
19470
19473
|
var _b;
|
|
19471
19474
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19472
19475
|
var theme = useTheme();
|
|
19473
|
-
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));
|
|
19474
19477
|
};
|
|
19475
19478
|
|
|
19476
19479
|
var OptionsList = newStyled.ul({
|
|
19477
19480
|
margin: '0px',
|
|
19478
19481
|
padding: '0px',
|
|
19479
19482
|
});
|
|
19480
|
-
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({
|
|
19481
19484
|
padding: [0, '0rem 1rem'],
|
|
19482
19485
|
borderRadius: [0, '0.5rem'],
|
|
19483
19486
|
}));
|
|
@@ -19489,20 +19492,20 @@ var Anchor = newStyled.a({
|
|
|
19489
19492
|
padding: 0,
|
|
19490
19493
|
textDecoration: 'none',
|
|
19491
19494
|
});
|
|
19492
|
-
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({
|
|
19493
19496
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19494
19497
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19495
19498
|
borderRadius: ['0', '0.5rem'],
|
|
19496
19499
|
}));
|
|
19497
|
-
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({
|
|
19498
19501
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19499
19502
|
}));
|
|
19500
|
-
var templateObject_1$
|
|
19503
|
+
var templateObject_1$L, templateObject_2$A, templateObject_3$y;
|
|
19501
19504
|
|
|
19502
19505
|
var ResultsPanel = function (_a) {
|
|
19503
19506
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19504
19507
|
var theme = useTheme();
|
|
19505
|
-
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) {
|
|
19506
19509
|
var optionUrl = _a.optionUrl, price = _a.price, src = _a.src, title = _a.title;
|
|
19507
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));
|
|
19508
19511
|
}) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
@@ -19516,8 +19519,8 @@ var SearchIconContainer = newStyled.div({
|
|
|
19516
19519
|
background: 'white',
|
|
19517
19520
|
alignSelf: 'center',
|
|
19518
19521
|
});
|
|
19519
|
-
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19520
|
-
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;
|
|
19521
19524
|
|
|
19522
19525
|
var SearchControl = function (_a) {
|
|
19523
19526
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
@@ -19563,7 +19566,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19563
19566
|
},
|
|
19564
19567
|
},
|
|
19565
19568
|
}); });
|
|
19566
|
-
var Container$
|
|
19569
|
+
var Container$v = newStyled.div({
|
|
19567
19570
|
position: 'relative',
|
|
19568
19571
|
display: 'flex',
|
|
19569
19572
|
});
|
|
@@ -19618,7 +19621,7 @@ var SearchBar = function (_a) {
|
|
|
19618
19621
|
if (e.cancelable) {
|
|
19619
19622
|
e.preventDefault();
|
|
19620
19623
|
}
|
|
19621
|
-
}, 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) {
|
|
19622
19625
|
if (e.key === 'Enter') {
|
|
19623
19626
|
if (e.cancelable) {
|
|
19624
19627
|
e.preventDefault();
|
|
@@ -19629,21 +19632,21 @@ var SearchBar = function (_a) {
|
|
|
19629
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));
|
|
19630
19633
|
};
|
|
19631
19634
|
|
|
19632
|
-
var Container$
|
|
19633
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19634
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19635
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19636
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19637
|
-
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;
|
|
19638
19641
|
|
|
19639
19642
|
var SearchNavigation = function (_a) {
|
|
19640
19643
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19641
|
-
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) {
|
|
19642
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));
|
|
19643
19646
|
}) }, void 0)] }, void 0));
|
|
19644
19647
|
};
|
|
19645
19648
|
|
|
19646
|
-
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) {
|
|
19647
19650
|
var alignCenter = _a.alignCenter;
|
|
19648
19651
|
return alignCenter &&
|
|
19649
19652
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19653,26 +19656,26 @@ var Container$s = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
|
|
|
19653
19656
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19654
19657
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19655
19658
|
});
|
|
19656
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19657
|
-
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"])));
|
|
19658
19661
|
var ShortBanner = function (_a) {
|
|
19659
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;
|
|
19660
19663
|
var theme = useTheme();
|
|
19661
|
-
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));
|
|
19662
19665
|
};
|
|
19663
|
-
var templateObject_1$
|
|
19664
|
-
|
|
19665
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19666
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19667
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19668
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19669
|
-
var TopLabel$1 = newStyled(Label$2)(templateObject_5$
|
|
19670
|
-
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$
|
|
19671
|
-
var Container$
|
|
19672
|
-
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"])));
|
|
19673
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"])));
|
|
19674
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; });
|
|
19675
|
-
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;
|
|
19676
19679
|
|
|
19677
19680
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19678
19681
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19708,21 +19711,21 @@ var SizeChartTable = function (_a) {
|
|
|
19708
19711
|
var theme = useTheme();
|
|
19709
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];
|
|
19710
19713
|
var isMultilabel = xLabel && yLabel;
|
|
19711
|
-
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: {
|
|
19712
19715
|
backgroundColor: getCellColor$2(index, cell),
|
|
19713
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));
|
|
19714
19717
|
};
|
|
19715
19718
|
|
|
19716
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19717
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19718
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19719
|
-
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; });
|
|
19720
19723
|
var SizeTable = function (_a) {
|
|
19721
19724
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19722
19725
|
var theme = useTheme();
|
|
19723
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));
|
|
19724
19727
|
};
|
|
19725
|
-
var templateObject_1$
|
|
19728
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$u, templateObject_4$p;
|
|
19726
19729
|
|
|
19727
19730
|
var getStylesBySize$7 = function (size) {
|
|
19728
19731
|
switch (size) {
|
|
@@ -19749,7 +19752,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19749
19752
|
} });
|
|
19750
19753
|
};
|
|
19751
19754
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19752
|
-
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));
|
|
19753
19756
|
};
|
|
19754
19757
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19755
19758
|
if (disabled)
|
|
@@ -19765,23 +19768,23 @@ var TextButton = function (_a) {
|
|
|
19765
19768
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19766
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));
|
|
19767
19770
|
};
|
|
19768
|
-
var templateObject_1$
|
|
19771
|
+
var templateObject_1$F;
|
|
19769
19772
|
|
|
19770
|
-
var Container$
|
|
19771
|
-
var P = newStyled.p(templateObject_2$
|
|
19772
|
-
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"])));
|
|
19773
19776
|
var SizeFitGuide = function (_a) {
|
|
19774
19777
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19775
|
-
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));
|
|
19776
19779
|
};
|
|
19777
|
-
var templateObject_1$
|
|
19780
|
+
var templateObject_1$E, templateObject_2$v, templateObject_3$t;
|
|
19778
19781
|
|
|
19779
|
-
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) {
|
|
19780
19783
|
var inline = _a.inline;
|
|
19781
19784
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19782
19785
|
});
|
|
19783
|
-
var Row = newStyled.div(templateObject_2$
|
|
19784
|
-
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;
|
|
19785
19788
|
|
|
19786
19789
|
var SizeSelector = function (_a) {
|
|
19787
19790
|
var _b;
|
|
@@ -19803,7 +19806,7 @@ var SizeSelector = function (_a) {
|
|
|
19803
19806
|
}) }), void 0)] }), void 0));
|
|
19804
19807
|
};
|
|
19805
19808
|
|
|
19806
|
-
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) {
|
|
19807
19810
|
var titleSize = _a.titleSize;
|
|
19808
19811
|
return titleSize;
|
|
19809
19812
|
}, function (_a) {
|
|
@@ -19820,18 +19823,18 @@ var Tab = function (_a) {
|
|
|
19820
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;
|
|
19821
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));
|
|
19822
19825
|
};
|
|
19823
|
-
var templateObject_1$
|
|
19826
|
+
var templateObject_1$C;
|
|
19824
19827
|
|
|
19825
|
-
var Container$
|
|
19826
|
-
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) {
|
|
19827
19830
|
var backgroundColor = _a.backgroundColor;
|
|
19828
19831
|
return backgroundColor;
|
|
19829
19832
|
}, function (_a) {
|
|
19830
19833
|
var borderColor = _a.borderColor;
|
|
19831
19834
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19832
19835
|
});
|
|
19833
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19834
|
-
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"])));
|
|
19835
19838
|
var Tabs = function (_a) {
|
|
19836
19839
|
var _b;
|
|
19837
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;
|
|
@@ -19840,16 +19843,16 @@ var Tabs = function (_a) {
|
|
|
19840
19843
|
return null;
|
|
19841
19844
|
}
|
|
19842
19845
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19843
|
-
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));
|
|
19844
19847
|
};
|
|
19845
|
-
var templateObject_1$
|
|
19848
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$s, templateObject_4$o;
|
|
19846
19849
|
|
|
19847
|
-
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"])));
|
|
19848
19851
|
var Tag = function (_a) {
|
|
19849
19852
|
var text = _a.text, className = _a.className;
|
|
19850
|
-
return jsxRuntime.jsx(Container$
|
|
19853
|
+
return jsxRuntime.jsx(Container$p, __assign$1({ className: className }, { children: text }), void 0);
|
|
19851
19854
|
};
|
|
19852
|
-
var templateObject_1$
|
|
19855
|
+
var templateObject_1$A;
|
|
19853
19856
|
|
|
19854
19857
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19855
19858
|
switch (size) {
|
|
@@ -19962,9 +19965,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19962
19965
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19963
19966
|
};
|
|
19964
19967
|
|
|
19965
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
19966
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
19967
|
-
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"])));
|
|
19968
19971
|
var ImageVideo = function (_a) {
|
|
19969
19972
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19970
19973
|
var video = React$2.useRef(null);
|
|
@@ -19984,12 +19987,12 @@ var ImageVideo = function (_a) {
|
|
|
19984
19987
|
height: '100%',
|
|
19985
19988
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19986
19989
|
};
|
|
19987
|
-
var templateObject_1$
|
|
19990
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$r;
|
|
19988
19991
|
|
|
19989
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19990
|
-
var ContainerMobile = css(templateObject_2$
|
|
19991
|
-
var Container$
|
|
19992
|
-
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"])));
|
|
19993
19996
|
var TextWithImage = function (_a) {
|
|
19994
19997
|
var _b, _c, _d, _e;
|
|
19995
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"]);
|
|
@@ -20009,7 +20012,7 @@ var TextWithImage = function (_a) {
|
|
|
20009
20012
|
// @ts-ignore
|
|
20010
20013
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
20011
20014
|
};
|
|
20012
|
-
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: {
|
|
20013
20016
|
backgroundColor: props.btnBGColor,
|
|
20014
20017
|
color: '#ffffff',
|
|
20015
20018
|
border: props.btnBGColor,
|
|
@@ -20019,18 +20022,18 @@ var TextWithImage = function (_a) {
|
|
|
20019
20022
|
},
|
|
20020
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));
|
|
20021
20024
|
};
|
|
20022
|
-
var templateObject_1$
|
|
20025
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$q, templateObject_4$n;
|
|
20023
20026
|
|
|
20024
20027
|
var slideInAnimation = function (distanceFromTop) {
|
|
20025
20028
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20026
|
-
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);
|
|
20027
20030
|
};
|
|
20028
20031
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20029
20032
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20030
|
-
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);
|
|
20031
20034
|
};
|
|
20032
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20033
|
-
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) {
|
|
20034
20037
|
var distanceFromTop = _a.distanceFromTop;
|
|
20035
20038
|
return distanceFromTop || '124px';
|
|
20036
20039
|
}, function (_a) {
|
|
@@ -20043,12 +20046,12 @@ var ToastContent = newStyled.div(templateObject_4$l || (templateObject_4$l = __m
|
|
|
20043
20046
|
var distanceFromTop = _a.distanceFromTop;
|
|
20044
20047
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20045
20048
|
});
|
|
20046
|
-
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) {
|
|
20047
20050
|
var severity = _a.severity;
|
|
20048
20051
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20049
20052
|
});
|
|
20050
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
20051
|
-
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;
|
|
20052
20055
|
|
|
20053
20056
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20054
20057
|
var _b;
|
|
@@ -20070,9 +20073,9 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
20070
20073
|
});
|
|
20071
20074
|
Toast.displayName = 'Toast';
|
|
20072
20075
|
|
|
20073
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20074
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20075
|
-
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) {
|
|
20076
20079
|
var theme = _a.theme;
|
|
20077
20080
|
return theme.component.total.basicTotal.currency.color;
|
|
20078
20081
|
}, function (_a) {
|
|
@@ -20085,41 +20088,41 @@ var Currency = newStyled.span(templateObject_3$n || (templateObject_3$n = __make
|
|
|
20085
20088
|
var theme = _a.theme;
|
|
20086
20089
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20087
20090
|
});
|
|
20088
|
-
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) {
|
|
20089
20092
|
var highlightColor = _a.highlightColor;
|
|
20090
20093
|
return highlightColor;
|
|
20091
20094
|
});
|
|
20092
|
-
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) {
|
|
20093
20096
|
var showTotalLabel = _a.showTotalLabel;
|
|
20094
20097
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20095
20098
|
});
|
|
20096
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20097
|
-
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) {
|
|
20098
20101
|
var theme = _a.theme;
|
|
20099
20102
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20100
20103
|
});
|
|
20101
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
20102
|
-
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;
|
|
20103
20106
|
|
|
20104
20107
|
var Total = function (_a) {
|
|
20105
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;
|
|
20106
20109
|
var theme = useTheme();
|
|
20107
|
-
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));
|
|
20108
20111
|
};
|
|
20109
20112
|
|
|
20110
|
-
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) {
|
|
20111
20114
|
var color = _a.color;
|
|
20112
20115
|
return color;
|
|
20113
20116
|
});
|
|
20114
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20115
|
-
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) {
|
|
20116
20119
|
var theme = _a.theme;
|
|
20117
20120
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20118
20121
|
}, function (_a) {
|
|
20119
20122
|
var theme = _a.theme;
|
|
20120
20123
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20121
20124
|
});
|
|
20122
|
-
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) {
|
|
20123
20126
|
var color = _a.color;
|
|
20124
20127
|
return color;
|
|
20125
20128
|
});
|
|
@@ -20132,27 +20135,27 @@ var Subtotal = function (_a) {
|
|
|
20132
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));
|
|
20133
20136
|
})] }), void 0));
|
|
20134
20137
|
};
|
|
20135
|
-
var templateObject_1$
|
|
20138
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$k;
|
|
20136
20139
|
|
|
20137
20140
|
var Totals = {
|
|
20138
20141
|
Total: Total,
|
|
20139
20142
|
Subtotal: Subtotal,
|
|
20140
20143
|
};
|
|
20141
20144
|
|
|
20142
|
-
var Container$
|
|
20143
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20144
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20145
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20146
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20147
|
-
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) {
|
|
20148
20151
|
return props.finishedTrack
|
|
20149
20152
|
? props.finishedTrackColor
|
|
20150
20153
|
: props.activeTrack
|
|
20151
20154
|
? props.activeTrackColor
|
|
20152
20155
|
: '';
|
|
20153
20156
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
20154
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
20155
|
-
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) {
|
|
20156
20159
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20157
20160
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20158
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)'); });
|
|
@@ -20180,7 +20183,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20180
20183
|
}
|
|
20181
20184
|
return '30px';
|
|
20182
20185
|
};
|
|
20183
|
-
return (jsxRuntime.jsxs(Container$
|
|
20186
|
+
return (jsxRuntime.jsxs(Container$m, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20184
20187
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20185
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
|
|
20186
20189
|
? activeCheckpointColor
|
|
@@ -20191,18 +20194,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20191
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));
|
|
20192
20195
|
})] }), void 0));
|
|
20193
20196
|
};
|
|
20194
|
-
var templateObject_1$
|
|
20195
|
-
|
|
20196
|
-
var Container$
|
|
20197
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20198
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20199
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20200
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20201
|
-
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) {
|
|
20202
20205
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20203
20206
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20204
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
20205
|
-
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; });
|
|
20206
20209
|
var TrackingProgress = function (_a) {
|
|
20207
20210
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
20208
20211
|
var theme = useTheme();
|
|
@@ -20222,7 +20225,7 @@ var TrackingProgress = function (_a) {
|
|
|
20222
20225
|
}
|
|
20223
20226
|
return '30px';
|
|
20224
20227
|
};
|
|
20225
|
-
return (jsxRuntime.jsxs(Container$
|
|
20228
|
+
return (jsxRuntime.jsxs(Container$l, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20226
20229
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20227
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
|
|
20228
20231
|
? theme.colors.semantic.informative.color
|
|
@@ -20231,19 +20234,19 @@ var TrackingProgress = function (_a) {
|
|
|
20231
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));
|
|
20232
20235
|
})] }), void 0));
|
|
20233
20236
|
};
|
|
20234
|
-
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;
|
|
20235
20238
|
|
|
20236
|
-
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) {
|
|
20237
20240
|
var checked = _a.checked;
|
|
20238
20241
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20239
20242
|
});
|
|
20240
|
-
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$
|
|
20241
|
-
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$
|
|
20242
|
-
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$
|
|
20243
|
-
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$
|
|
20244
|
-
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$
|
|
20245
|
-
var CheckboxInput = newStyled.input(templateObject_7$
|
|
20246
|
-
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;
|
|
20247
20250
|
|
|
20248
20251
|
function AutoshipOfferCard(_a) {
|
|
20249
20252
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20267,18 +20270,18 @@ function AutoshipOfferCard(_a) {
|
|
|
20267
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));
|
|
20268
20271
|
}
|
|
20269
20272
|
|
|
20270
|
-
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) {
|
|
20271
20274
|
var checked = _a.checked;
|
|
20272
20275
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20273
20276
|
});
|
|
20274
|
-
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$
|
|
20275
|
-
var AutoShipBodyWrapper = newStyled.div(templateObject_3$
|
|
20276
|
-
var AutoShipBodyTitle = newStyled.div(templateObject_4$
|
|
20277
|
-
var AutoShipBodyListItem = newStyled.div(templateObject_5$
|
|
20278
|
-
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$
|
|
20279
|
-
newStyled.input(templateObject_7$
|
|
20280
|
-
var ButtonRemoveWrapper = newStyled.div(templateObject_8$
|
|
20281
|
-
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;
|
|
20282
20285
|
|
|
20283
20286
|
function AutoshipOfferCardCta(_a) {
|
|
20284
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;
|
|
@@ -20296,6 +20299,28 @@ function AutoshipOfferCardCta(_a) {
|
|
|
20296
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));
|
|
20297
20300
|
}
|
|
20298
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
|
+
|
|
20299
20324
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
20300
20325
|
background: props.bgColor,
|
|
20301
20326
|
height: '100%',
|
|
@@ -22238,6 +22263,7 @@ exports.Autoship = Autoship;
|
|
|
22238
22263
|
exports.AutoshipFrequencyDropdown = AutoshipFrequencyDropdown;
|
|
22239
22264
|
exports.AutoshipOfferCard = AutoshipOfferCard;
|
|
22240
22265
|
exports.AutoshipOfferCardCta = AutoshipOfferCardCta;
|
|
22266
|
+
exports.AutoshipPdpCard = AutoshipPdpCard;
|
|
22241
22267
|
exports.AutoshipV2 = AutoshipV2;
|
|
22242
22268
|
exports.BasicAccordion = BasicAccordion;
|
|
22243
22269
|
exports.BeforeAfterCard = BeforeAfterCard;
|