@trafilea/afrodita-components 6.46.4 → 6.47.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 +6 -0
- package/build/index.esm.js +141 -131
- package/build/index.esm.js.map +1 -1
- package/build/index.js +141 -131
- 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$1s = newStyled.div(templateObject_1$2s || (templateObject_1$2s = __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) {
|
|
@@ -3252,9 +3252,9 @@ var H3$2 = newStyled.h3(templateObject_2$1K || (templateObject_2$1K = __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$1s, __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$2s, 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$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) {
|
|
3289
3289
|
var backgroundColor = _a.backgroundColor;
|
|
3290
3290
|
return backgroundColor;
|
|
3291
3291
|
}, function (_a) {
|
|
@@ -3322,9 +3322,9 @@ var H3$1 = newStyled.h3(templateObject_2$1J || (templateObject_2$1J = __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$1r, __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$2r, templateObject_2$1J;
|
|
3328
3328
|
|
|
3329
3329
|
var Viewports = {
|
|
3330
3330
|
mobile: 'mobile',
|
|
@@ -3433,7 +3433,7 @@ 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$
|
|
3436
|
+
var Container$1q = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3437
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');
|
|
@@ -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$1q, __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$2q, templateObject_2$1I, templateObject_3$1k;
|
|
3495
3495
|
|
|
3496
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3496
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __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$1q, __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,9 +3562,9 @@ 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$2p;
|
|
3566
3566
|
|
|
3567
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3567
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2o || (templateObject_1$2o = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3568
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
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) {
|
|
@@ -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$1q, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$1q, { 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$2o, templateObject_2$1H, templateObject_3$1j;
|
|
3641
3641
|
|
|
3642
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3642
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2n || (templateObject_1$2n = __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$1q, __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$2n;
|
|
3677
3677
|
|
|
3678
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3678
|
+
var FinalPriceStyledContainer = 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"])));
|
|
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$1q, __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$2m;
|
|
3712
3712
|
|
|
3713
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3713
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$2l || (templateObject_1$2l = __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
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$
|
|
3715
|
+
var templateObject_1$2l, 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$2k || (templateObject_1$2k = __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$2k;
|
|
3729
3729
|
|
|
3730
|
-
var Container$
|
|
3730
|
+
var Container$1p = newStyled.div(templateObject_1$2j || (templateObject_1$2j = __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$1o = newStyled.div(templateObject_1$2i || (templateObject_1$2i = _
|
|
|
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$1p, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3756
3756
|
};
|
|
3757
|
-
var templateObject_1$
|
|
3757
|
+
var templateObject_1$2j;
|
|
3758
3758
|
|
|
3759
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3759
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2i || (templateObject_1$2i = __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) {
|
|
@@ -3785,7 +3785,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1F || (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$2i, 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$2h || (templateObject_1$2h = __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$2h;
|
|
3974
3974
|
|
|
3975
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3975
|
+
var LabelWrapper = newStyled.label(templateObject_1$2g || (templateObject_1$2g = __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
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
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$2g, 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;
|
|
@@ -4842,7 +4842,7 @@ function jsxs(type, props, key) {
|
|
|
4842
4842
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4843
4843
|
// `variants` styles that are consistent through all themes.
|
|
4844
4844
|
var TAGS = {
|
|
4845
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4845
|
+
hero1: newStyled.h1(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject([""], [""]))),
|
|
4846
4846
|
hero2: newStyled.h2(templateObject_2$1D || (templateObject_2$1D = __makeTemplateObject([""], [""]))),
|
|
4847
4847
|
hero3: newStyled.h3(templateObject_3$1h || (templateObject_3$1h = __makeTemplateObject([""], [""]))),
|
|
4848
4848
|
display1: newStyled.h1(templateObject_4$11 || (templateObject_4$11 = __makeTemplateObject([""], [""]))),
|
|
@@ -4982,9 +4982,9 @@ var DEFAULTS = {
|
|
|
4982
4982
|
size: 'regular',
|
|
4983
4983
|
},
|
|
4984
4984
|
};
|
|
4985
|
-
var templateObject_1$
|
|
4985
|
+
var templateObject_1$2f, 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;
|
|
4986
4986
|
|
|
4987
|
-
var Container$
|
|
4987
|
+
var Container$1o = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __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"])));
|
|
4988
4988
|
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"])));
|
|
4989
4989
|
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"])));
|
|
4990
4990
|
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"])));
|
|
@@ -4992,7 +4992,7 @@ var Check$1 = newStyled.div(templateObject_5$N || (templateObject_5$N = __makeTe
|
|
|
4992
4992
|
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"])));
|
|
4993
4993
|
var PackSelectorV2 = function (_a) {
|
|
4994
4994
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4995
|
-
return (jsxRuntime.jsx(Container$
|
|
4995
|
+
return (jsxRuntime.jsx(Container$1o, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4996
4996
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4997
4997
|
}) }), void 0));
|
|
4998
4998
|
};
|
|
@@ -5014,27 +5014,27 @@ var PackCard$1 = function (_a) {
|
|
|
5014
5014
|
currency: currencyCode || 'USD',
|
|
5015
5015
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5016
5016
|
};
|
|
5017
|
-
var templateObject_1$
|
|
5017
|
+
var templateObject_1$2e, templateObject_2$1C, templateObject_3$1g, templateObject_4$10, templateObject_5$N, templateObject_6$F;
|
|
5018
5018
|
|
|
5019
|
-
var Container$
|
|
5019
|
+
var Container$1n = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5020
5020
|
var DropContainer = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5021
5021
|
var DropList = function (_a) {
|
|
5022
5022
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5023
|
-
return (jsxRuntime.jsx(Container$
|
|
5023
|
+
return (jsxRuntime.jsx(Container$1n, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5024
5024
|
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));
|
|
5025
5025
|
}) }, void 0));
|
|
5026
5026
|
};
|
|
5027
|
-
var templateObject_1$
|
|
5027
|
+
var templateObject_1$2d, templateObject_2$1B;
|
|
5028
5028
|
|
|
5029
5029
|
var DROPS_TOTAL = 5;
|
|
5030
|
-
var Container$
|
|
5030
|
+
var Container$1m = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5031
5031
|
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"])));
|
|
5032
5032
|
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"])));
|
|
5033
5033
|
var AbsorbencyLevel = function (_a) {
|
|
5034
5034
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5035
|
-
return (jsxRuntime.jsxs(Container$
|
|
5035
|
+
return (jsxRuntime.jsxs(Container$1m, { 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));
|
|
5036
5036
|
};
|
|
5037
|
-
var templateObject_1$
|
|
5037
|
+
var templateObject_1$2c, templateObject_2$1A, templateObject_3$1f;
|
|
5038
5038
|
|
|
5039
5039
|
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(`
|
|
5040
5040
|
`),"","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(`
|
|
@@ -5110,7 +5110,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5110
5110
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5111
5111
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5112
5112
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5113
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5113
|
+
var StyledContent$1 = newStyled.button(templateObject_1$2b || (templateObject_1$2b = __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"])));
|
|
5114
5114
|
var Accordion$1 = function (_a) {
|
|
5115
5115
|
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;
|
|
5116
5116
|
var theme = useTheme();
|
|
@@ -5134,9 +5134,9 @@ var Accordion$1 = function (_a) {
|
|
|
5134
5134
|
} }, { 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));
|
|
5135
5135
|
} }), void 0));
|
|
5136
5136
|
};
|
|
5137
|
-
var templateObject_1$
|
|
5137
|
+
var templateObject_1$2b;
|
|
5138
5138
|
|
|
5139
|
-
var Container$
|
|
5139
|
+
var Container$1l = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5140
5140
|
var AccordionOptions = function (_a) {
|
|
5141
5141
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5142
5142
|
var _b = React$2.useState({
|
|
@@ -5149,7 +5149,7 @@ var AccordionOptions = function (_a) {
|
|
|
5149
5149
|
}
|
|
5150
5150
|
return false;
|
|
5151
5151
|
};
|
|
5152
|
-
return (jsxRuntime.jsx(Container$
|
|
5152
|
+
return (jsxRuntime.jsx(Container$1l, { children: accordions.map(function (accordion, index) {
|
|
5153
5153
|
var forceOpenValue = getForceOpen(index);
|
|
5154
5154
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5155
5155
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5160,7 +5160,7 @@ var AccordionOptions = function (_a) {
|
|
|
5160
5160
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5161
5161
|
}) }, void 0));
|
|
5162
5162
|
};
|
|
5163
|
-
var templateObject_1$
|
|
5163
|
+
var templateObject_1$2a;
|
|
5164
5164
|
|
|
5165
5165
|
/**
|
|
5166
5166
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5296,11 +5296,11 @@ var isValidDate = function (value) {
|
|
|
5296
5296
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5297
5297
|
};
|
|
5298
5298
|
|
|
5299
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5299
|
+
var Bold = newStyled.span(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5300
5300
|
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"])));
|
|
5301
|
-
var templateObject_1$
|
|
5301
|
+
var templateObject_1$29, templateObject_2$1z;
|
|
5302
5302
|
|
|
5303
|
-
var Container$
|
|
5303
|
+
var Container$1k = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __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) {
|
|
5304
5304
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5305
5305
|
return width;
|
|
5306
5306
|
}, function (_a) {
|
|
@@ -5311,12 +5311,12 @@ var FlexCentered = newStyled.div(templateObject_2$1y || (templateObject_2$1y = _
|
|
|
5311
5311
|
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"])));
|
|
5312
5312
|
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"])));
|
|
5313
5313
|
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"])));
|
|
5314
|
-
var templateObject_1$
|
|
5314
|
+
var templateObject_1$28, templateObject_2$1y, templateObject_3$1e, templateObject_4$$, templateObject_5$M;
|
|
5315
5315
|
|
|
5316
5316
|
var CouponCard = function (_a) {
|
|
5317
5317
|
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;
|
|
5318
5318
|
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5319
|
-
return (jsxRuntime.jsxs(Container$
|
|
5319
|
+
return (jsxRuntime.jsxs(Container$1k, __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 () {
|
|
5320
5320
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5321
5321
|
setShowCoupon(function (prev) { return !prev; });
|
|
5322
5322
|
} }, 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: {
|
|
@@ -5464,14 +5464,14 @@ var sizeOptions = [
|
|
|
5464
5464
|
},
|
|
5465
5465
|
];
|
|
5466
5466
|
|
|
5467
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5467
|
+
var ErrorText = newStyled.h3(templateObject_1$27 || (templateObject_1$27 = __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; });
|
|
5468
5468
|
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"])));
|
|
5469
5469
|
var Error$1 = function (_a) {
|
|
5470
5470
|
var error = _a.error;
|
|
5471
5471
|
var theme = useTheme();
|
|
5472
5472
|
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));
|
|
5473
5473
|
};
|
|
5474
|
-
var templateObject_1$
|
|
5474
|
+
var templateObject_1$27, templateObject_2$1x;
|
|
5475
5475
|
|
|
5476
5476
|
var BaseSelectButton = function (_a) {
|
|
5477
5477
|
var children = _a.children, as = _a.as;
|
|
@@ -5488,7 +5488,7 @@ function BaseSelectOption(_a) {
|
|
|
5488
5488
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5489
5489
|
}
|
|
5490
5490
|
|
|
5491
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5491
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5492
5492
|
function BaseSelect(_a) {
|
|
5493
5493
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5494
5494
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5498,7 +5498,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5498
5498
|
Options: BaseSelectOptions,
|
|
5499
5499
|
Option: BaseSelectOption,
|
|
5500
5500
|
});
|
|
5501
|
-
var templateObject_1$
|
|
5501
|
+
var templateObject_1$26;
|
|
5502
5502
|
|
|
5503
5503
|
var CustomButton = newStyled.button(function (_a) {
|
|
5504
5504
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5537,7 +5537,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5537
5537
|
});
|
|
5538
5538
|
});
|
|
5539
5539
|
// TODO Remove this when we find the real solution
|
|
5540
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5540
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5541
5541
|
var open = _a.open;
|
|
5542
5542
|
return open &&
|
|
5543
5543
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5557,7 +5557,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5557
5557
|
} }), void 0));
|
|
5558
5558
|
};
|
|
5559
5559
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5560
|
-
var templateObject_1$
|
|
5560
|
+
var templateObject_1$25;
|
|
5561
5561
|
|
|
5562
5562
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5563
5563
|
var theme = _a.theme;
|
|
@@ -5724,7 +5724,7 @@ var CustomCheckboxStyles = {
|
|
|
5724
5724
|
},
|
|
5725
5725
|
};
|
|
5726
5726
|
|
|
5727
|
-
var Container$
|
|
5727
|
+
var Container$1j = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __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"])));
|
|
5728
5728
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5729
5729
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5730
5730
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5749,9 +5749,9 @@ var Checkbox = function (_a) {
|
|
|
5749
5749
|
}
|
|
5750
5750
|
onChange(e.target.checked);
|
|
5751
5751
|
};
|
|
5752
|
-
return (jsxRuntime.jsxs(Container$
|
|
5752
|
+
return (jsxRuntime.jsxs(Container$1j, { 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));
|
|
5753
5753
|
};
|
|
5754
|
-
var templateObject_1$
|
|
5754
|
+
var templateObject_1$24, templateObject_2$1w;
|
|
5755
5755
|
|
|
5756
5756
|
var CustomOption = newStyled.li(function (_a) {
|
|
5757
5757
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5800,7 +5800,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5800
5800
|
Option: BaseDropdownOption,
|
|
5801
5801
|
});
|
|
5802
5802
|
|
|
5803
|
-
var Container$
|
|
5803
|
+
var Container$1i = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject([""], [""])));
|
|
5804
5804
|
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"])));
|
|
5805
5805
|
var SelectedOption = newStyled.span(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5806
5806
|
var fontWeight = _a.fontWeight;
|
|
@@ -5835,10 +5835,10 @@ function SimpleDropdown(_a) {
|
|
|
5835
5835
|
}
|
|
5836
5836
|
setSelectedValue(value);
|
|
5837
5837
|
}, [value, options, initialValue]);
|
|
5838
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5838
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1i : React$2.Fragment;
|
|
5839
5839
|
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));
|
|
5840
5840
|
}
|
|
5841
|
-
var templateObject_1$
|
|
5841
|
+
var templateObject_1$23, templateObject_2$1v, templateObject_3$1d;
|
|
5842
5842
|
|
|
5843
5843
|
/* base styles & size variants */
|
|
5844
5844
|
var CustomRadioStyles$2 = {
|
|
@@ -5903,8 +5903,8 @@ var ContainerStyles$2 = {
|
|
|
5903
5903
|
},
|
|
5904
5904
|
};
|
|
5905
5905
|
|
|
5906
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5907
|
-
var Container$
|
|
5906
|
+
var Wrapper$7 = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5907
|
+
var Container$1h = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5908
5908
|
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) {
|
|
5909
5909
|
var disabled = _a.disabled;
|
|
5910
5910
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -5937,9 +5937,9 @@ var RadioInput = function (_a) {
|
|
|
5937
5937
|
var value = event.currentTarget.value;
|
|
5938
5938
|
onChange({ value: value, label: label });
|
|
5939
5939
|
};
|
|
5940
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5940
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$1h, __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));
|
|
5941
5941
|
};
|
|
5942
|
-
var templateObject_1$
|
|
5942
|
+
var templateObject_1$22, templateObject_2$1u, templateObject_3$1c, templateObject_4$_;
|
|
5943
5943
|
|
|
5944
5944
|
var useOnClickOutside = function (ref, handler) {
|
|
5945
5945
|
React$2.useEffect(function () {
|
|
@@ -6032,7 +6032,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6032
6032
|
}
|
|
6033
6033
|
};
|
|
6034
6034
|
|
|
6035
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
6035
|
+
var Wrapper$6 = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __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) {
|
|
6036
6036
|
var position = _a.position;
|
|
6037
6037
|
return getWrapperFlexDirection(position);
|
|
6038
6038
|
}, function (_a) {
|
|
@@ -6097,7 +6097,7 @@ var CloseToolTip = newStyled.button(templateObject_8$p || (templateObject_8$p =
|
|
|
6097
6097
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6098
6098
|
return right;
|
|
6099
6099
|
});
|
|
6100
|
-
var templateObject_1$
|
|
6100
|
+
var templateObject_1$21, templateObject_2$1t, templateObject_3$1b, templateObject_4$Z, templateObject_5$L, templateObject_6$E, templateObject_7$w, templateObject_8$p;
|
|
6101
6101
|
|
|
6102
6102
|
var Tooltip = function (_a) {
|
|
6103
6103
|
var _b;
|
|
@@ -6140,7 +6140,7 @@ var benefitsColorMapper = function (_a) {
|
|
|
6140
6140
|
};
|
|
6141
6141
|
};
|
|
6142
6142
|
|
|
6143
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6143
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6144
6144
|
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) {
|
|
6145
6145
|
var selected = _a.selected, theme = _a.theme;
|
|
6146
6146
|
return selected
|
|
@@ -6177,8 +6177,8 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6177
6177
|
var selected = _a.selected, theme = _a.theme;
|
|
6178
6178
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6179
6179
|
});
|
|
6180
|
-
var Container$
|
|
6181
|
-
var templateObject_1$
|
|
6180
|
+
var Container$1g = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6181
|
+
var templateObject_1$20, 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;
|
|
6182
6182
|
|
|
6183
6183
|
var radioIds$2 = {
|
|
6184
6184
|
oneTime: {
|
|
@@ -6228,12 +6228,12 @@ var Autoship = function (_a) {
|
|
|
6228
6228
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6229
6229
|
};
|
|
6230
6230
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6231
|
-
return (jsxRuntime.jsxs(Container$
|
|
6231
|
+
return (jsxRuntime.jsxs(Container$1g, __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
|
|
6232
6232
|
? benefitsColor.selected
|
|
6233
6233
|
: 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));
|
|
6234
6234
|
};
|
|
6235
6235
|
|
|
6236
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6236
|
+
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) {
|
|
6237
6237
|
var theme = _a.theme;
|
|
6238
6238
|
return theme.name === 'TheSpaDr' &&
|
|
6239
6239
|
"\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 ";
|
|
@@ -6286,12 +6286,12 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_11$6 || (templateOb
|
|
|
6286
6286
|
var selected = _a.selected, theme = _a.theme;
|
|
6287
6287
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6288
6288
|
});
|
|
6289
|
-
var Container$
|
|
6289
|
+
var Container$1f = newStyled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6290
6290
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6291
6291
|
var theme = _a.theme;
|
|
6292
6292
|
return theme.component.autoship.tooltip.margin;
|
|
6293
6293
|
});
|
|
6294
|
-
var templateObject_1$
|
|
6294
|
+
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;
|
|
6295
6295
|
|
|
6296
6296
|
var radioIds$1 = {
|
|
6297
6297
|
oneTime: {
|
|
@@ -6351,7 +6351,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6351
6351
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6352
6352
|
};
|
|
6353
6353
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6354
|
-
return (jsxRuntime.jsxs(Container$
|
|
6354
|
+
return (jsxRuntime.jsxs(Container$1f, __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
|
|
6355
6355
|
? benefitsColor.selected
|
|
6356
6356
|
: 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));
|
|
6357
6357
|
};
|
|
@@ -6370,13 +6370,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6370
6370
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6371
6371
|
_a$2);
|
|
6372
6372
|
|
|
6373
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6373
|
+
var CustomerDetails = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject([""], [""])));
|
|
6374
6374
|
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"])));
|
|
6375
6375
|
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"])));
|
|
6376
6376
|
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"])));
|
|
6377
6377
|
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"])));
|
|
6378
6378
|
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"])));
|
|
6379
|
-
var templateObject_1$
|
|
6379
|
+
var templateObject_1$1_, templateObject_2$1q, templateObject_3$18, templateObject_4$W, templateObject_5$I, templateObject_6$B;
|
|
6380
6380
|
|
|
6381
6381
|
var NameWithStars = function (_a) {
|
|
6382
6382
|
var name = _a.name, size = _a.size;
|
|
@@ -6394,7 +6394,7 @@ var ResultFeedback = function (_a) {
|
|
|
6394
6394
|
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));
|
|
6395
6395
|
};
|
|
6396
6396
|
|
|
6397
|
-
var Container$
|
|
6397
|
+
var Container$1e = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __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; });
|
|
6398
6398
|
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"])));
|
|
6399
6399
|
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; });
|
|
6400
6400
|
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) {
|
|
@@ -6407,7 +6407,7 @@ var UserInfoText = newStyled.div(templateObject_4$V || (templateObject_4$V = __m
|
|
|
6407
6407
|
var theme = _a.theme, size = _a.size;
|
|
6408
6408
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6409
6409
|
});
|
|
6410
|
-
var templateObject_1$
|
|
6410
|
+
var templateObject_1$1Z, templateObject_2$1p, templateObject_3$17, templateObject_4$V;
|
|
6411
6411
|
|
|
6412
6412
|
/* base styles & size variants */
|
|
6413
6413
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6482,10 +6482,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6482
6482
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6483
6483
|
var infoText = buildInfoText(name, age, months);
|
|
6484
6484
|
var Component = componentByVariant[variant];
|
|
6485
|
-
return (jsxRuntime.jsxs(Container$
|
|
6485
|
+
return (jsxRuntime.jsxs(Container$1e, __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));
|
|
6486
6486
|
};
|
|
6487
6487
|
|
|
6488
|
-
var Section = newStyled.div(templateObject_1$
|
|
6488
|
+
var Section = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __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) {
|
|
6489
6489
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6490
6490
|
});
|
|
6491
6491
|
var CardHeader = function (_a) {
|
|
@@ -6496,16 +6496,16 @@ var CardFooter = function (_a) {
|
|
|
6496
6496
|
var children = _a.children;
|
|
6497
6497
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6498
6498
|
};
|
|
6499
|
-
var templateObject_1$
|
|
6499
|
+
var templateObject_1$1Y;
|
|
6500
6500
|
|
|
6501
|
-
var Body$1 = newStyled.div(templateObject_1$
|
|
6501
|
+
var Body$1 = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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"])));
|
|
6502
6502
|
var CardBody$1 = function (_a) {
|
|
6503
6503
|
var children = _a.children;
|
|
6504
6504
|
return jsxRuntime.jsx(Body$1, { children: children }, void 0);
|
|
6505
6505
|
};
|
|
6506
|
-
var templateObject_1$
|
|
6506
|
+
var templateObject_1$1X;
|
|
6507
6507
|
|
|
6508
|
-
var Container$
|
|
6508
|
+
var Container$1d = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __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) {
|
|
6509
6509
|
var flex = _a.flex;
|
|
6510
6510
|
return flex &&
|
|
6511
6511
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6520,23 +6520,23 @@ var Container$1c = newStyled.div(templateObject_1$1V || (templateObject_1$1V = _
|
|
|
6520
6520
|
var Card$2 = function (_a) {
|
|
6521
6521
|
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;
|
|
6522
6522
|
var theme = useTheme();
|
|
6523
|
-
return (jsxRuntime.jsx(Container$
|
|
6523
|
+
return (jsxRuntime.jsx(Container$1d, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6524
6524
|
};
|
|
6525
6525
|
var Card$3 = Object.assign(Card$2, {
|
|
6526
6526
|
Header: CardHeader,
|
|
6527
6527
|
Footer: CardFooter,
|
|
6528
6528
|
Body: CardBody$1,
|
|
6529
6529
|
});
|
|
6530
|
-
var templateObject_1$
|
|
6530
|
+
var templateObject_1$1W;
|
|
6531
6531
|
|
|
6532
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6532
|
+
var StyledWrapper = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __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"])));
|
|
6533
6533
|
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"])));
|
|
6534
6534
|
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) {
|
|
6535
6535
|
var color = _a.color;
|
|
6536
6536
|
return color;
|
|
6537
6537
|
});
|
|
6538
6538
|
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"])));
|
|
6539
|
-
var templateObject_1$
|
|
6539
|
+
var templateObject_1$1V, templateObject_2$1o, templateObject_3$16, templateObject_4$U;
|
|
6540
6540
|
|
|
6541
6541
|
var Minimalistic = function (_a) {
|
|
6542
6542
|
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;
|
|
@@ -6544,23 +6544,23 @@ var Minimalistic = function (_a) {
|
|
|
6544
6544
|
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));
|
|
6545
6545
|
};
|
|
6546
6546
|
|
|
6547
|
-
var Container$
|
|
6547
|
+
var Container$1c = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6548
6548
|
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; });
|
|
6549
6549
|
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; });
|
|
6550
6550
|
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"])));
|
|
6551
6551
|
var Simple = function (_a) {
|
|
6552
6552
|
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;
|
|
6553
6553
|
var theme = useTheme();
|
|
6554
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
6554
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$1c, { 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));
|
|
6555
6555
|
};
|
|
6556
|
-
var templateObject_1$
|
|
6556
|
+
var templateObject_1$1U, templateObject_2$1n, templateObject_3$15, templateObject_4$T;
|
|
6557
6557
|
|
|
6558
6558
|
var Bundle = {
|
|
6559
6559
|
Minimalistic: Minimalistic,
|
|
6560
6560
|
Simple: Simple,
|
|
6561
6561
|
};
|
|
6562
6562
|
|
|
6563
|
-
var Container$
|
|
6563
|
+
var Container$1b = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __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) {
|
|
6564
6564
|
var displayBNPL = _a.displayBNPL;
|
|
6565
6565
|
return (displayBNPL ? 'flex' : 'none');
|
|
6566
6566
|
});
|
|
@@ -6585,70 +6585,80 @@ var BuyNowPayLater = function (_a) {
|
|
|
6585
6585
|
else {
|
|
6586
6586
|
dynamicText = "or 4 interest-free payments of ";
|
|
6587
6587
|
}
|
|
6588
|
-
return (jsxRuntime.jsx(Container$
|
|
6588
|
+
return (jsxRuntime.jsx(Container$1b, __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: {
|
|
6589
6589
|
display: 'inline',
|
|
6590
6590
|
fontSize: fontSize,
|
|
6591
6591
|
paddingLeft: '0.25rem',
|
|
6592
6592
|
paddingRight: '0.25rem',
|
|
6593
6593
|
}, 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));
|
|
6594
6594
|
};
|
|
6595
|
-
var templateObject_1$
|
|
6595
|
+
var templateObject_1$1T, templateObject_2$1m, templateObject_3$14;
|
|
6596
6596
|
|
|
6597
|
-
var Text$6 = newStyled.
|
|
6598
|
-
var
|
|
6599
|
-
|
|
6597
|
+
var Text$6 = newStyled.h3(templateObject_1$1S || (templateObject_1$1S = __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) {
|
|
6598
|
+
var backgroundColor = _a.backgroundColor;
|
|
6599
|
+
return backgroundColor;
|
|
6600
|
+
}, function (_a) {
|
|
6601
|
+
var borderRadius = _a.borderRadius;
|
|
6602
|
+
return borderRadius;
|
|
6603
|
+
}, function (_a) {
|
|
6604
|
+
var color = _a.color;
|
|
6605
|
+
return color;
|
|
6606
|
+
});
|
|
6607
|
+
var OfferBanner = function (_a) {
|
|
6608
|
+
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
6609
|
+
var theme = useTheme();
|
|
6610
|
+
return (jsxRuntime.jsx(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6611
|
+
};
|
|
6612
|
+
var templateObject_1$1S;
|
|
6613
|
+
|
|
6614
|
+
var Container$1a = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __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"); });
|
|
6615
|
+
var CloseButton$1 = function (_a) {
|
|
6616
|
+
var onClick = _a.onClick, size = _a.size;
|
|
6600
6617
|
var theme = useTheme();
|
|
6601
|
-
return jsxRuntime.jsx(
|
|
6618
|
+
return (jsxRuntime.jsx(Container$1a, __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));
|
|
6602
6619
|
};
|
|
6603
6620
|
var templateObject_1$1R;
|
|
6604
6621
|
|
|
6605
|
-
var
|
|
6606
|
-
var
|
|
6622
|
+
var Text$5 = newStyled.span(templateObject_1$1Q || (templateObject_1$1Q = __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; });
|
|
6623
|
+
var Description$1 = function (_a) {
|
|
6607
6624
|
var text = _a.text;
|
|
6608
6625
|
var theme = useTheme();
|
|
6609
|
-
return
|
|
6626
|
+
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6610
6627
|
};
|
|
6611
6628
|
var templateObject_1$1Q;
|
|
6612
6629
|
|
|
6613
|
-
var
|
|
6614
|
-
var
|
|
6630
|
+
var P$4 = newStyled.p(templateObject_1$1P || (templateObject_1$1P = __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; });
|
|
6631
|
+
var Promo = function (_a) {
|
|
6615
6632
|
var text = _a.text;
|
|
6616
6633
|
var theme = useTheme();
|
|
6617
|
-
return jsxRuntime.jsx(
|
|
6634
|
+
return (jsxRuntime.jsx(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6618
6635
|
};
|
|
6619
6636
|
var templateObject_1$1P;
|
|
6620
6637
|
|
|
6621
|
-
var
|
|
6622
|
-
var
|
|
6623
|
-
var
|
|
6638
|
+
var Text$4 = newStyled.span(templateObject_1$1O || (templateObject_1$1O = __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; });
|
|
6639
|
+
var Title$8 = function (_a) {
|
|
6640
|
+
var title = _a.title;
|
|
6624
6641
|
var theme = useTheme();
|
|
6625
|
-
return
|
|
6642
|
+
return jsxRuntime.jsx(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6626
6643
|
};
|
|
6627
6644
|
var templateObject_1$1O;
|
|
6628
6645
|
|
|
6629
|
-
var
|
|
6630
|
-
var backgroundColor = _a.backgroundColor;
|
|
6631
|
-
return backgroundColor;
|
|
6632
|
-
}, function (_a) {
|
|
6633
|
-
var borderRadius = _a.borderRadius;
|
|
6634
|
-
return borderRadius;
|
|
6635
|
-
}, function (_a) {
|
|
6636
|
-
var color = _a.color;
|
|
6637
|
-
return color;
|
|
6638
|
-
});
|
|
6639
|
-
var OfferBanner = function (_a) {
|
|
6640
|
-
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
6641
|
-
var theme = useTheme();
|
|
6642
|
-
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));
|
|
6643
|
-
};
|
|
6646
|
+
var Container$19 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6644
6647
|
var templateObject_1$1N;
|
|
6645
6648
|
|
|
6649
|
+
var TrashButton = function (_a) {
|
|
6650
|
+
var onClick = _a.onClick, size = _a.size;
|
|
6651
|
+
useTheme();
|
|
6652
|
+
return (jsxRuntime.jsx(Container$19, __assign$1({ onClick: onClick, "data-testid": "CartProductItemTrashBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Trash, { width: size - 1, height: size - 1, fill: "#292929" }, void 0) }), void 0));
|
|
6653
|
+
};
|
|
6654
|
+
|
|
6646
6655
|
var CartProductItem = {
|
|
6647
6656
|
Title: Title$8,
|
|
6648
6657
|
Tag: OfferBanner,
|
|
6649
6658
|
Promo: Promo,
|
|
6650
6659
|
Description: Description$1,
|
|
6651
6660
|
CloseButton: CloseButton$1,
|
|
6661
|
+
TrashButton: TrashButton,
|
|
6652
6662
|
};
|
|
6653
6663
|
|
|
6654
6664
|
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"])));
|
|
@@ -7234,7 +7244,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7234
7244
|
: exports.ComponentSize.XSmall;
|
|
7235
7245
|
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));
|
|
7236
7246
|
};
|
|
7237
|
-
return (jsxRuntime.jsxs(Container$
|
|
7247
|
+
return (jsxRuntime.jsxs(Container$1q, __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]
|
|
7238
7248
|
? finalPriceArray[0]
|
|
7239
7249
|
: (_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));
|
|
7240
7250
|
};
|