@trafilea/afrodita-components 6.46.3 → 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 +143 -133
- package/build/index.esm.js.map +1 -1
- package/build/index.js +143 -133
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3189,7 +3189,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3189
3189
|
};
|
|
3190
3190
|
}
|
|
3191
3191
|
};
|
|
3192
|
-
var Container$
|
|
3192
|
+
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) {
|
|
3193
3193
|
var backgroundColor = _a.backgroundColor;
|
|
3194
3194
|
return backgroundColor;
|
|
3195
3195
|
}, function (_a) {
|
|
@@ -3226,9 +3226,9 @@ var H3$2 = newStyled.h3(templateObject_2$1K || (templateObject_2$1K = __makeTemp
|
|
|
3226
3226
|
var ClubOfferTag = function (_a) {
|
|
3227
3227
|
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 ? ComponentSize.Medium : _e, style = _a.style;
|
|
3228
3228
|
var theme = useTheme();
|
|
3229
|
-
return (jsx$1(Container$
|
|
3229
|
+
return (jsx$1(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: jsx$1(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));
|
|
3230
3230
|
};
|
|
3231
|
-
var templateObject_1$
|
|
3231
|
+
var templateObject_1$2s, templateObject_2$1K;
|
|
3232
3232
|
|
|
3233
3233
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3234
3234
|
var _a, _b, _c;
|
|
@@ -3259,7 +3259,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3259
3259
|
};
|
|
3260
3260
|
}
|
|
3261
3261
|
};
|
|
3262
|
-
var Container$
|
|
3262
|
+
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) {
|
|
3263
3263
|
var backgroundColor = _a.backgroundColor;
|
|
3264
3264
|
return backgroundColor;
|
|
3265
3265
|
}, function (_a) {
|
|
@@ -3296,9 +3296,9 @@ var H3$1 = newStyled.h3(templateObject_2$1J || (templateObject_2$1J = __makeTemp
|
|
|
3296
3296
|
var DiscountTag$3 = function (_a) {
|
|
3297
3297
|
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 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
3298
3298
|
var theme = useTheme();
|
|
3299
|
-
return (jsx$1(Container$
|
|
3299
|
+
return (jsx$1(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: jsxs$1(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));
|
|
3300
3300
|
};
|
|
3301
|
-
var templateObject_1$
|
|
3301
|
+
var templateObject_1$2r, templateObject_2$1J;
|
|
3302
3302
|
|
|
3303
3303
|
var Viewports = {
|
|
3304
3304
|
mobile: 'mobile',
|
|
@@ -3407,7 +3407,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3407
3407
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3408
3408
|
}
|
|
3409
3409
|
};
|
|
3410
|
-
var Container$
|
|
3410
|
+
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"])));
|
|
3411
3411
|
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) {
|
|
3412
3412
|
var weight = _a.weight;
|
|
3413
3413
|
return (weight ? weight : '400');
|
|
@@ -3463,11 +3463,11 @@ var PriceLabel$1 = function (_a) {
|
|
|
3463
3463
|
: ComponentSize.XSmall;
|
|
3464
3464
|
return (jsx$1(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));
|
|
3465
3465
|
};
|
|
3466
|
-
return (jsxs$1(Container$
|
|
3466
|
+
return (jsxs$1(Container$1q, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3467
3467
|
};
|
|
3468
|
-
var templateObject_1$
|
|
3468
|
+
var templateObject_1$2q, templateObject_2$1I, templateObject_3$1k;
|
|
3469
3469
|
|
|
3470
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3470
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3471
3471
|
var PriceLabelV2$1 = function (_a) {
|
|
3472
3472
|
var _b;
|
|
3473
3473
|
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 ? 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"]);
|
|
@@ -3520,7 +3520,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3520
3520
|
var savetoString = saveto.toFixed(2);
|
|
3521
3521
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3522
3522
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3523
|
-
return (jsxs$1(Container$
|
|
3523
|
+
return (jsxs$1(Container$1q, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3524
3524
|
? finalPriceArray[0]
|
|
3525
3525
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3526
3526
|
marginTop: '-6px',
|
|
@@ -3536,9 +3536,9 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3536
3536
|
lineHeight: '22px',
|
|
3537
3537
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3538
3538
|
};
|
|
3539
|
-
var templateObject_1$
|
|
3539
|
+
var templateObject_1$2p;
|
|
3540
3540
|
|
|
3541
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3541
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2o || (templateObject_1$2o = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3542
3542
|
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"])));
|
|
3543
3543
|
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"])));
|
|
3544
3544
|
var PriceLabelV3 = function (_a) {
|
|
@@ -3595,7 +3595,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3595
3595
|
return null;
|
|
3596
3596
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3597
3597
|
};
|
|
3598
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
3598
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$1q, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1q, { children: [jsxs$1(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3599
3599
|
marginTop: '-5px',
|
|
3600
3600
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(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), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3601
3601
|
marginTop: '-6px',
|
|
@@ -3611,9 +3611,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3611
3611
|
lineHeight: '22px',
|
|
3612
3612
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3613
3613
|
};
|
|
3614
|
-
var templateObject_1$
|
|
3614
|
+
var templateObject_1$2o, templateObject_2$1H, templateObject_3$1j;
|
|
3615
3615
|
|
|
3616
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3616
|
+
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"])));
|
|
3617
3617
|
var PriceLabel = function (_a) {
|
|
3618
3618
|
var _b;
|
|
3619
3619
|
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 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3641,15 +3641,15 @@ var PriceLabel = function (_a) {
|
|
|
3641
3641
|
};
|
|
3642
3642
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3643
3643
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3644
|
-
return (jsxs$1(Container$
|
|
3644
|
+
return (jsxs$1(Container$1q, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3645
3645
|
marginTop: '-5px',
|
|
3646
3646
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(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), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3647
3647
|
marginTop: '-6px',
|
|
3648
3648
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3649
3649
|
};
|
|
3650
|
-
var templateObject_1$
|
|
3650
|
+
var templateObject_1$2n;
|
|
3651
3651
|
|
|
3652
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3652
|
+
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"])));
|
|
3653
3653
|
var PriceLabelV2 = function (_a) {
|
|
3654
3654
|
var _b;
|
|
3655
3655
|
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 ? ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3680,13 +3680,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
3680
3680
|
var finalPriceString = finalPriceArray[0]
|
|
3681
3681
|
? finalPriceArray[0]
|
|
3682
3682
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3683
|
-
return (jsxs$1(Container$
|
|
3683
|
+
return (jsxs$1(Container$1q, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3684
3684
|
};
|
|
3685
|
-
var templateObject_1$
|
|
3685
|
+
var templateObject_1$2m;
|
|
3686
3686
|
|
|
3687
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3687
|
+
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"])));
|
|
3688
3688
|
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"])));
|
|
3689
|
-
var templateObject_1$
|
|
3689
|
+
var templateObject_1$2l, templateObject_2$1G;
|
|
3690
3690
|
|
|
3691
3691
|
var ClubPriceMemberLabel = function (_a) {
|
|
3692
3692
|
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"]);
|
|
@@ -3695,13 +3695,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3695
3695
|
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsx$1(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsx$1(Fragment$2, { children: PriceComponent }, void 0)) }, void 0));
|
|
3696
3696
|
};
|
|
3697
3697
|
|
|
3698
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3698
|
+
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) {
|
|
3699
3699
|
var width = _a.width;
|
|
3700
3700
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3701
3701
|
});
|
|
3702
|
-
var templateObject_1$
|
|
3702
|
+
var templateObject_1$2k;
|
|
3703
3703
|
|
|
3704
|
-
var Container$
|
|
3704
|
+
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) {
|
|
3705
3705
|
var height = _a.height;
|
|
3706
3706
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3707
3707
|
}, function (_a) {
|
|
@@ -3726,11 +3726,11 @@ var Container$1o = newStyled.div(templateObject_1$2i || (templateObject_1$2i = _
|
|
|
3726
3726
|
var SkeletonBox = function (_a) {
|
|
3727
3727
|
var width = _a.width, height = _a.height;
|
|
3728
3728
|
var theme = useTheme();
|
|
3729
|
-
return jsx$1(Container$
|
|
3729
|
+
return jsx$1(Container$1p, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3730
3730
|
};
|
|
3731
|
-
var templateObject_1$
|
|
3731
|
+
var templateObject_1$2j;
|
|
3732
3732
|
|
|
3733
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3733
|
+
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) {
|
|
3734
3734
|
var width = _a.width;
|
|
3735
3735
|
return width;
|
|
3736
3736
|
}, function (_a) {
|
|
@@ -3759,7 +3759,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1F || (templateObject_2$
|
|
|
3759
3759
|
var opacity = _a.opacity;
|
|
3760
3760
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3761
3761
|
});
|
|
3762
|
-
var templateObject_1$
|
|
3762
|
+
var templateObject_1$2i, templateObject_2$1F;
|
|
3763
3763
|
|
|
3764
3764
|
/* eslint-disable no-undef */
|
|
3765
3765
|
var cache = new Map();
|
|
@@ -3935,7 +3935,7 @@ var buildImageUrl = function (_a) {
|
|
|
3935
3935
|
}
|
|
3936
3936
|
};
|
|
3937
3937
|
|
|
3938
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3938
|
+
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; });
|
|
3939
3939
|
var Image$3 = function (_a) {
|
|
3940
3940
|
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"]);
|
|
3941
3941
|
var config = useTheme().config;
|
|
@@ -3944,15 +3944,15 @@ var Image$3 = function (_a) {
|
|
|
3944
3944
|
: src;
|
|
3945
3945
|
return (jsx$1(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));
|
|
3946
3946
|
};
|
|
3947
|
-
var templateObject_1$
|
|
3947
|
+
var templateObject_1$2h;
|
|
3948
3948
|
|
|
3949
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3949
|
+
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"])));
|
|
3950
3950
|
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"])));
|
|
3951
3951
|
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) {
|
|
3952
3952
|
var $color = _a.$color;
|
|
3953
3953
|
return $color;
|
|
3954
3954
|
});
|
|
3955
|
-
var templateObject_1$
|
|
3955
|
+
var templateObject_1$2g, templateObject_2$1E, templateObject_3$1i;
|
|
3956
3956
|
|
|
3957
3957
|
var ToggleComponent = function (_a) {
|
|
3958
3958
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c;
|
|
@@ -4816,7 +4816,7 @@ function jsxs(type, props, key) {
|
|
|
4816
4816
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4817
4817
|
// `variants` styles that are consistent through all themes.
|
|
4818
4818
|
var TAGS = {
|
|
4819
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4819
|
+
hero1: newStyled.h1(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject([""], [""]))),
|
|
4820
4820
|
hero2: newStyled.h2(templateObject_2$1D || (templateObject_2$1D = __makeTemplateObject([""], [""]))),
|
|
4821
4821
|
hero3: newStyled.h3(templateObject_3$1h || (templateObject_3$1h = __makeTemplateObject([""], [""]))),
|
|
4822
4822
|
display1: newStyled.h1(templateObject_4$11 || (templateObject_4$11 = __makeTemplateObject([""], [""]))),
|
|
@@ -4956,9 +4956,9 @@ var DEFAULTS = {
|
|
|
4956
4956
|
size: 'regular',
|
|
4957
4957
|
},
|
|
4958
4958
|
};
|
|
4959
|
-
var templateObject_1$
|
|
4959
|
+
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;
|
|
4960
4960
|
|
|
4961
|
-
var Container$
|
|
4961
|
+
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"])));
|
|
4962
4962
|
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"])));
|
|
4963
4963
|
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"])));
|
|
4964
4964
|
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"])));
|
|
@@ -4966,7 +4966,7 @@ var Check$1 = newStyled.div(templateObject_5$N || (templateObject_5$N = __makeTe
|
|
|
4966
4966
|
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"])));
|
|
4967
4967
|
var PackSelectorV2 = function (_a) {
|
|
4968
4968
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4969
|
-
return (jsx$1(Container$
|
|
4969
|
+
return (jsx$1(Container$1o, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4970
4970
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4971
4971
|
}) }), void 0));
|
|
4972
4972
|
};
|
|
@@ -4988,27 +4988,27 @@ var PackCard$1 = function (_a) {
|
|
|
4988
4988
|
currency: currencyCode || 'USD',
|
|
4989
4989
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4990
4990
|
};
|
|
4991
|
-
var templateObject_1$
|
|
4991
|
+
var templateObject_1$2e, templateObject_2$1C, templateObject_3$1g, templateObject_4$10, templateObject_5$N, templateObject_6$F;
|
|
4992
4992
|
|
|
4993
|
-
var Container$
|
|
4993
|
+
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"])));
|
|
4994
4994
|
var DropContainer = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4995
4995
|
var DropList = function (_a) {
|
|
4996
4996
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4997
|
-
return (jsx$1(Container$
|
|
4997
|
+
return (jsx$1(Container$1n, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4998
4998
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4999
4999
|
}) }, void 0));
|
|
5000
5000
|
};
|
|
5001
|
-
var templateObject_1$
|
|
5001
|
+
var templateObject_1$2d, templateObject_2$1B;
|
|
5002
5002
|
|
|
5003
5003
|
var DROPS_TOTAL = 5;
|
|
5004
|
-
var Container$
|
|
5004
|
+
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"])));
|
|
5005
5005
|
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"])));
|
|
5006
5006
|
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"])));
|
|
5007
5007
|
var AbsorbencyLevel = function (_a) {
|
|
5008
5008
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5009
|
-
return (jsxs$1(Container$
|
|
5009
|
+
return (jsxs$1(Container$1m, { children: [jsx$1(Title$b, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
5010
5010
|
};
|
|
5011
|
-
var templateObject_1$
|
|
5011
|
+
var templateObject_1$2c, templateObject_2$1A, templateObject_3$1f;
|
|
5012
5012
|
|
|
5013
5013
|
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]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),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===Fragment$1&&Object.keys(l).length>0){if(!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(`
|
|
5014
5014
|
`),"","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(`
|
|
@@ -5084,7 +5084,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5084
5084
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5085
5085
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5086
5086
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5087
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5087
|
+
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"])));
|
|
5088
5088
|
var Accordion$1 = function (_a) {
|
|
5089
5089
|
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;
|
|
5090
5090
|
var theme = useTheme();
|
|
@@ -5108,9 +5108,9 @@ var Accordion$1 = function (_a) {
|
|
|
5108
5108
|
} }, { children: jsx$1(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 && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5109
5109
|
} }), void 0));
|
|
5110
5110
|
};
|
|
5111
|
-
var templateObject_1$
|
|
5111
|
+
var templateObject_1$2b;
|
|
5112
5112
|
|
|
5113
|
-
var Container$
|
|
5113
|
+
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"])));
|
|
5114
5114
|
var AccordionOptions = function (_a) {
|
|
5115
5115
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5116
5116
|
var _b = useState({
|
|
@@ -5123,7 +5123,7 @@ var AccordionOptions = function (_a) {
|
|
|
5123
5123
|
}
|
|
5124
5124
|
return false;
|
|
5125
5125
|
};
|
|
5126
|
-
return (jsx$1(Container$
|
|
5126
|
+
return (jsx$1(Container$1l, { children: accordions.map(function (accordion, index) {
|
|
5127
5127
|
var forceOpenValue = getForceOpen(index);
|
|
5128
5128
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5129
5129
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5134,7 +5134,7 @@ var AccordionOptions = function (_a) {
|
|
|
5134
5134
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5135
5135
|
}) }, void 0));
|
|
5136
5136
|
};
|
|
5137
|
-
var templateObject_1$
|
|
5137
|
+
var templateObject_1$2a;
|
|
5138
5138
|
|
|
5139
5139
|
/**
|
|
5140
5140
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5270,11 +5270,11 @@ var isValidDate = function (value) {
|
|
|
5270
5270
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5271
5271
|
};
|
|
5272
5272
|
|
|
5273
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5273
|
+
var Bold = newStyled.span(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5274
5274
|
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"])));
|
|
5275
|
-
var templateObject_1$
|
|
5275
|
+
var templateObject_1$29, templateObject_2$1z;
|
|
5276
5276
|
|
|
5277
|
-
var Container$
|
|
5277
|
+
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) {
|
|
5278
5278
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5279
5279
|
return width;
|
|
5280
5280
|
}, function (_a) {
|
|
@@ -5285,12 +5285,12 @@ var FlexCentered = newStyled.div(templateObject_2$1y || (templateObject_2$1y = _
|
|
|
5285
5285
|
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"])));
|
|
5286
5286
|
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"])));
|
|
5287
5287
|
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"])));
|
|
5288
|
-
var templateObject_1$
|
|
5288
|
+
var templateObject_1$28, templateObject_2$1y, templateObject_3$1e, templateObject_4$$, templateObject_5$M;
|
|
5289
5289
|
|
|
5290
5290
|
var CouponCard = function (_a) {
|
|
5291
5291
|
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;
|
|
5292
5292
|
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5293
|
-
return (jsxs$1(Container$
|
|
5293
|
+
return (jsxs$1(Container$1k, __assign$1({ height: height, width: width }, { children: [jsx$1(LeftSide, { children: jsx$1(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxs$1(RightSide, { children: [jsxs$1(FlexStart, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsx$1(FlexCentered, { children: !showCoupon ? (jsx$1(ButtonPrimary, { type: "button", text: btnText, wide: true, size: ComponentSize.Large, onClick: function () {
|
|
5294
5294
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5295
5295
|
setShowCoupon(function (prev) { return !prev; });
|
|
5296
5296
|
} }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
|
|
@@ -5438,14 +5438,14 @@ var sizeOptions = [
|
|
|
5438
5438
|
},
|
|
5439
5439
|
];
|
|
5440
5440
|
|
|
5441
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5441
|
+
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; });
|
|
5442
5442
|
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"])));
|
|
5443
5443
|
var Error$1 = function (_a) {
|
|
5444
5444
|
var error = _a.error;
|
|
5445
5445
|
var theme = useTheme();
|
|
5446
5446
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5447
5447
|
};
|
|
5448
|
-
var templateObject_1$
|
|
5448
|
+
var templateObject_1$27, templateObject_2$1x;
|
|
5449
5449
|
|
|
5450
5450
|
var BaseSelectButton = function (_a) {
|
|
5451
5451
|
var children = _a.children, as = _a.as;
|
|
@@ -5462,7 +5462,7 @@ function BaseSelectOption(_a) {
|
|
|
5462
5462
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5463
5463
|
}
|
|
5464
5464
|
|
|
5465
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5465
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5466
5466
|
function BaseSelect(_a) {
|
|
5467
5467
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5468
5468
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5472,7 +5472,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5472
5472
|
Options: BaseSelectOptions,
|
|
5473
5473
|
Option: BaseSelectOption,
|
|
5474
5474
|
});
|
|
5475
|
-
var templateObject_1$
|
|
5475
|
+
var templateObject_1$26;
|
|
5476
5476
|
|
|
5477
5477
|
var CustomButton = newStyled.button(function (_a) {
|
|
5478
5478
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5511,7 +5511,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5511
5511
|
});
|
|
5512
5512
|
});
|
|
5513
5513
|
// TODO Remove this when we find the real solution
|
|
5514
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5514
|
+
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) {
|
|
5515
5515
|
var open = _a.open;
|
|
5516
5516
|
return open &&
|
|
5517
5517
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5531,7 +5531,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5531
5531
|
} }), void 0));
|
|
5532
5532
|
};
|
|
5533
5533
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5534
|
-
var templateObject_1$
|
|
5534
|
+
var templateObject_1$25;
|
|
5535
5535
|
|
|
5536
5536
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5537
5537
|
var theme = _a.theme;
|
|
@@ -5698,7 +5698,7 @@ var CustomCheckboxStyles = {
|
|
|
5698
5698
|
},
|
|
5699
5699
|
};
|
|
5700
5700
|
|
|
5701
|
-
var Container$
|
|
5701
|
+
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"])));
|
|
5702
5702
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5703
5703
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5704
5704
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5723,9 +5723,9 @@ var Checkbox = function (_a) {
|
|
|
5723
5723
|
}
|
|
5724
5724
|
onChange(e.target.checked);
|
|
5725
5725
|
};
|
|
5726
|
-
return (jsxs$1(Container$
|
|
5726
|
+
return (jsxs$1(Container$1j, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(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));
|
|
5727
5727
|
};
|
|
5728
|
-
var templateObject_1$
|
|
5728
|
+
var templateObject_1$24, templateObject_2$1w;
|
|
5729
5729
|
|
|
5730
5730
|
var CustomOption = newStyled.li(function (_a) {
|
|
5731
5731
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5774,7 +5774,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5774
5774
|
Option: BaseDropdownOption,
|
|
5775
5775
|
});
|
|
5776
5776
|
|
|
5777
|
-
var Container$
|
|
5777
|
+
var Container$1i = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject([""], [""])));
|
|
5778
5778
|
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"])));
|
|
5779
5779
|
var SelectedOption = newStyled.span(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5780
5780
|
var fontWeight = _a.fontWeight;
|
|
@@ -5809,10 +5809,10 @@ function SimpleDropdown(_a) {
|
|
|
5809
5809
|
}
|
|
5810
5810
|
setSelectedValue(value);
|
|
5811
5811
|
}, [value, options, initialValue]);
|
|
5812
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5812
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1i : Fragment$1;
|
|
5813
5813
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(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) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5814
5814
|
}
|
|
5815
|
-
var templateObject_1$
|
|
5815
|
+
var templateObject_1$23, templateObject_2$1v, templateObject_3$1d;
|
|
5816
5816
|
|
|
5817
5817
|
/* base styles & size variants */
|
|
5818
5818
|
var CustomRadioStyles$2 = {
|
|
@@ -5877,8 +5877,8 @@ var ContainerStyles$2 = {
|
|
|
5877
5877
|
},
|
|
5878
5878
|
};
|
|
5879
5879
|
|
|
5880
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5881
|
-
var Container$
|
|
5880
|
+
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"])));
|
|
5881
|
+
var Container$1h = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5882
5882
|
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) {
|
|
5883
5883
|
var disabled = _a.disabled;
|
|
5884
5884
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -5911,9 +5911,9 @@ var RadioInput = function (_a) {
|
|
|
5911
5911
|
var value = event.currentTarget.value;
|
|
5912
5912
|
onChange({ value: value, label: label });
|
|
5913
5913
|
};
|
|
5914
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5914
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$1h, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxs$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5915
5915
|
};
|
|
5916
|
-
var templateObject_1$
|
|
5916
|
+
var templateObject_1$22, templateObject_2$1u, templateObject_3$1c, templateObject_4$_;
|
|
5917
5917
|
|
|
5918
5918
|
var useOnClickOutside = function (ref, handler) {
|
|
5919
5919
|
useEffect(function () {
|
|
@@ -6006,7 +6006,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6006
6006
|
}
|
|
6007
6007
|
};
|
|
6008
6008
|
|
|
6009
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
6009
|
+
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) {
|
|
6010
6010
|
var position = _a.position;
|
|
6011
6011
|
return getWrapperFlexDirection(position);
|
|
6012
6012
|
}, function (_a) {
|
|
@@ -6071,7 +6071,7 @@ var CloseToolTip = newStyled.button(templateObject_8$p || (templateObject_8$p =
|
|
|
6071
6071
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6072
6072
|
return right;
|
|
6073
6073
|
});
|
|
6074
|
-
var templateObject_1$
|
|
6074
|
+
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;
|
|
6075
6075
|
|
|
6076
6076
|
var Tooltip = function (_a) {
|
|
6077
6077
|
var _b;
|
|
@@ -6114,7 +6114,7 @@ var benefitsColorMapper = function (_a) {
|
|
|
6114
6114
|
};
|
|
6115
6115
|
};
|
|
6116
6116
|
|
|
6117
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6117
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6118
6118
|
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) {
|
|
6119
6119
|
var selected = _a.selected, theme = _a.theme;
|
|
6120
6120
|
return selected
|
|
@@ -6151,8 +6151,8 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6151
6151
|
var selected = _a.selected, theme = _a.theme;
|
|
6152
6152
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6153
6153
|
});
|
|
6154
|
-
var Container$
|
|
6155
|
-
var templateObject_1$
|
|
6154
|
+
var Container$1g = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6155
|
+
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;
|
|
6156
6156
|
|
|
6157
6157
|
var radioIds$2 = {
|
|
6158
6158
|
oneTime: {
|
|
@@ -6202,12 +6202,12 @@ var Autoship = function (_a) {
|
|
|
6202
6202
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6203
6203
|
};
|
|
6204
6204
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6205
|
-
return (jsxs$1(Container$
|
|
6205
|
+
return (jsxs$1(Container$1g, __assign$1({ className: className }, { children: [jsxs$1(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: [jsx$1(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: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$3, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$4, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$4, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, { children: [jsx$1(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: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$3, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$3, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$4, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6206
6206
|
? benefitsColor.selected
|
|
6207
6207
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$3, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6208
6208
|
};
|
|
6209
6209
|
|
|
6210
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6210
|
+
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) {
|
|
6211
6211
|
var theme = _a.theme;
|
|
6212
6212
|
return theme.name === 'TheSpaDr' &&
|
|
6213
6213
|
"\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 ";
|
|
@@ -6260,12 +6260,12 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_11$6 || (templateOb
|
|
|
6260
6260
|
var selected = _a.selected, theme = _a.theme;
|
|
6261
6261
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6262
6262
|
});
|
|
6263
|
-
var Container$
|
|
6263
|
+
var Container$1f = newStyled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6264
6264
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6265
6265
|
var theme = _a.theme;
|
|
6266
6266
|
return theme.component.autoship.tooltip.margin;
|
|
6267
6267
|
});
|
|
6268
|
-
var templateObject_1$
|
|
6268
|
+
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;
|
|
6269
6269
|
|
|
6270
6270
|
var radioIds$1 = {
|
|
6271
6271
|
oneTime: {
|
|
@@ -6325,7 +6325,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6325
6325
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6326
6326
|
};
|
|
6327
6327
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6328
|
-
return (jsxs$1(Container$
|
|
6328
|
+
return (jsxs$1(Container$1f, __assign$1({ className: className }, { children: [jsxs$1(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: [jsx$1(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), jsxs$1(SubscriptionHeader$3, { children: [jsxs$1(FlexContainer$2, { children: [jsx$1(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: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$1.autoship.id) }, void 0), jsx$1(TooltipWrapper$1, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsx$1(StyledPrice$2, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer$2, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$3, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
6329
6329
|
? benefitsColor.selected
|
|
6330
6330
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$2, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$2, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Delivery Every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(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: [jsx$1(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: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsx$1(StyledPrice$2, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6331
6331
|
};
|
|
@@ -6344,13 +6344,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6344
6344
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6345
6345
|
_a$2);
|
|
6346
6346
|
|
|
6347
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6347
|
+
var CustomerDetails = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject([""], [""])));
|
|
6348
6348
|
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"])));
|
|
6349
6349
|
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"])));
|
|
6350
6350
|
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"])));
|
|
6351
6351
|
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"])));
|
|
6352
6352
|
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"])));
|
|
6353
|
-
var templateObject_1$
|
|
6353
|
+
var templateObject_1$1_, templateObject_2$1q, templateObject_3$18, templateObject_4$W, templateObject_5$I, templateObject_6$B;
|
|
6354
6354
|
|
|
6355
6355
|
var NameWithStars = function (_a) {
|
|
6356
6356
|
var name = _a.name, size = _a.size;
|
|
@@ -6368,7 +6368,7 @@ var ResultFeedback = function (_a) {
|
|
|
6368
6368
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6369
6369
|
};
|
|
6370
6370
|
|
|
6371
|
-
var Container$
|
|
6371
|
+
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; });
|
|
6372
6372
|
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"])));
|
|
6373
6373
|
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; });
|
|
6374
6374
|
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) {
|
|
@@ -6381,7 +6381,7 @@ var UserInfoText = newStyled.div(templateObject_4$V || (templateObject_4$V = __m
|
|
|
6381
6381
|
var theme = _a.theme, size = _a.size;
|
|
6382
6382
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6383
6383
|
});
|
|
6384
|
-
var templateObject_1$
|
|
6384
|
+
var templateObject_1$1Z, templateObject_2$1p, templateObject_3$17, templateObject_4$V;
|
|
6385
6385
|
|
|
6386
6386
|
/* base styles & size variants */
|
|
6387
6387
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6456,10 +6456,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6456
6456
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6457
6457
|
var infoText = buildInfoText(name, age, months);
|
|
6458
6458
|
var Component = componentByVariant[variant];
|
|
6459
|
-
return (jsxs$1(Container$
|
|
6459
|
+
return (jsxs$1(Container$1e, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6460
6460
|
};
|
|
6461
6461
|
|
|
6462
|
-
var Section = newStyled.div(templateObject_1$
|
|
6462
|
+
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) {
|
|
6463
6463
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6464
6464
|
});
|
|
6465
6465
|
var CardHeader = function (_a) {
|
|
@@ -6470,16 +6470,16 @@ var CardFooter = function (_a) {
|
|
|
6470
6470
|
var children = _a.children;
|
|
6471
6471
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6472
6472
|
};
|
|
6473
|
-
var templateObject_1$
|
|
6473
|
+
var templateObject_1$1Y;
|
|
6474
6474
|
|
|
6475
|
-
var Body$1 = newStyled.div(templateObject_1$
|
|
6475
|
+
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"])));
|
|
6476
6476
|
var CardBody$1 = function (_a) {
|
|
6477
6477
|
var children = _a.children;
|
|
6478
6478
|
return jsx$1(Body$1, { children: children }, void 0);
|
|
6479
6479
|
};
|
|
6480
|
-
var templateObject_1$
|
|
6480
|
+
var templateObject_1$1X;
|
|
6481
6481
|
|
|
6482
|
-
var Container$
|
|
6482
|
+
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) {
|
|
6483
6483
|
var flex = _a.flex;
|
|
6484
6484
|
return flex &&
|
|
6485
6485
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6494,23 +6494,23 @@ var Container$1c = newStyled.div(templateObject_1$1V || (templateObject_1$1V = _
|
|
|
6494
6494
|
var Card$2 = function (_a) {
|
|
6495
6495
|
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;
|
|
6496
6496
|
var theme = useTheme();
|
|
6497
|
-
return (jsx$1(Container$
|
|
6497
|
+
return (jsx$1(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));
|
|
6498
6498
|
};
|
|
6499
6499
|
var Card$3 = Object.assign(Card$2, {
|
|
6500
6500
|
Header: CardHeader,
|
|
6501
6501
|
Footer: CardFooter,
|
|
6502
6502
|
Body: CardBody$1,
|
|
6503
6503
|
});
|
|
6504
|
-
var templateObject_1$
|
|
6504
|
+
var templateObject_1$1W;
|
|
6505
6505
|
|
|
6506
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6506
|
+
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"])));
|
|
6507
6507
|
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"])));
|
|
6508
6508
|
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) {
|
|
6509
6509
|
var color = _a.color;
|
|
6510
6510
|
return color;
|
|
6511
6511
|
});
|
|
6512
6512
|
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"])));
|
|
6513
|
-
var templateObject_1$
|
|
6513
|
+
var templateObject_1$1V, templateObject_2$1o, templateObject_3$16, templateObject_4$U;
|
|
6514
6514
|
|
|
6515
6515
|
var Minimalistic = function (_a) {
|
|
6516
6516
|
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;
|
|
@@ -6518,23 +6518,23 @@ var Minimalistic = function (_a) {
|
|
|
6518
6518
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6519
6519
|
};
|
|
6520
6520
|
|
|
6521
|
-
var Container$
|
|
6521
|
+
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"])));
|
|
6522
6522
|
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; });
|
|
6523
6523
|
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; });
|
|
6524
6524
|
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"])));
|
|
6525
6525
|
var Simple = function (_a) {
|
|
6526
6526
|
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;
|
|
6527
6527
|
var theme = useTheme();
|
|
6528
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
6528
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$1c, { children: [jsx$1(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6529
6529
|
};
|
|
6530
|
-
var templateObject_1$
|
|
6530
|
+
var templateObject_1$1U, templateObject_2$1n, templateObject_3$15, templateObject_4$T;
|
|
6531
6531
|
|
|
6532
6532
|
var Bundle = {
|
|
6533
6533
|
Minimalistic: Minimalistic,
|
|
6534
6534
|
Simple: Simple,
|
|
6535
6535
|
};
|
|
6536
6536
|
|
|
6537
|
-
var Container$
|
|
6537
|
+
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) {
|
|
6538
6538
|
var displayBNPL = _a.displayBNPL;
|
|
6539
6539
|
return (displayBNPL ? 'flex' : 'none');
|
|
6540
6540
|
});
|
|
@@ -6559,70 +6559,80 @@ var BuyNowPayLater = function (_a) {
|
|
|
6559
6559
|
else {
|
|
6560
6560
|
dynamicText = "or 4 interest-free payments of ";
|
|
6561
6561
|
}
|
|
6562
|
-
return (jsx$1(Container$
|
|
6562
|
+
return (jsx$1(Container$1b, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: [jsxs$1("div", { children: [dynamicText, jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", style: {
|
|
6563
6563
|
display: 'inline',
|
|
6564
6564
|
fontSize: fontSize,
|
|
6565
6565
|
paddingLeft: '0.25rem',
|
|
6566
6566
|
paddingRight: '0.25rem',
|
|
6567
6567
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsx$1(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsx$1(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));
|
|
6568
6568
|
};
|
|
6569
|
-
var templateObject_1$
|
|
6569
|
+
var templateObject_1$1T, templateObject_2$1m, templateObject_3$14;
|
|
6570
6570
|
|
|
6571
|
-
var Text$6 = newStyled.
|
|
6572
|
-
var
|
|
6573
|
-
|
|
6571
|
+
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) {
|
|
6572
|
+
var backgroundColor = _a.backgroundColor;
|
|
6573
|
+
return backgroundColor;
|
|
6574
|
+
}, function (_a) {
|
|
6575
|
+
var borderRadius = _a.borderRadius;
|
|
6576
|
+
return borderRadius;
|
|
6577
|
+
}, function (_a) {
|
|
6578
|
+
var color = _a.color;
|
|
6579
|
+
return color;
|
|
6580
|
+
});
|
|
6581
|
+
var OfferBanner = function (_a) {
|
|
6582
|
+
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
6583
|
+
var theme = useTheme();
|
|
6584
|
+
return (jsx$1(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));
|
|
6585
|
+
};
|
|
6586
|
+
var templateObject_1$1S;
|
|
6587
|
+
|
|
6588
|
+
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"); });
|
|
6589
|
+
var CloseButton$1 = function (_a) {
|
|
6590
|
+
var onClick = _a.onClick, size = _a.size;
|
|
6574
6591
|
var theme = useTheme();
|
|
6575
|
-
return jsx$1(
|
|
6592
|
+
return (jsx$1(Container$1a, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6576
6593
|
};
|
|
6577
6594
|
var templateObject_1$1R;
|
|
6578
6595
|
|
|
6579
|
-
var
|
|
6580
|
-
var
|
|
6596
|
+
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; });
|
|
6597
|
+
var Description$1 = function (_a) {
|
|
6581
6598
|
var text = _a.text;
|
|
6582
6599
|
var theme = useTheme();
|
|
6583
|
-
return
|
|
6600
|
+
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6584
6601
|
};
|
|
6585
6602
|
var templateObject_1$1Q;
|
|
6586
6603
|
|
|
6587
|
-
var
|
|
6588
|
-
var
|
|
6604
|
+
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; });
|
|
6605
|
+
var Promo = function (_a) {
|
|
6589
6606
|
var text = _a.text;
|
|
6590
6607
|
var theme = useTheme();
|
|
6591
|
-
return jsx$1(
|
|
6608
|
+
return (jsx$1(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6592
6609
|
};
|
|
6593
6610
|
var templateObject_1$1P;
|
|
6594
6611
|
|
|
6595
|
-
var
|
|
6596
|
-
var
|
|
6597
|
-
var
|
|
6612
|
+
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; });
|
|
6613
|
+
var Title$8 = function (_a) {
|
|
6614
|
+
var title = _a.title;
|
|
6598
6615
|
var theme = useTheme();
|
|
6599
|
-
return
|
|
6616
|
+
return jsx$1(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6600
6617
|
};
|
|
6601
6618
|
var templateObject_1$1O;
|
|
6602
6619
|
|
|
6603
|
-
var
|
|
6604
|
-
var backgroundColor = _a.backgroundColor;
|
|
6605
|
-
return backgroundColor;
|
|
6606
|
-
}, function (_a) {
|
|
6607
|
-
var borderRadius = _a.borderRadius;
|
|
6608
|
-
return borderRadius;
|
|
6609
|
-
}, function (_a) {
|
|
6610
|
-
var color = _a.color;
|
|
6611
|
-
return color;
|
|
6612
|
-
});
|
|
6613
|
-
var OfferBanner = function (_a) {
|
|
6614
|
-
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
6615
|
-
var theme = useTheme();
|
|
6616
|
-
return (jsx$1(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));
|
|
6617
|
-
};
|
|
6620
|
+
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"); });
|
|
6618
6621
|
var templateObject_1$1N;
|
|
6619
6622
|
|
|
6623
|
+
var TrashButton = function (_a) {
|
|
6624
|
+
var onClick = _a.onClick, size = _a.size;
|
|
6625
|
+
useTheme();
|
|
6626
|
+
return (jsx$1(Container$19, __assign$1({ onClick: onClick, "data-testid": "CartProductItemTrashBtn", size: size }, { children: jsx$1(Icon.Actions.Trash, { width: size - 1, height: size - 1, fill: "#292929" }, void 0) }), void 0));
|
|
6627
|
+
};
|
|
6628
|
+
|
|
6620
6629
|
var CartProductItem = {
|
|
6621
6630
|
Title: Title$8,
|
|
6622
6631
|
Tag: OfferBanner,
|
|
6623
6632
|
Promo: Promo,
|
|
6624
6633
|
Description: Description$1,
|
|
6625
6634
|
CloseButton: CloseButton$1,
|
|
6635
|
+
TrashButton: TrashButton,
|
|
6626
6636
|
};
|
|
6627
6637
|
|
|
6628
6638
|
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"])));
|
|
@@ -7208,7 +7218,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7208
7218
|
: ComponentSize.XSmall;
|
|
7209
7219
|
return (jsx$1(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));
|
|
7210
7220
|
};
|
|
7211
|
-
return (jsxs$1(Container$
|
|
7221
|
+
return (jsxs$1(Container$1q, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(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), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
7212
7222
|
? finalPriceArray[0]
|
|
7213
7223
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7214
7224
|
};
|
|
@@ -22019,11 +22029,11 @@ var getCellColor = function (index, cell, isLight) {
|
|
|
22019
22029
|
case 'XL':
|
|
22020
22030
|
return '#8bbeea';
|
|
22021
22031
|
case 'XL+':
|
|
22022
|
-
return '#
|
|
22032
|
+
return '#3485D5';
|
|
22023
22033
|
case '2XL':
|
|
22024
22034
|
return '#b1d7c3';
|
|
22025
22035
|
case '2XL+':
|
|
22026
|
-
return '#
|
|
22036
|
+
return '#6CB28B';
|
|
22027
22037
|
case '3XL':
|
|
22028
22038
|
return '#e7a4f7';
|
|
22029
22039
|
case '4XL':
|