@trafilea/afrodita-components 6.45.5 → 6.46.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +15 -1
- package/build/index.esm.js +691 -669
- package/build/index.esm.js.map +1 -1
- package/build/index.js +691 -668
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3189,7 +3189,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3189
3189
|
};
|
|
3190
3190
|
}
|
|
3191
3191
|
};
|
|
3192
|
-
var Container$
|
|
3192
|
+
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) {
|
|
3193
3193
|
var backgroundColor = _a.backgroundColor;
|
|
3194
3194
|
return backgroundColor;
|
|
3195
3195
|
}, function (_a) {
|
|
@@ -3211,7 +3211,7 @@ var Container$1q = newStyled.div(templateObject_1$2q || (templateObject_1$2q = _
|
|
|
3211
3211
|
var size = _a.size;
|
|
3212
3212
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3213
3213
|
});
|
|
3214
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3214
|
+
var H3$2 = newStyled.h3(templateObject_2$1K || (templateObject_2$1K = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3215
3215
|
var textColor = _a.textColor;
|
|
3216
3216
|
return textColor;
|
|
3217
3217
|
}, function (_a) {
|
|
@@ -3226,9 +3226,9 @@ var H3$2 = newStyled.h3(templateObject_2$1J || (templateObject_2$1J = __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$1r, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: 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$2r, 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$1q = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3263
3263
|
var backgroundColor = _a.backgroundColor;
|
|
3264
3264
|
return backgroundColor;
|
|
3265
3265
|
}, function (_a) {
|
|
@@ -3281,7 +3281,7 @@ var Container$1p = newStyled.div(templateObject_1$2p || (templateObject_1$2p = _
|
|
|
3281
3281
|
var size = _a.size;
|
|
3282
3282
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3283
3283
|
});
|
|
3284
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
3284
|
+
var H3$1 = newStyled.h3(templateObject_2$1J || (templateObject_2$1J = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3285
3285
|
var textColor = _a.textColor;
|
|
3286
3286
|
return textColor;
|
|
3287
3287
|
}, function (_a) {
|
|
@@ -3296,9 +3296,9 @@ var H3$1 = newStyled.h3(templateObject_2$1I || (templateObject_2$1I = __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$1q, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: 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$2q, templateObject_2$1J;
|
|
3302
3302
|
|
|
3303
3303
|
var Viewports = {
|
|
3304
3304
|
mobile: 'mobile',
|
|
@@ -3407,8 +3407,8 @@ 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$
|
|
3411
|
-
var Price = newStyled.p(templateObject_2$
|
|
3410
|
+
var Container$1p = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
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');
|
|
3414
3414
|
}, function (_a) {
|
|
@@ -3432,7 +3432,7 @@ var Price = newStyled.p(templateObject_2$1H || (templateObject_2$1H = __makeTemp
|
|
|
3432
3432
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3433
3433
|
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3434
3434
|
});
|
|
3435
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3435
|
+
var TagContainer = newStyled.div(templateObject_3$1k || (templateObject_3$1k = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3436
3436
|
var _b;
|
|
3437
3437
|
var size = _a.size;
|
|
3438
3438
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -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$1p, __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$2p, templateObject_2$1I, templateObject_3$1k;
|
|
3469
3469
|
|
|
3470
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3470
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2o || (templateObject_1$2o = __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$1p, __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,11 +3536,11 @@ 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$2o;
|
|
3540
3540
|
|
|
3541
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3542
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3543
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3541
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2n || (templateObject_1$2n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
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
|
+
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) {
|
|
3545
3545
|
var _b;
|
|
3546
3546
|
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, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -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$1p, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1p, { 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$2n, templateObject_2$1H, templateObject_3$1j;
|
|
3615
3615
|
|
|
3616
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3616
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2m || (templateObject_1$2m = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
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$1p, __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$2m;
|
|
3651
3651
|
|
|
3652
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3652
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2l || (templateObject_1$2l = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
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$1p, __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$2l;
|
|
3686
3686
|
|
|
3687
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3688
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3689
|
-
var templateObject_1$
|
|
3687
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$2k || (templateObject_1$2k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"])));
|
|
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$2k, 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$2j || (templateObject_1$2j = __makeTemplateObject(["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"], ["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"])), function (_a) {
|
|
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$2j;
|
|
3703
3703
|
|
|
3704
|
-
var Container$
|
|
3704
|
+
var Container$1o = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
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$1n = newStyled.div(templateObject_1$2h || (templateObject_1$2h = _
|
|
|
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$1o, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3730
3730
|
};
|
|
3731
|
-
var templateObject_1$
|
|
3731
|
+
var templateObject_1$2i;
|
|
3732
3732
|
|
|
3733
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3733
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2h || (templateObject_1$2h = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3734
3734
|
var width = _a.width;
|
|
3735
3735
|
return width;
|
|
3736
3736
|
}, function (_a) {
|
|
@@ -3746,7 +3746,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2g || (templateObject_1$2g
|
|
|
3746
3746
|
var opacity = _a.opacity;
|
|
3747
3747
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3748
3748
|
});
|
|
3749
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3749
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1F || (templateObject_2$1F = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3750
3750
|
var width = _a.width;
|
|
3751
3751
|
return width;
|
|
3752
3752
|
}, function (_a) {
|
|
@@ -3759,7 +3759,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1E || (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$2h, 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$2g || (templateObject_1$2g = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
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$2g;
|
|
3948
3948
|
|
|
3949
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3950
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3951
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3949
|
+
var LabelWrapper = newStyled.label(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"])));
|
|
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
|
+
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$2f, 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;
|
|
@@ -4408,7 +4408,7 @@ var MyAccount = /*#__PURE__*/Object.freeze({
|
|
|
4408
4408
|
|
|
4409
4409
|
var AddressInformation = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/address_information" }), void 0)); };
|
|
4410
4410
|
|
|
4411
|
-
var Benefits$
|
|
4411
|
+
var Benefits$2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/benefits" }), void 0); };
|
|
4412
4412
|
|
|
4413
4413
|
var ClubMembership = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/club_membership" }), void 0)); };
|
|
4414
4414
|
|
|
@@ -4467,7 +4467,7 @@ var UserV2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { nam
|
|
|
4467
4467
|
var Navigation = /*#__PURE__*/Object.freeze({
|
|
4468
4468
|
__proto__: null,
|
|
4469
4469
|
AddressInformation: AddressInformation,
|
|
4470
|
-
Benefits: Benefits$
|
|
4470
|
+
Benefits: Benefits$2,
|
|
4471
4471
|
ClubMembership: ClubMembership,
|
|
4472
4472
|
Ellipsis: Ellipsis,
|
|
4473
4473
|
EllipsisHorizontal: EllipsisHorizontal,
|
|
@@ -4813,14 +4813,14 @@ function jsxs(type, props, key) {
|
|
|
4813
4813
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4814
4814
|
// `variants` styles that are consistent through all themes.
|
|
4815
4815
|
var TAGS = {
|
|
4816
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4817
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4818
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4819
|
-
display1: newStyled.h1(templateObject_4$
|
|
4820
|
-
display2: newStyled.h2(templateObject_5$
|
|
4821
|
-
display3: newStyled.h3(templateObject_6$
|
|
4822
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4823
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4816
|
+
hero1: newStyled.h1(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject([""], [""]))),
|
|
4817
|
+
hero2: newStyled.h2(templateObject_2$1D || (templateObject_2$1D = __makeTemplateObject([""], [""]))),
|
|
4818
|
+
hero3: newStyled.h3(templateObject_3$1h || (templateObject_3$1h = __makeTemplateObject([""], [""]))),
|
|
4819
|
+
display1: newStyled.h1(templateObject_4$11 || (templateObject_4$11 = __makeTemplateObject([""], [""]))),
|
|
4820
|
+
display2: newStyled.h2(templateObject_5$O || (templateObject_5$O = __makeTemplateObject([""], [""]))),
|
|
4821
|
+
display3: newStyled.h3(templateObject_6$G || (templateObject_6$G = __makeTemplateObject([""], [""]))),
|
|
4822
|
+
heading1: newStyled.h1(templateObject_7$x || (templateObject_7$x = __makeTemplateObject([""], [""]))),
|
|
4823
|
+
heading2: newStyled.h2(templateObject_8$q || (templateObject_8$q = __makeTemplateObject([""], [""]))),
|
|
4824
4824
|
heading3: newStyled.h3(templateObject_9$d || (templateObject_9$d = __makeTemplateObject([""], [""]))),
|
|
4825
4825
|
heading4: newStyled.h4(templateObject_10$c || (templateObject_10$c = __makeTemplateObject([""], [""]))),
|
|
4826
4826
|
heading5: newStyled.h5(templateObject_11$8 || (templateObject_11$8 = __makeTemplateObject([""], [""]))),
|
|
@@ -4953,17 +4953,17 @@ var DEFAULTS = {
|
|
|
4953
4953
|
size: 'regular',
|
|
4954
4954
|
},
|
|
4955
4955
|
};
|
|
4956
|
-
var templateObject_1$
|
|
4957
|
-
|
|
4958
|
-
var Container$
|
|
4959
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4960
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4961
|
-
var Label$7 = newStyled.div(templateObject_4
|
|
4962
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4963
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4956
|
+
var templateObject_1$2e, templateObject_2$1D, templateObject_3$1h, templateObject_4$11, templateObject_5$O, templateObject_6$G, templateObject_7$x, templateObject_8$q, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4957
|
+
|
|
4958
|
+
var Container$1n = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4959
|
+
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"])));
|
|
4960
|
+
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"])));
|
|
4961
|
+
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"])));
|
|
4962
|
+
var Check$1 = newStyled.div(templateObject_5$N || (templateObject_5$N = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4963
|
+
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"])));
|
|
4964
4964
|
var PackSelectorV2 = function (_a) {
|
|
4965
4965
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4966
|
-
return (jsx$1(Container$
|
|
4966
|
+
return (jsx$1(Container$1n, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4967
4967
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4968
4968
|
}) }), void 0));
|
|
4969
4969
|
};
|
|
@@ -4985,27 +4985,27 @@ var PackCard$1 = function (_a) {
|
|
|
4985
4985
|
currency: currencyCode || 'USD',
|
|
4986
4986
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4987
4987
|
};
|
|
4988
|
-
var templateObject_1$
|
|
4988
|
+
var templateObject_1$2d, templateObject_2$1C, templateObject_3$1g, templateObject_4$10, templateObject_5$N, templateObject_6$F;
|
|
4989
4989
|
|
|
4990
|
-
var Container$
|
|
4991
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4990
|
+
var Container$1m = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4991
|
+
var DropContainer = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4992
4992
|
var DropList = function (_a) {
|
|
4993
4993
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4994
|
-
return (jsx$1(Container$
|
|
4994
|
+
return (jsx$1(Container$1m, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4995
4995
|
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));
|
|
4996
4996
|
}) }, void 0));
|
|
4997
4997
|
};
|
|
4998
|
-
var templateObject_1$
|
|
4998
|
+
var templateObject_1$2c, templateObject_2$1B;
|
|
4999
4999
|
|
|
5000
5000
|
var DROPS_TOTAL = 5;
|
|
5001
|
-
var Container$
|
|
5002
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5003
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
5001
|
+
var Container$1l = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5002
|
+
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"])));
|
|
5003
|
+
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"])));
|
|
5004
5004
|
var AbsorbencyLevel = function (_a) {
|
|
5005
5005
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5006
|
-
return (jsxs$1(Container$
|
|
5006
|
+
return (jsxs$1(Container$1l, { 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));
|
|
5007
5007
|
};
|
|
5008
|
-
var templateObject_1$
|
|
5008
|
+
var templateObject_1$2b, templateObject_2$1A, templateObject_3$1f;
|
|
5009
5009
|
|
|
5010
5010
|
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(`
|
|
5011
5011
|
`),"","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(`
|
|
@@ -5081,7 +5081,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5081
5081
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5082
5082
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5083
5083
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5084
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5084
|
+
var StyledContent$1 = newStyled.button(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
5085
5085
|
var Accordion$1 = function (_a) {
|
|
5086
5086
|
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;
|
|
5087
5087
|
var theme = useTheme();
|
|
@@ -5105,9 +5105,9 @@ var Accordion$1 = function (_a) {
|
|
|
5105
5105
|
} }, { 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));
|
|
5106
5106
|
} }), void 0));
|
|
5107
5107
|
};
|
|
5108
|
-
var templateObject_1$
|
|
5108
|
+
var templateObject_1$2a;
|
|
5109
5109
|
|
|
5110
|
-
var Container$
|
|
5110
|
+
var Container$1k = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5111
5111
|
var AccordionOptions = function (_a) {
|
|
5112
5112
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5113
5113
|
var _b = useState({
|
|
@@ -5120,7 +5120,7 @@ var AccordionOptions = function (_a) {
|
|
|
5120
5120
|
}
|
|
5121
5121
|
return false;
|
|
5122
5122
|
};
|
|
5123
|
-
return (jsx$1(Container$
|
|
5123
|
+
return (jsx$1(Container$1k, { children: accordions.map(function (accordion, index) {
|
|
5124
5124
|
var forceOpenValue = getForceOpen(index);
|
|
5125
5125
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5126
5126
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5131,7 +5131,7 @@ var AccordionOptions = function (_a) {
|
|
|
5131
5131
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5132
5132
|
}) }, void 0));
|
|
5133
5133
|
};
|
|
5134
|
-
var templateObject_1$
|
|
5134
|
+
var templateObject_1$29;
|
|
5135
5135
|
|
|
5136
5136
|
/**
|
|
5137
5137
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5267,27 +5267,27 @@ var isValidDate = function (value) {
|
|
|
5267
5267
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5268
5268
|
};
|
|
5269
5269
|
|
|
5270
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5271
|
-
var FlexContainer$4 = newStyled.div(templateObject_2$
|
|
5272
|
-
var templateObject_1$
|
|
5270
|
+
var Bold = newStyled.span(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5271
|
+
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"])));
|
|
5272
|
+
var templateObject_1$28, templateObject_2$1z;
|
|
5273
5273
|
|
|
5274
|
-
var Container$
|
|
5274
|
+
var Container$1j = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
5275
5275
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5276
5276
|
return width;
|
|
5277
5277
|
}, function (_a) {
|
|
5278
5278
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5279
5279
|
return height;
|
|
5280
5280
|
});
|
|
5281
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5282
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5283
|
-
var RightSide = newStyled.div(templateObject_4
|
|
5284
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5285
|
-
var templateObject_1$
|
|
5281
|
+
var FlexCentered = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5282
|
+
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"])));
|
|
5283
|
+
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"])));
|
|
5284
|
+
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"])));
|
|
5285
|
+
var templateObject_1$27, templateObject_2$1y, templateObject_3$1e, templateObject_4$$, templateObject_5$M;
|
|
5286
5286
|
|
|
5287
5287
|
var CouponCard = function (_a) {
|
|
5288
5288
|
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;
|
|
5289
5289
|
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5290
|
-
return (jsxs$1(Container$
|
|
5290
|
+
return (jsxs$1(Container$1j, __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 () {
|
|
5291
5291
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5292
5292
|
setShowCoupon(function (prev) { return !prev; });
|
|
5293
5293
|
} }, 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: {
|
|
@@ -5435,14 +5435,14 @@ var sizeOptions = [
|
|
|
5435
5435
|
},
|
|
5436
5436
|
];
|
|
5437
5437
|
|
|
5438
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5439
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5438
|
+
var ErrorText = newStyled.h3(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
5439
|
+
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"])));
|
|
5440
5440
|
var Error$1 = function (_a) {
|
|
5441
5441
|
var error = _a.error;
|
|
5442
5442
|
var theme = useTheme();
|
|
5443
5443
|
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));
|
|
5444
5444
|
};
|
|
5445
|
-
var templateObject_1$
|
|
5445
|
+
var templateObject_1$26, templateObject_2$1x;
|
|
5446
5446
|
|
|
5447
5447
|
var BaseSelectButton = function (_a) {
|
|
5448
5448
|
var children = _a.children, as = _a.as;
|
|
@@ -5459,7 +5459,7 @@ function BaseSelectOption(_a) {
|
|
|
5459
5459
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5460
5460
|
}
|
|
5461
5461
|
|
|
5462
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5462
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5463
5463
|
function BaseSelect(_a) {
|
|
5464
5464
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5465
5465
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5469,7 +5469,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5469
5469
|
Options: BaseSelectOptions,
|
|
5470
5470
|
Option: BaseSelectOption,
|
|
5471
5471
|
});
|
|
5472
|
-
var templateObject_1$
|
|
5472
|
+
var templateObject_1$25;
|
|
5473
5473
|
|
|
5474
5474
|
var CustomButton = newStyled.button(function (_a) {
|
|
5475
5475
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5508,7 +5508,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5508
5508
|
});
|
|
5509
5509
|
});
|
|
5510
5510
|
// TODO Remove this when we find the real solution
|
|
5511
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5511
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5512
5512
|
var open = _a.open;
|
|
5513
5513
|
return open &&
|
|
5514
5514
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5528,7 +5528,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5528
5528
|
} }), void 0));
|
|
5529
5529
|
};
|
|
5530
5530
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5531
|
-
var templateObject_1$
|
|
5531
|
+
var templateObject_1$24;
|
|
5532
5532
|
|
|
5533
5533
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5534
5534
|
var theme = _a.theme;
|
|
@@ -5695,7 +5695,7 @@ var CustomCheckboxStyles = {
|
|
|
5695
5695
|
},
|
|
5696
5696
|
};
|
|
5697
5697
|
|
|
5698
|
-
var Container$
|
|
5698
|
+
var Container$1i = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
5699
5699
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5700
5700
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5701
5701
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5706,7 +5706,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5706
5706
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5707
5707
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5708
5708
|
]; });
|
|
5709
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5709
|
+
var Input$5 = newStyled.input(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
5710
5710
|
var disabled = _a.disabled;
|
|
5711
5711
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5712
5712
|
});
|
|
@@ -5720,9 +5720,9 @@ var Checkbox = function (_a) {
|
|
|
5720
5720
|
}
|
|
5721
5721
|
onChange(e.target.checked);
|
|
5722
5722
|
};
|
|
5723
|
-
return (jsxs$1(Container$
|
|
5723
|
+
return (jsxs$1(Container$1i, { 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));
|
|
5724
5724
|
};
|
|
5725
|
-
var templateObject_1$
|
|
5725
|
+
var templateObject_1$23, templateObject_2$1w;
|
|
5726
5726
|
|
|
5727
5727
|
var CustomOption = newStyled.li(function (_a) {
|
|
5728
5728
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5771,9 +5771,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5771
5771
|
Option: BaseDropdownOption,
|
|
5772
5772
|
});
|
|
5773
5773
|
|
|
5774
|
-
var Container$
|
|
5775
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5776
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5774
|
+
var Container$1h = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject([""], [""])));
|
|
5775
|
+
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"])));
|
|
5776
|
+
var SelectedOption = newStyled.span(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5777
5777
|
var fontWeight = _a.fontWeight;
|
|
5778
5778
|
return fontWeight || '';
|
|
5779
5779
|
});
|
|
@@ -5806,10 +5806,10 @@ function SimpleDropdown(_a) {
|
|
|
5806
5806
|
}
|
|
5807
5807
|
setSelectedValue(value);
|
|
5808
5808
|
}, [value, options, initialValue]);
|
|
5809
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5809
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1h : Fragment$1;
|
|
5810
5810
|
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));
|
|
5811
5811
|
}
|
|
5812
|
-
var templateObject_1$
|
|
5812
|
+
var templateObject_1$22, templateObject_2$1v, templateObject_3$1d;
|
|
5813
5813
|
|
|
5814
5814
|
/* base styles & size variants */
|
|
5815
5815
|
var CustomRadioStyles$2 = {
|
|
@@ -5874,9 +5874,9 @@ var ContainerStyles$2 = {
|
|
|
5874
5874
|
},
|
|
5875
5875
|
};
|
|
5876
5876
|
|
|
5877
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5878
|
-
var Container$
|
|
5879
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5877
|
+
var Wrapper$7 = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5878
|
+
var Container$1g = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5879
|
+
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) {
|
|
5880
5880
|
var disabled = _a.disabled;
|
|
5881
5881
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5882
5882
|
});
|
|
@@ -5884,14 +5884,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5884
5884
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5885
5885
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5886
5886
|
]; });
|
|
5887
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5887
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$1c || (templateObject_3$1c = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5888
5888
|
var theme = _a.theme;
|
|
5889
5889
|
return theme.component.radio.textSize;
|
|
5890
5890
|
}, function (_a) {
|
|
5891
5891
|
var theme = _a.theme;
|
|
5892
5892
|
return theme.component.radio.lineHeight;
|
|
5893
5893
|
});
|
|
5894
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5894
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$_ || (templateObject_4$_ = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"])), function (_a) {
|
|
5895
5895
|
var theme = _a.theme;
|
|
5896
5896
|
return theme.component.radio.textSize;
|
|
5897
5897
|
}, function (_a) {
|
|
@@ -5908,9 +5908,9 @@ var RadioInput = function (_a) {
|
|
|
5908
5908
|
var value = event.currentTarget.value;
|
|
5909
5909
|
onChange({ value: value, label: label });
|
|
5910
5910
|
};
|
|
5911
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5911
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$1g, __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));
|
|
5912
5912
|
};
|
|
5913
|
-
var templateObject_1$
|
|
5913
|
+
var templateObject_1$21, templateObject_2$1u, templateObject_3$1c, templateObject_4$_;
|
|
5914
5914
|
|
|
5915
5915
|
var useOnClickOutside = function (ref, handler) {
|
|
5916
5916
|
useEffect(function () {
|
|
@@ -6003,7 +6003,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6003
6003
|
}
|
|
6004
6004
|
};
|
|
6005
6005
|
|
|
6006
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
6006
|
+
var Wrapper$6 = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
6007
6007
|
var position = _a.position;
|
|
6008
6008
|
return getWrapperFlexDirection(position);
|
|
6009
6009
|
}, function (_a) {
|
|
@@ -6013,7 +6013,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __ma
|
|
|
6013
6013
|
var disableHover = _a.disableHover;
|
|
6014
6014
|
return (disableHover ? 0 : 1);
|
|
6015
6015
|
});
|
|
6016
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6016
|
+
var TooltipContainer = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
6017
6017
|
var position = _a.position;
|
|
6018
6018
|
return getContainerFlexDirection(position);
|
|
6019
6019
|
}, function (_a) {
|
|
@@ -6041,14 +6041,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1s || (templateObject_2$1s
|
|
|
6041
6041
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6042
6042
|
return actual === expected ? margin : '0';
|
|
6043
6043
|
};
|
|
6044
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
6044
|
+
var ContentWrapper = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
6045
6045
|
var borderColor = _a.borderColor;
|
|
6046
6046
|
return borderColor;
|
|
6047
6047
|
}, function (_a) {
|
|
6048
6048
|
var backgroundColor = _a.backgroundColor;
|
|
6049
6049
|
return backgroundColor;
|
|
6050
6050
|
});
|
|
6051
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
6051
|
+
var TooltipText = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
|
|
6052
6052
|
var theme = _a.theme;
|
|
6053
6053
|
return theme.component.autoship.tooltip.text.alignment;
|
|
6054
6054
|
}, function (_a) {
|
|
@@ -6058,17 +6058,17 @@ var TooltipText = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __ma
|
|
|
6058
6058
|
var color = _a.color;
|
|
6059
6059
|
return color;
|
|
6060
6060
|
});
|
|
6061
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
6062
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
6061
|
+
var TopSection = newStyled.div(templateObject_5$L || (templateObject_5$L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
6062
|
+
var Title$a = newStyled.h1(templateObject_6$E || (templateObject_6$E = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
6063
6063
|
var color = _a.color;
|
|
6064
6064
|
return color;
|
|
6065
6065
|
});
|
|
6066
|
-
var IconContainer$6 = newStyled.div(templateObject_7$
|
|
6067
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
6066
|
+
var IconContainer$6 = newStyled.div(templateObject_7$w || (templateObject_7$w = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
6067
|
+
var CloseToolTip = newStyled.button(templateObject_8$p || (templateObject_8$p = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
6068
6068
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6069
6069
|
return right;
|
|
6070
6070
|
});
|
|
6071
|
-
var templateObject_1$
|
|
6071
|
+
var templateObject_1$20, templateObject_2$1t, templateObject_3$1b, templateObject_4$Z, templateObject_5$L, templateObject_6$E, templateObject_7$w, templateObject_8$p;
|
|
6072
6072
|
|
|
6073
6073
|
var Tooltip = function (_a) {
|
|
6074
6074
|
var _b;
|
|
@@ -6111,8 +6111,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
6111
6111
|
};
|
|
6112
6112
|
};
|
|
6113
6113
|
|
|
6114
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6115
|
-
var ContainerBase$
|
|
6114
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6115
|
+
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) {
|
|
6116
6116
|
var selected = _a.selected, theme = _a.theme;
|
|
6117
6117
|
return selected
|
|
6118
6118
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6126,21 +6126,21 @@ var ContainerBase$3 = newStyled.div(templateObject_2$1r || (templateObject_2$1r
|
|
|
6126
6126
|
var theme = _a.theme;
|
|
6127
6127
|
return theme.colors.pallete.primary.color;
|
|
6128
6128
|
});
|
|
6129
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$
|
|
6129
|
+
var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
6130
6130
|
var onClick = _a.onClick;
|
|
6131
6131
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6132
6132
|
});
|
|
6133
|
-
var SubscriptionContainer$
|
|
6134
|
-
var SubscriptionHeader$
|
|
6133
|
+
var SubscriptionContainer$4 = newStyled(ContainerBase$4)(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6134
|
+
var SubscriptionHeader$4 = newStyled.div(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6135
6135
|
var theme = _a.theme;
|
|
6136
6136
|
return theme.colors.shades[200].color;
|
|
6137
6137
|
}, function (_a) {
|
|
6138
6138
|
var theme = _a.theme;
|
|
6139
6139
|
return theme.colors.pallete.primary.color;
|
|
6140
6140
|
});
|
|
6141
|
-
var BenefitsContainer$3 = newStyled.div(templateObject_6$
|
|
6142
|
-
var Benefit$4 = newStyled.div(templateObject_7$
|
|
6143
|
-
var BenefitText$3 = newStyled(Text$7)(templateObject_8$
|
|
6141
|
+
var BenefitsContainer$3 = newStyled.div(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6142
|
+
var Benefit$4 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
6143
|
+
var BenefitText$3 = newStyled(Text$7)(templateObject_8$o || (templateObject_8$o = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6144
6144
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$c || (templateObject_9$c = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
6145
6145
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
6146
6146
|
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$7 || (templateObject_11$7 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
@@ -6148,8 +6148,8 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6148
6148
|
var selected = _a.selected, theme = _a.theme;
|
|
6149
6149
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6150
6150
|
});
|
|
6151
|
-
var Container$
|
|
6152
|
-
var templateObject_1$
|
|
6151
|
+
var Container$1f = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6152
|
+
var templateObject_1$1$, templateObject_2$1s, templateObject_3$1a, templateObject_4$Y, templateObject_5$K, templateObject_6$D, templateObject_7$v, templateObject_8$o, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6153
6153
|
|
|
6154
6154
|
var radioIds$2 = {
|
|
6155
6155
|
oneTime: {
|
|
@@ -6199,17 +6199,17 @@ var Autoship = function (_a) {
|
|
|
6199
6199
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6200
6200
|
};
|
|
6201
6201
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6202
|
-
return (jsxs$1(Container$
|
|
6202
|
+
return (jsxs$1(Container$1f, __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
|
|
6203
6203
|
? benefitsColor.selected
|
|
6204
6204
|
: 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));
|
|
6205
6205
|
};
|
|
6206
6206
|
|
|
6207
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6207
|
+
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) {
|
|
6208
6208
|
var theme = _a.theme;
|
|
6209
6209
|
return theme.name === 'TheSpaDr' &&
|
|
6210
6210
|
"\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 ";
|
|
6211
6211
|
});
|
|
6212
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
6212
|
+
var DiscountTag$2 = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
6213
6213
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6214
6214
|
return isSelected
|
|
6215
6215
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6225,7 +6225,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6225
6225
|
}
|
|
6226
6226
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6227
6227
|
};
|
|
6228
|
-
var ContainerBase$
|
|
6228
|
+
var ContainerBase$3 = newStyled.div(templateObject_3$19 || (templateObject_3$19 = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6229
6229
|
var selected = _a.selected, theme = _a.theme;
|
|
6230
6230
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6231
6231
|
}, function (_a) {
|
|
@@ -6237,32 +6237,32 @@ var ContainerBase$2 = newStyled.div(templateObject_3$18 || (templateObject_3$18
|
|
|
6237
6237
|
var theme = _a.theme;
|
|
6238
6238
|
return theme.colors.pallete.primary.color;
|
|
6239
6239
|
});
|
|
6240
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$
|
|
6240
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$3)(templateObject_4$X || (templateObject_4$X = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
6241
6241
|
var onClick = _a.onClick;
|
|
6242
6242
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6243
6243
|
});
|
|
6244
|
-
var SubscriptionContainer$
|
|
6245
|
-
var SubscriptionHeader$
|
|
6244
|
+
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_5$J || (templateObject_5$J = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6245
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_6$C || (templateObject_6$C = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6246
6246
|
var theme = _a.theme;
|
|
6247
6247
|
return theme.colors.shades[200].color;
|
|
6248
6248
|
}, function (_a) {
|
|
6249
6249
|
var theme = _a.theme;
|
|
6250
6250
|
return theme.colors.pallete.primary.color;
|
|
6251
6251
|
});
|
|
6252
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_7$
|
|
6253
|
-
var Benefit$3 = newStyled.div(templateObject_8$
|
|
6252
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_7$u || (templateObject_7$u = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6253
|
+
var Benefit$3 = newStyled.div(templateObject_8$n || (templateObject_8$n = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6254
6254
|
var BenefitText$2 = newStyled(Text$7)(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6255
6255
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$a || (templateObject_10$a = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
6256
6256
|
var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
6257
6257
|
var selected = _a.selected, theme = _a.theme;
|
|
6258
6258
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6259
6259
|
});
|
|
6260
|
-
var Container$
|
|
6260
|
+
var Container$1e = newStyled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6261
6261
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6262
6262
|
var theme = _a.theme;
|
|
6263
6263
|
return theme.component.autoship.tooltip.margin;
|
|
6264
6264
|
});
|
|
6265
|
-
var templateObject_1$
|
|
6265
|
+
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;
|
|
6266
6266
|
|
|
6267
6267
|
var radioIds$1 = {
|
|
6268
6268
|
oneTime: {
|
|
@@ -6322,7 +6322,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6322
6322
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6323
6323
|
};
|
|
6324
6324
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6325
|
-
return (jsxs$1(Container$
|
|
6325
|
+
return (jsxs$1(Container$1e, __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
|
|
6326
6326
|
? benefitsColor.selected
|
|
6327
6327
|
: 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));
|
|
6328
6328
|
};
|
|
@@ -6341,13 +6341,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6341
6341
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6342
6342
|
_a$2);
|
|
6343
6343
|
|
|
6344
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6345
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6346
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6347
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6348
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6349
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6350
|
-
var templateObject_1$
|
|
6344
|
+
var CustomerDetails = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject([""], [""])));
|
|
6345
|
+
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"])));
|
|
6346
|
+
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"])));
|
|
6347
|
+
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"])));
|
|
6348
|
+
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"])));
|
|
6349
|
+
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"])));
|
|
6350
|
+
var templateObject_1$1Z, templateObject_2$1q, templateObject_3$18, templateObject_4$W, templateObject_5$I, templateObject_6$B;
|
|
6351
6351
|
|
|
6352
6352
|
var NameWithStars = function (_a) {
|
|
6353
6353
|
var name = _a.name, size = _a.size;
|
|
@@ -6365,10 +6365,10 @@ var ResultFeedback = function (_a) {
|
|
|
6365
6365
|
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));
|
|
6366
6366
|
};
|
|
6367
6367
|
|
|
6368
|
-
var Container$
|
|
6369
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6370
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6371
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6368
|
+
var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
6369
|
+
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"])));
|
|
6370
|
+
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; });
|
|
6371
|
+
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) {
|
|
6372
6372
|
var theme = _a.theme;
|
|
6373
6373
|
return theme.colors.pallete.secondary.color;
|
|
6374
6374
|
}, function (_a) {
|
|
@@ -6378,7 +6378,7 @@ var UserInfoText = newStyled.div(templateObject_4$U || (templateObject_4$U = __m
|
|
|
6378
6378
|
var theme = _a.theme, size = _a.size;
|
|
6379
6379
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6380
6380
|
});
|
|
6381
|
-
var templateObject_1$
|
|
6381
|
+
var templateObject_1$1Y, templateObject_2$1p, templateObject_3$17, templateObject_4$V;
|
|
6382
6382
|
|
|
6383
6383
|
/* base styles & size variants */
|
|
6384
6384
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6453,10 +6453,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6453
6453
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6454
6454
|
var infoText = buildInfoText(name, age, months);
|
|
6455
6455
|
var Component = componentByVariant[variant];
|
|
6456
|
-
return (jsxs$1(Container$
|
|
6456
|
+
return (jsxs$1(Container$1d, __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));
|
|
6457
6457
|
};
|
|
6458
6458
|
|
|
6459
|
-
var Section = newStyled.div(templateObject_1$
|
|
6459
|
+
var Section = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
6460
6460
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6461
6461
|
});
|
|
6462
6462
|
var CardHeader = function (_a) {
|
|
@@ -6467,16 +6467,16 @@ var CardFooter = function (_a) {
|
|
|
6467
6467
|
var children = _a.children;
|
|
6468
6468
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6469
6469
|
};
|
|
6470
|
-
var templateObject_1$
|
|
6470
|
+
var templateObject_1$1X;
|
|
6471
6471
|
|
|
6472
|
-
var Body$1 = newStyled.div(templateObject_1$
|
|
6472
|
+
var Body$1 = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
6473
6473
|
var CardBody$1 = function (_a) {
|
|
6474
6474
|
var children = _a.children;
|
|
6475
6475
|
return jsx$1(Body$1, { children: children }, void 0);
|
|
6476
6476
|
};
|
|
6477
|
-
var templateObject_1$
|
|
6477
|
+
var templateObject_1$1W;
|
|
6478
6478
|
|
|
6479
|
-
var Container$
|
|
6479
|
+
var Container$1c = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
6480
6480
|
var flex = _a.flex;
|
|
6481
6481
|
return flex &&
|
|
6482
6482
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6491,23 +6491,23 @@ var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = _
|
|
|
6491
6491
|
var Card$2 = function (_a) {
|
|
6492
6492
|
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;
|
|
6493
6493
|
var theme = useTheme();
|
|
6494
|
-
return (jsx$1(Container$
|
|
6494
|
+
return (jsx$1(Container$1c, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6495
6495
|
};
|
|
6496
6496
|
var Card$3 = Object.assign(Card$2, {
|
|
6497
6497
|
Header: CardHeader,
|
|
6498
6498
|
Footer: CardFooter,
|
|
6499
6499
|
Body: CardBody$1,
|
|
6500
6500
|
});
|
|
6501
|
-
var templateObject_1$
|
|
6501
|
+
var templateObject_1$1V;
|
|
6502
6502
|
|
|
6503
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6504
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6505
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6503
|
+
var StyledWrapper = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
6504
|
+
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"])));
|
|
6505
|
+
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) {
|
|
6506
6506
|
var color = _a.color;
|
|
6507
6507
|
return color;
|
|
6508
6508
|
});
|
|
6509
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6510
|
-
var templateObject_1$
|
|
6509
|
+
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"])));
|
|
6510
|
+
var templateObject_1$1U, templateObject_2$1o, templateObject_3$16, templateObject_4$U;
|
|
6511
6511
|
|
|
6512
6512
|
var Minimalistic = function (_a) {
|
|
6513
6513
|
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;
|
|
@@ -6515,28 +6515,28 @@ var Minimalistic = function (_a) {
|
|
|
6515
6515
|
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));
|
|
6516
6516
|
};
|
|
6517
6517
|
|
|
6518
|
-
var Container$
|
|
6519
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6520
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6521
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6518
|
+
var Container$1b = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6519
|
+
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; });
|
|
6520
|
+
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; });
|
|
6521
|
+
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"])));
|
|
6522
6522
|
var Simple = function (_a) {
|
|
6523
6523
|
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;
|
|
6524
6524
|
var theme = useTheme();
|
|
6525
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
6525
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$1b, { 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));
|
|
6526
6526
|
};
|
|
6527
|
-
var templateObject_1$
|
|
6527
|
+
var templateObject_1$1T, templateObject_2$1n, templateObject_3$15, templateObject_4$T;
|
|
6528
6528
|
|
|
6529
6529
|
var Bundle = {
|
|
6530
6530
|
Minimalistic: Minimalistic,
|
|
6531
6531
|
Simple: Simple,
|
|
6532
6532
|
};
|
|
6533
6533
|
|
|
6534
|
-
var Container$
|
|
6534
|
+
var Container$1a = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
6535
6535
|
var displayBNPL = _a.displayBNPL;
|
|
6536
6536
|
return (displayBNPL ? 'flex' : 'none');
|
|
6537
6537
|
});
|
|
6538
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6539
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6538
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"])));
|
|
6539
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6540
6540
|
var BuyNowPayLater = function (_a) {
|
|
6541
6541
|
var _b;
|
|
6542
6542
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize, _f = _a.bnplWithAfterPay, bnplWithAfterPay = _f === void 0 ? false : _f, textTemplate = _a.textTemplate;
|
|
@@ -6556,48 +6556,48 @@ var BuyNowPayLater = function (_a) {
|
|
|
6556
6556
|
else {
|
|
6557
6557
|
dynamicText = "or 4 interest-free payments of ";
|
|
6558
6558
|
}
|
|
6559
|
-
return (jsx$1(Container$
|
|
6559
|
+
return (jsx$1(Container$1a, __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: {
|
|
6560
6560
|
display: 'inline',
|
|
6561
6561
|
fontSize: fontSize,
|
|
6562
6562
|
paddingLeft: '0.25rem',
|
|
6563
6563
|
paddingRight: '0.25rem',
|
|
6564
6564
|
}, 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));
|
|
6565
6565
|
};
|
|
6566
|
-
var templateObject_1$
|
|
6566
|
+
var templateObject_1$1S, templateObject_2$1m, templateObject_3$14;
|
|
6567
6567
|
|
|
6568
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6568
|
+
var Text$6 = newStyled.span(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6569
6569
|
var Title$8 = function (_a) {
|
|
6570
6570
|
var title = _a.title;
|
|
6571
6571
|
var theme = useTheme();
|
|
6572
6572
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6573
6573
|
};
|
|
6574
|
-
var templateObject_1$
|
|
6574
|
+
var templateObject_1$1R;
|
|
6575
6575
|
|
|
6576
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6576
|
+
var P$4 = newStyled.p(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6577
6577
|
var Promo = function (_a) {
|
|
6578
6578
|
var text = _a.text;
|
|
6579
6579
|
var theme = useTheme();
|
|
6580
6580
|
return (jsx$1(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6581
6581
|
};
|
|
6582
|
-
var templateObject_1$
|
|
6582
|
+
var templateObject_1$1Q;
|
|
6583
6583
|
|
|
6584
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6584
|
+
var Text$5 = newStyled.span(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6585
6585
|
var Description$1 = function (_a) {
|
|
6586
6586
|
var text = _a.text;
|
|
6587
6587
|
var theme = useTheme();
|
|
6588
6588
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6589
6589
|
};
|
|
6590
|
-
var templateObject_1$
|
|
6590
|
+
var templateObject_1$1P;
|
|
6591
6591
|
|
|
6592
|
-
var Container$
|
|
6592
|
+
var Container$19 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6593
6593
|
var CloseButton$1 = function (_a) {
|
|
6594
6594
|
var onClick = _a.onClick, size = _a.size;
|
|
6595
6595
|
var theme = useTheme();
|
|
6596
|
-
return (jsx$1(Container$
|
|
6596
|
+
return (jsx$1(Container$19, __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));
|
|
6597
6597
|
};
|
|
6598
|
-
var templateObject_1$
|
|
6598
|
+
var templateObject_1$1O;
|
|
6599
6599
|
|
|
6600
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6600
|
+
var Text$4 = newStyled.h3(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
6601
6601
|
var backgroundColor = _a.backgroundColor;
|
|
6602
6602
|
return backgroundColor;
|
|
6603
6603
|
}, function (_a) {
|
|
@@ -6612,7 +6612,7 @@ var OfferBanner = function (_a) {
|
|
|
6612
6612
|
var theme = useTheme();
|
|
6613
6613
|
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));
|
|
6614
6614
|
};
|
|
6615
|
-
var templateObject_1$
|
|
6615
|
+
var templateObject_1$1N;
|
|
6616
6616
|
|
|
6617
6617
|
var CartProductItem = {
|
|
6618
6618
|
Title: Title$8,
|
|
@@ -6622,20 +6622,20 @@ var CartProductItem = {
|
|
|
6622
6622
|
CloseButton: CloseButton$1,
|
|
6623
6623
|
};
|
|
6624
6624
|
|
|
6625
|
-
var Container$
|
|
6626
|
-
var MobileContainer = newStyled(Container$
|
|
6627
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6628
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6629
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6630
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6631
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6632
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6625
|
+
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"])));
|
|
6626
|
+
var MobileContainer = newStyled(Container$18)(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6627
|
+
var DollarPart = newStyled.span(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6628
|
+
var ClubMembersText = newStyled.span(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6629
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$H || (templateObject_5$H = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6630
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$A || (templateObject_6$A = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6631
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$t || (templateObject_7$t = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6632
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$m || (templateObject_8$m = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6633
6633
|
var ClubPriceLabel = function (_a) {
|
|
6634
6634
|
var clubPrice = _a.clubPrice;
|
|
6635
6635
|
var isMobile = useWindowDimensions().isMobile;
|
|
6636
|
-
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$
|
|
6636
|
+
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$18, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6637
6637
|
};
|
|
6638
|
-
var templateObject_1$
|
|
6638
|
+
var templateObject_1$1M, templateObject_2$1l, templateObject_3$13, templateObject_4$S, templateObject_5$H, templateObject_6$A, templateObject_7$t, templateObject_8$m;
|
|
6639
6639
|
|
|
6640
6640
|
var Spacing = function (_a) {
|
|
6641
6641
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6643,10 +6643,10 @@ var Spacing = function (_a) {
|
|
|
6643
6643
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6644
6644
|
};
|
|
6645
6645
|
|
|
6646
|
-
var Container$
|
|
6647
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6648
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6649
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6646
|
+
var Container$17 = newStyled('div')(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6647
|
+
var Content$2 = newStyled('div')(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6648
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6649
|
+
var Bar$2 = newStyled('div')(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6650
6650
|
var index = _a.index;
|
|
6651
6651
|
return "".concat(6 + 3 * index, "px");
|
|
6652
6652
|
}, function (_a) {
|
|
@@ -6655,12 +6655,12 @@ var Bar$2 = newStyled('div')(templateObject_4$Q || (templateObject_4$Q = __makeT
|
|
|
6655
6655
|
});
|
|
6656
6656
|
var StrengthBars = function (_a) {
|
|
6657
6657
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6658
|
-
return (jsxs$1(Container$
|
|
6658
|
+
return (jsxs$1(Container$17, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6659
6659
|
};
|
|
6660
|
-
var templateObject_1$
|
|
6660
|
+
var templateObject_1$1L, templateObject_2$1k, templateObject_3$12, templateObject_4$R;
|
|
6661
6661
|
|
|
6662
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6663
|
-
var templateObject_1$
|
|
6662
|
+
var Benefit$2 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
6663
|
+
var templateObject_1$1K;
|
|
6664
6664
|
|
|
6665
6665
|
var style = ".benefit{font-size:14px;line-height:22px;display:inline-block;margin:0;@media screen and (max-width:768px){font-size:12px;line-height:16px;}}";
|
|
6666
6666
|
|
|
@@ -6682,10 +6682,10 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6682
6682
|
|
|
6683
6683
|
var STARTS_NUMBER = 5;
|
|
6684
6684
|
|
|
6685
|
-
var Container$
|
|
6686
|
-
var templateObject_1$
|
|
6685
|
+
var Container$16 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6686
|
+
var templateObject_1$1J;
|
|
6687
6687
|
|
|
6688
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6688
|
+
var StarContainer = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6689
6689
|
var marginRight = _a.marginRight;
|
|
6690
6690
|
return marginRight;
|
|
6691
6691
|
});
|
|
@@ -6697,11 +6697,11 @@ var StarList = function (_a) {
|
|
|
6697
6697
|
width: theme.component.stars.element[size].width,
|
|
6698
6698
|
height: theme.component.stars.element[size].height,
|
|
6699
6699
|
};
|
|
6700
|
-
return (jsx$1(Container$
|
|
6700
|
+
return (jsx$1(Container$16, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6701
6701
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6702
6702
|
}) }, void 0));
|
|
6703
6703
|
};
|
|
6704
|
-
var templateObject_1$
|
|
6704
|
+
var templateObject_1$1I;
|
|
6705
6705
|
|
|
6706
6706
|
/* base styles & size variants */
|
|
6707
6707
|
var LabelStyles = {
|
|
@@ -6749,7 +6749,7 @@ var LabelStyles = {
|
|
|
6749
6749
|
});
|
|
6750
6750
|
},
|
|
6751
6751
|
};
|
|
6752
|
-
var Container$
|
|
6752
|
+
var Container$15 = newStyled.a(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6753
6753
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6754
6754
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6755
6755
|
return [
|
|
@@ -6768,8 +6768,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6768
6768
|
}),
|
|
6769
6769
|
];
|
|
6770
6770
|
});
|
|
6771
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6772
|
-
var templateObject_1$
|
|
6771
|
+
var RatingLabel = newStyled.span(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6772
|
+
var templateObject_1$1H, templateObject_2$1j;
|
|
6773
6773
|
|
|
6774
6774
|
var Rating = function (_a) {
|
|
6775
6775
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6790,19 +6790,19 @@ var Rating = function (_a) {
|
|
|
6790
6790
|
href: reviewsContainerId,
|
|
6791
6791
|
}
|
|
6792
6792
|
: {};
|
|
6793
|
-
return (jsxs$1(Container$
|
|
6793
|
+
return (jsxs$1(Container$15, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6794
6794
|
};
|
|
6795
6795
|
|
|
6796
|
-
var ImageWrapper$4 = newStyled.div(templateObject_1$
|
|
6796
|
+
var ImageWrapper$4 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n"], ["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n"])), function (_a) {
|
|
6797
6797
|
var width = _a.width;
|
|
6798
6798
|
return width;
|
|
6799
6799
|
});
|
|
6800
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6801
|
-
var RatingText = newStyled.span(templateObject_3$
|
|
6800
|
+
var RatingWrapper = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"], ["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"])));
|
|
6801
|
+
var RatingText = newStyled.span(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"], ["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"])), function (_a) {
|
|
6802
6802
|
var fontSize = _a.fontSize;
|
|
6803
6803
|
return fontSize;
|
|
6804
6804
|
});
|
|
6805
|
-
var templateObject_1$
|
|
6805
|
+
var templateObject_1$1G, templateObject_2$1i, templateObject_3$11;
|
|
6806
6806
|
|
|
6807
6807
|
var OfferAtCartImage = function (_a) {
|
|
6808
6808
|
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width;
|
|
@@ -6849,9 +6849,9 @@ var getDropdownOptions = function (frequency) {
|
|
|
6849
6849
|
}); });
|
|
6850
6850
|
};
|
|
6851
6851
|
|
|
6852
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
6853
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_2$
|
|
6854
|
-
var templateObject_1$
|
|
6852
|
+
var Benefit$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6853
|
+
var BenefitText$1 = newStyled(Text$7)(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6854
|
+
var templateObject_1$1F, templateObject_2$1h;
|
|
6855
6855
|
|
|
6856
6856
|
var BenefitsList = function (_a) {
|
|
6857
6857
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6862,23 +6862,23 @@ var BenefitsList = function (_a) {
|
|
|
6862
6862
|
}) }, void 0));
|
|
6863
6863
|
};
|
|
6864
6864
|
|
|
6865
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6865
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6866
6866
|
var timerColor = _a.timerColor;
|
|
6867
6867
|
return timerColor || '';
|
|
6868
6868
|
});
|
|
6869
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
6869
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"], ["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"])), function (_a) {
|
|
6870
6870
|
var timerColor = _a.timerColor;
|
|
6871
6871
|
return timerColor || '';
|
|
6872
6872
|
});
|
|
6873
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3
|
|
6873
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
6874
6874
|
var theme = _a.theme;
|
|
6875
6875
|
return theme.colors.shades.white.color;
|
|
6876
6876
|
}, function (_a) {
|
|
6877
6877
|
var theme = _a.theme;
|
|
6878
6878
|
return theme.colors.shades.white.color;
|
|
6879
6879
|
});
|
|
6880
|
-
var Unit = newStyled.p(templateObject_4$
|
|
6881
|
-
var templateObject_1$
|
|
6880
|
+
var Unit = newStyled.p(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"], ["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"])));
|
|
6881
|
+
var templateObject_1$1E, templateObject_2$1g, templateObject_3$10, templateObject_4$Q;
|
|
6882
6882
|
|
|
6883
6883
|
var HRS = 'HRS';
|
|
6884
6884
|
var MIN = 'MIN';
|
|
@@ -6919,7 +6919,7 @@ var Timer = function (_a) {
|
|
|
6919
6919
|
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
6920
6920
|
};
|
|
6921
6921
|
|
|
6922
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
6922
|
+
var TimerContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
6923
6923
|
var textPosition = _a.textPosition;
|
|
6924
6924
|
return textPosition;
|
|
6925
6925
|
}, function (_a) {
|
|
@@ -6932,7 +6932,7 @@ var TimerContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C =
|
|
|
6932
6932
|
var borderRadius = _a.borderRadius;
|
|
6933
6933
|
return borderRadius || '8px';
|
|
6934
6934
|
});
|
|
6935
|
-
var templateObject_1$
|
|
6935
|
+
var templateObject_1$1D;
|
|
6936
6936
|
|
|
6937
6937
|
var getDefaultCountdown = function () {
|
|
6938
6938
|
var tomorrowDate = new Date();
|
|
@@ -6948,7 +6948,7 @@ var HurryUp = function (_a) {
|
|
|
6948
6948
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
6949
6949
|
};
|
|
6950
6950
|
|
|
6951
|
-
var Container$
|
|
6951
|
+
var Container$14 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
6952
6952
|
var size = _a.size;
|
|
6953
6953
|
return (size ? size : '100%');
|
|
6954
6954
|
}, function (_a) {
|
|
@@ -6963,7 +6963,7 @@ var borderSize = {
|
|
|
6963
6963
|
large: '3px',
|
|
6964
6964
|
};
|
|
6965
6965
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
6966
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
6966
|
+
var StyledSpinner = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
6967
6967
|
var size = _a.size;
|
|
6968
6968
|
return borderSize[size];
|
|
6969
6969
|
}, function (_a) {
|
|
@@ -6976,29 +6976,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1e || (templateObject_2$1e =
|
|
|
6976
6976
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
6977
6977
|
return duration;
|
|
6978
6978
|
});
|
|
6979
|
-
var templateObject_1$
|
|
6979
|
+
var templateObject_1$1C, templateObject_2$1f;
|
|
6980
6980
|
|
|
6981
6981
|
var Spinner = function (_a) {
|
|
6982
6982
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
6983
|
-
return (jsx$1(Container$
|
|
6983
|
+
return (jsx$1(Container$14, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
6984
6984
|
};
|
|
6985
6985
|
|
|
6986
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
6987
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
6988
|
-
var templateObject_1$
|
|
6986
|
+
var ProgressContainer = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
6987
|
+
var ProgressFiller = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
6988
|
+
var templateObject_1$1B, templateObject_2$1e;
|
|
6989
6989
|
|
|
6990
6990
|
var ProgressBar$1 = function (_a) {
|
|
6991
6991
|
var progress = _a.progress, hide = _a.hide;
|
|
6992
6992
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
6993
6993
|
};
|
|
6994
6994
|
|
|
6995
|
-
var Container$
|
|
6996
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
6997
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3
|
|
6998
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
6999
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
7000
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
7001
|
-
var templateObject_1$
|
|
6995
|
+
var Container$13 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
6996
|
+
var HTMLVideo = newStyled.video(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
6997
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
6998
|
+
var PlayContainer = newStyled.div(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
6999
|
+
var PauseContainer = newStyled.div(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
7000
|
+
var MuteButton = newStyled.button(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
7001
|
+
var templateObject_1$1A, templateObject_2$1d, templateObject_3$$, templateObject_4$P, templateObject_5$G, templateObject_6$z;
|
|
7002
7002
|
|
|
7003
7003
|
var Video$1 = function (_a) {
|
|
7004
7004
|
var _b, _c, _d, _e;
|
|
@@ -7048,14 +7048,14 @@ var Video$1 = function (_a) {
|
|
|
7048
7048
|
setVideoProgress(videoRef.current.currentTime);
|
|
7049
7049
|
}
|
|
7050
7050
|
};
|
|
7051
|
-
return (jsxs$1(Container$
|
|
7051
|
+
return (jsxs$1(Container$13, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
7052
7052
|
};
|
|
7053
7053
|
|
|
7054
|
-
var LikeCount = newStyled.span(templateObject_1$
|
|
7054
|
+
var LikeCount = newStyled.span(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"])), function (_a) {
|
|
7055
7055
|
var theme = _a.theme;
|
|
7056
7056
|
return theme.colors.shades.black.color;
|
|
7057
7057
|
});
|
|
7058
|
-
var LikeBtnContainer = newStyled.button(templateObject_2$
|
|
7058
|
+
var LikeBtnContainer = newStyled.button(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n position: ", ";\n top: ", ";\n right: ", ";\n z-index: ", ";\n padding: ", ";\n box-sizing: ", ";\n background-color: transparent;\n border: none;\n"], ["\n position: ", ";\n top: ", ";\n right: ", ";\n z-index: ", ";\n padding: ", ";\n box-sizing: ", ";\n background-color: transparent;\n border: none;\n"])), function (_a) {
|
|
7059
7059
|
var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
|
|
7060
7060
|
return position;
|
|
7061
7061
|
}, function (_a) {
|
|
@@ -7074,7 +7074,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1b || (templateObject_2
|
|
|
7074
7074
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
7075
7075
|
return boxSizing;
|
|
7076
7076
|
});
|
|
7077
|
-
var templateObject_1$
|
|
7077
|
+
var templateObject_1$1z, templateObject_2$1c;
|
|
7078
7078
|
|
|
7079
7079
|
var getStylesBySize$c = function (size) {
|
|
7080
7080
|
switch (size) {
|
|
@@ -7095,7 +7095,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7095
7095
|
};
|
|
7096
7096
|
}
|
|
7097
7097
|
};
|
|
7098
|
-
var Container$
|
|
7098
|
+
var Container$12 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
7099
7099
|
var backgroundColor = _a.backgroundColor;
|
|
7100
7100
|
return backgroundColor;
|
|
7101
7101
|
}, function (_a) {
|
|
@@ -7136,9 +7136,9 @@ var IconButton = function (_a) {
|
|
|
7136
7136
|
var _b, _c;
|
|
7137
7137
|
var children = _a.children, disabled = _a.disabled, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, onClick = _a.onClick, backgroundColor = _a.backgroundColor, _e = _a.dataTestId, dataTestId = _e === void 0 ? 'Container' : _e, _f = _a.hasText, hasText = _f === void 0 ? false : _f, boxShadow = _a.boxShadow, _g = _a.rounded, rounded = _g === void 0 ? true : _g, width = _a.width, border = _a.border;
|
|
7138
7138
|
var theme = useTheme();
|
|
7139
|
-
return (jsx$1(Container$
|
|
7139
|
+
return (jsx$1(Container$12, __assign$1({ border: border, width: width, className: disabled ? 'disabled' : '', backgroundColor: (_b = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.active) !== null && _b !== void 0 ? _b : theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: (_c = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.hover) !== null && _c !== void 0 ? _c : theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": dataTestId, onClick: disabled ? function () { } : onClick, hasText: hasText, boxShadow: boxShadow, rounded: rounded }, { children: children }), void 0));
|
|
7140
7140
|
};
|
|
7141
|
-
var templateObject_1$
|
|
7141
|
+
var templateObject_1$1y;
|
|
7142
7142
|
|
|
7143
7143
|
var LikeButton = function (_a) {
|
|
7144
7144
|
var _b;
|
|
@@ -7151,11 +7151,11 @@ var LikeButton = function (_a) {
|
|
|
7151
7151
|
return (jsx$1(LikeBtnContainer, __assign$1({ className: className }, containerProps, { children: jsxs$1(IconButton, __assign$1({ onClick: onClick, backgroundColor: background, hasText: !!likes, boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)" }, { children: [jsx$1(Icon$1, { name: isLiked ? 'actions/like_solid' : 'actions/like', fill: isLiked ? iconFill.solid : (_b = iconFill.regular) !== null && _b !== void 0 ? _b : iconFill.solid, width: "24px", height: "24px" }, void 0), !!likes && jsx$1(LikeCount, __assign$1({ className: "like-count" }, { children: likes }), void 0)] }), isLiked.toString()) }), void 0));
|
|
7152
7152
|
};
|
|
7153
7153
|
|
|
7154
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
7155
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
7156
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
7157
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
7158
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
7154
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
7155
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
7156
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7157
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7158
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
7159
7159
|
var RegularPriceTag = function () {
|
|
7160
7160
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
7161
7161
|
};
|
|
@@ -7205,11 +7205,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
7205
7205
|
: ComponentSize.XSmall;
|
|
7206
7206
|
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));
|
|
7207
7207
|
};
|
|
7208
|
-
return (jsxs$1(Container$
|
|
7208
|
+
return (jsxs$1(Container$1p, __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]
|
|
7209
7209
|
? finalPriceArray[0]
|
|
7210
7210
|
: (_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));
|
|
7211
7211
|
};
|
|
7212
|
-
var templateObject_1$
|
|
7212
|
+
var templateObject_1$1x, templateObject_2$1b, templateObject_3$_, templateObject_4$O, templateObject_5$F;
|
|
7213
7213
|
|
|
7214
7214
|
var STYLES_BY_THEME = {
|
|
7215
7215
|
TheSpaDr: {
|
|
@@ -7282,10 +7282,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7282
7282
|
height: height,
|
|
7283
7283
|
});
|
|
7284
7284
|
});
|
|
7285
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
7286
|
-
var Container$
|
|
7287
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
7288
|
-
var Title$7 = newStyled.h2(templateObject_4$
|
|
7285
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
7286
|
+
var Container$11 = newStyled.a(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\n }\n"])));
|
|
7287
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"])));
|
|
7288
|
+
var Title$7 = newStyled.h2(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
7289
7289
|
var theme = _a.theme;
|
|
7290
7290
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
7291
7291
|
}, function (_a) {
|
|
@@ -7336,17 +7336,17 @@ var getStylesBySize$b = function (size) {
|
|
|
7336
7336
|
};
|
|
7337
7337
|
}
|
|
7338
7338
|
};
|
|
7339
|
-
var TopTagContainer$9 = newStyled.div(templateObject_5$
|
|
7339
|
+
var TopTagContainer$9 = newStyled.div(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7340
7340
|
var style = _a.style;
|
|
7341
7341
|
return style.width;
|
|
7342
7342
|
});
|
|
7343
|
-
var BottomTagContainer$9 = newStyled.div(templateObject_6$
|
|
7343
|
+
var BottomTagContainer$9 = newStyled.div(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7344
7344
|
var style = _a.style;
|
|
7345
7345
|
return style.width;
|
|
7346
7346
|
});
|
|
7347
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
7348
|
-
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$
|
|
7349
|
-
var templateObject_1$
|
|
7347
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7348
|
+
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7349
|
+
var templateObject_1$1w, templateObject_2$1a, templateObject_3$Z, templateObject_4$N, templateObject_5$E, templateObject_6$y, templateObject_7$s, templateObject_8$l;
|
|
7350
7350
|
|
|
7351
7351
|
var ProductItemMobile = function (_a) {
|
|
7352
7352
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7438,12 +7438,12 @@ var ProductItemMobile = function (_a) {
|
|
|
7438
7438
|
setIsLiked(function (prev) { return !prev; });
|
|
7439
7439
|
likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.onClick(e);
|
|
7440
7440
|
};
|
|
7441
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7441
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$11, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!likeBtn && (jsx(LikeButton, { isLiked: isLiked, likes: likesCount, onClick: handleLikeClick, colors: {
|
|
7442
7442
|
background: {
|
|
7443
7443
|
active: (_f = (_e = (_d = likeBtn.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e.active) !== null && _f !== void 0 ? _f : theme.colors.shades.white.color,
|
|
7444
7444
|
hover: (_m = (_j = (_h = (_g = likeBtn.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h.hover) !== null && _j !== void 0 ? _j : (_l = (_k = likeBtn.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l.active) !== null && _m !== void 0 ? _m : theme.colors.shades.white.color,
|
|
7445
7445
|
},
|
|
7446
|
-
} }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$
|
|
7446
|
+
} }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$11, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName, "data-testid": "product-card-title" }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom && !ratingOnTop ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsxs(MarginTopContainer$1, __assign$1({ style: { marginTop: (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? 0 : 8 } }, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5)] }), void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [!(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubMember) && PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$3, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
7447
7447
|
letterSpacing: '-0.05rem',
|
|
7448
7448
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), !ratingOnTop && jsx(RatingDisplay, {}, void 0)] }, void 0)), !!onClickBottomButton && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsxs(IconButton, __assign$1({ size: ComponentSize.Small, width: "100%", onClick: function (e) {
|
|
7449
7449
|
e.preventDefault();
|
|
@@ -7463,10 +7463,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7463
7463
|
height: height,
|
|
7464
7464
|
});
|
|
7465
7465
|
});
|
|
7466
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
7467
|
-
var Container
|
|
7468
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
7469
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
7466
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
7467
|
+
var Container$10 = newStyled.a(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
7468
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
7469
|
+
var Title$6 = newStyled.p(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
7470
7470
|
var getStylesBySize$a = function (size) {
|
|
7471
7471
|
switch (size) {
|
|
7472
7472
|
case ComponentSize.Medium:
|
|
@@ -7492,16 +7492,16 @@ var getStylesBySize$a = function (size) {
|
|
|
7492
7492
|
};
|
|
7493
7493
|
}
|
|
7494
7494
|
};
|
|
7495
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
7495
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7496
7496
|
var style = _a.style;
|
|
7497
7497
|
return style.width;
|
|
7498
7498
|
});
|
|
7499
|
-
var TopRightTagContainer$3 = newStyled.div(templateObject_6$
|
|
7500
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_7$
|
|
7499
|
+
var TopRightTagContainer$3 = newStyled.div(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
7500
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7501
7501
|
var style = _a.style;
|
|
7502
7502
|
return style.width;
|
|
7503
7503
|
});
|
|
7504
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
7504
|
+
var MarginTopContainer = newStyled.div(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7505
7505
|
var ProductItemTK = function (_a) {
|
|
7506
7506
|
var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
|
|
7507
7507
|
display: false,
|
|
@@ -7545,26 +7545,26 @@ var ProductItemTK = function (_a) {
|
|
|
7545
7545
|
: undefined }, void 0));
|
|
7546
7546
|
};
|
|
7547
7547
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
7548
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container
|
|
7548
|
+
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$10, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag || !!topRightTag ? (jsxs(ImageContainer$5, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%", loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer$3, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0)), imageHover ? (jsx(ImageHoverContainer$2, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$10, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
7549
7549
|
// @ts-ignore
|
|
7550
7550
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
7551
7551
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
7552
7552
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7553
7553
|
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
7554
7554
|
};
|
|
7555
|
-
var templateObject_1$
|
|
7555
|
+
var templateObject_1$1v, templateObject_2$19, templateObject_3$Y, templateObject_4$M, templateObject_5$D, templateObject_6$x, templateObject_7$r, templateObject_8$k;
|
|
7556
7556
|
|
|
7557
|
-
var Container
|
|
7557
|
+
var Container$$ = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
7558
7558
|
function withProductGrid(ProductItemComponent, data) {
|
|
7559
7559
|
function WithProductGrid(props) {
|
|
7560
|
-
return (jsx$1(Container
|
|
7560
|
+
return (jsx$1(Container$$, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
7561
7561
|
}
|
|
7562
7562
|
/* istanbul ignore next */
|
|
7563
7563
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
7564
7564
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7565
7565
|
return WithProductGrid;
|
|
7566
7566
|
}
|
|
7567
|
-
var templateObject_1$
|
|
7567
|
+
var templateObject_1$1u;
|
|
7568
7568
|
|
|
7569
7569
|
var Collection = {
|
|
7570
7570
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7572,11 +7572,11 @@ var Collection = {
|
|
|
7572
7572
|
ProductItemTK: ProductItemTK,
|
|
7573
7573
|
};
|
|
7574
7574
|
|
|
7575
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7576
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7577
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
7578
|
-
var Span = newStyled.span(templateObject_4$
|
|
7579
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
7575
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7576
|
+
newStyled(lt.Label)(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7577
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
7578
|
+
var Span = newStyled.span(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7579
|
+
var OptionsContainer = newStyled.div(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
7580
7580
|
var Label$5 = function (_a) {
|
|
7581
7581
|
var label = _a.label, values = _a.values;
|
|
7582
7582
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -7594,7 +7594,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7594
7594
|
Option: Option,
|
|
7595
7595
|
OptionsContainer: OptionsContainer,
|
|
7596
7596
|
});
|
|
7597
|
-
var templateObject_1$
|
|
7597
|
+
var templateObject_1$1t, templateObject_2$18, templateObject_3$X, templateObject_4$L, templateObject_5$C;
|
|
7598
7598
|
|
|
7599
7599
|
var OneColorSelector = function (_a) {
|
|
7600
7600
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7635,21 +7635,21 @@ var OutOfStock = function (_a) {
|
|
|
7635
7635
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7636
7636
|
};
|
|
7637
7637
|
|
|
7638
|
-
var Container$
|
|
7638
|
+
var Container$_ = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
7639
7639
|
var borderColor = _a.borderColor;
|
|
7640
7640
|
return borderColor;
|
|
7641
7641
|
}, function (_a) {
|
|
7642
7642
|
var noStock = _a.noStock;
|
|
7643
7643
|
return (noStock ? '0.4' : '1');
|
|
7644
7644
|
});
|
|
7645
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7645
|
+
var Image$2 = newStyled.img(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7646
7646
|
var PatternSelector = function (_a) {
|
|
7647
7647
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7648
7648
|
var theme = useTheme();
|
|
7649
7649
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7650
|
-
return (jsx$1(Container$
|
|
7650
|
+
return (jsx$1(Container$_, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7651
7651
|
};
|
|
7652
|
-
var templateObject_1$
|
|
7652
|
+
var templateObject_1$1s, templateObject_2$17;
|
|
7653
7653
|
|
|
7654
7654
|
var renderOptions$1 = function (options, showCross) {
|
|
7655
7655
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7677,10 +7677,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7677
7677
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7678
7678
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7679
7679
|
var showCloseIcon = (tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {}).showCloseIcon;
|
|
7680
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7680
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7681
7681
|
return (jsxs(ColorPickerWrapper, __assign$1({ className: className, value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ showCloseIcon: showCloseIcon, position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7682
7682
|
};
|
|
7683
|
-
var templateObject_1$
|
|
7683
|
+
var templateObject_1$1r;
|
|
7684
7684
|
|
|
7685
7685
|
var renderOptions = function (selectedColor, options) {
|
|
7686
7686
|
if (options == null || options.length === 0) {
|
|
@@ -7718,21 +7718,21 @@ var MultiColorPicker = function (_a) {
|
|
|
7718
7718
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7719
7719
|
};
|
|
7720
7720
|
|
|
7721
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7722
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7723
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7721
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
7722
|
+
var Col$1 = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7723
|
+
var Row$2 = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"])), function (props) {
|
|
7724
7724
|
return props.rightToLeft &&
|
|
7725
7725
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7726
7726
|
});
|
|
7727
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7728
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
7729
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7727
|
+
var H5 = newStyled.h5(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7728
|
+
var H3 = newStyled.h3(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7729
|
+
var FreeShipping = newStyled.span(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7730
7730
|
var CrossSellCheckbox = function (_a) {
|
|
7731
7731
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7732
7732
|
var theme = useTheme();
|
|
7733
7733
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7734
7734
|
};
|
|
7735
|
-
var templateObject_1$
|
|
7735
|
+
var templateObject_1$1q, templateObject_2$16, templateObject_3$W, templateObject_4$K, templateObject_5$B, templateObject_6$w;
|
|
7736
7736
|
|
|
7737
7737
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7738
7738
|
__proto__: null,
|
|
@@ -7761,7 +7761,7 @@ var sizeMapper = (_a = {},
|
|
|
7761
7761
|
_a[ComponentSize.XSmall] = 'small',
|
|
7762
7762
|
_a[ComponentSize.XXSmall] = 'small',
|
|
7763
7763
|
_a);
|
|
7764
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7764
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7765
7765
|
var wide = _a.wide;
|
|
7766
7766
|
return (wide ? '100%' : 'fit-content');
|
|
7767
7767
|
}, function (_a) {
|
|
@@ -7783,11 +7783,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1o || (templateObj
|
|
|
7783
7783
|
var theme = _a.theme;
|
|
7784
7784
|
return theme.colors.text.disabled;
|
|
7785
7785
|
});
|
|
7786
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7786
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7787
7787
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7788
7788
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7789
7789
|
});
|
|
7790
|
-
var templateObject_1$
|
|
7790
|
+
var templateObject_1$1p, templateObject_2$15;
|
|
7791
7791
|
|
|
7792
7792
|
var BaseCTA = function (_a) {
|
|
7793
7793
|
var _b, _c, _d;
|
|
@@ -7878,44 +7878,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7878
7878
|
} }), void 0));
|
|
7879
7879
|
};
|
|
7880
7880
|
|
|
7881
|
-
var Container$
|
|
7882
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
7883
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7884
|
-
var Details = newStyled.span(templateObject_4$
|
|
7881
|
+
var Container$Z = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
7882
|
+
var IconContainer$5 = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7883
|
+
var Text$3 = newStyled.p(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7884
|
+
var Details = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7885
7885
|
var Note = function (_a) {
|
|
7886
7886
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7887
7887
|
var theme = useTheme();
|
|
7888
|
-
return (jsxs$1(Container$
|
|
7888
|
+
return (jsxs$1(Container$Z, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$5, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7889
7889
|
};
|
|
7890
|
-
var templateObject_1$
|
|
7890
|
+
var templateObject_1$1o, templateObject_2$14, templateObject_3$V, templateObject_4$J;
|
|
7891
7891
|
|
|
7892
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7892
|
+
var Title$5 = newStyled.h1(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
7893
7893
|
var theme = _a.theme;
|
|
7894
7894
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
7895
7895
|
});
|
|
7896
|
-
var Line = newStyled.div(templateObject_2$
|
|
7897
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7896
|
+
var Line = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7897
|
+
var Row$1 = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
7898
7898
|
flexDirection: ['column', 'row'],
|
|
7899
7899
|
}));
|
|
7900
|
-
var Col = newStyled.div(templateObject_4$
|
|
7900
|
+
var Col = newStyled.div(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
7901
7901
|
margin: ['0', '0 1.25rem'],
|
|
7902
7902
|
marginBottom: ['1.875rem', '0'],
|
|
7903
7903
|
alignItems: ['center', 'flex-start'],
|
|
7904
7904
|
textAlign: ['center', 'inherit'],
|
|
7905
7905
|
width: ['100%', 'inherit'],
|
|
7906
7906
|
}));
|
|
7907
|
-
var IconContainer$4 = newStyled.div(templateObject_5$
|
|
7907
|
+
var IconContainer$4 = newStyled.div(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7908
7908
|
marginRight: ['0', '0.438rem'],
|
|
7909
7909
|
marginBottom: ['10px', '0'],
|
|
7910
7910
|
width: ['auto', '1.5rem'],
|
|
7911
7911
|
}));
|
|
7912
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7912
|
+
var SectionTitle = newStyled.h1(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7913
7913
|
display: ['block', 'flex'],
|
|
7914
7914
|
}), function (_a) {
|
|
7915
7915
|
var theme = _a.theme;
|
|
7916
7916
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7917
7917
|
});
|
|
7918
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7918
|
+
var SectionDetails = newStyled.p(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7919
7919
|
var theme = _a.theme;
|
|
7920
7920
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7921
7921
|
}, function (_a) {
|
|
@@ -7926,22 +7926,22 @@ var SectionDetails = newStyled.p(templateObject_7$p || (templateObject_7$p = __m
|
|
|
7926
7926
|
})
|
|
7927
7927
|
: '';
|
|
7928
7928
|
});
|
|
7929
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
7929
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
7930
7930
|
var DeliveryDetails = function (_a) {
|
|
7931
7931
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7932
7932
|
var theme = useTheme();
|
|
7933
7933
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$4, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7934
7934
|
};
|
|
7935
|
-
var templateObject_1$
|
|
7935
|
+
var templateObject_1$1n, templateObject_2$13, templateObject_3$U, templateObject_4$I, templateObject_5$A, templateObject_6$v, templateObject_7$q, templateObject_8$j;
|
|
7936
7936
|
|
|
7937
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7937
|
+
var Backdrop = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
7938
7938
|
var top = _a.top;
|
|
7939
7939
|
return top;
|
|
7940
7940
|
}, function (_a) {
|
|
7941
7941
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7942
7942
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7943
7943
|
});
|
|
7944
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7944
|
+
var Sidebar = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
7945
7945
|
var height = _a.height;
|
|
7946
7946
|
return height;
|
|
7947
7947
|
}, function (_a) {
|
|
@@ -7988,20 +7988,20 @@ var Drawer = function (_a) {
|
|
|
7988
7988
|
}, [isOpen, onClose, onOpen]);
|
|
7989
7989
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7990
7990
|
};
|
|
7991
|
-
var templateObject_1$
|
|
7991
|
+
var templateObject_1$1m, templateObject_2$12;
|
|
7992
7992
|
|
|
7993
7993
|
var TooltipArrow = function (_a) {
|
|
7994
7994
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7995
7995
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7996
7996
|
};
|
|
7997
7997
|
|
|
7998
|
-
var List = newStyled.ul(templateObject_1$
|
|
7999
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
8000
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
8001
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
8002
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
8003
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
8004
|
-
var templateObject_1$
|
|
7998
|
+
var List = newStyled.ul(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7999
|
+
var Item$2 = newStyled.li(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
8000
|
+
var DropdownWrapper = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
8001
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
8002
|
+
var StyledDropdown = newStyled.ul(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
8003
|
+
var DropdownItem = newStyled.li(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
8004
|
+
var templateObject_1$1l, templateObject_2$11, templateObject_3$T, templateObject_4$H, templateObject_5$z, templateObject_6$u;
|
|
8005
8005
|
|
|
8006
8006
|
var DropdownListIcons = function (_a) {
|
|
8007
8007
|
var items = _a.items;
|
|
@@ -8014,13 +8014,13 @@ var Dropdown = function (_a) {
|
|
|
8014
8014
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
8015
8015
|
};
|
|
8016
8016
|
|
|
8017
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
8018
|
-
var DropdownLabel = newStyled.div(templateObject_2
|
|
8019
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
8020
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
8021
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
8022
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
8023
|
-
var templateObject_1$
|
|
8017
|
+
var DropdownContainer = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
8018
|
+
var DropdownLabel = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
8019
|
+
var SizeLabel = newStyled.span(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8020
|
+
var DetailLabel = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
8021
|
+
var DropdownOptions = newStyled.div(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
8022
|
+
var DropdownOption = newStyled.div(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
8023
|
+
var templateObject_1$1k, templateObject_2$10, templateObject_3$S, templateObject_4$G, templateObject_5$y, templateObject_6$t;
|
|
8024
8024
|
|
|
8025
8025
|
var SizeDropdown = function (_a) {
|
|
8026
8026
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8043,15 +8043,15 @@ var SizeDropdown = function (_a) {
|
|
|
8043
8043
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
8044
8044
|
};
|
|
8045
8045
|
|
|
8046
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
8047
|
-
var DialogDropdownWrapper2 = newStyled.div(templateObject_2
|
|
8048
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_3$
|
|
8046
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
8047
|
+
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
8048
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) {
|
|
8049
8049
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
8050
8050
|
}, function (props) {
|
|
8051
8051
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8052
8052
|
});
|
|
8053
|
-
var DialogDropdownListItem = newStyled.li(templateObject_4$
|
|
8054
|
-
var DialogDropdownLink = newStyled.a(templateObject_5$
|
|
8053
|
+
var DialogDropdownListItem = newStyled.li(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
8054
|
+
var DialogDropdownLink = newStyled.a(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
8055
8055
|
var DropdownDialog = function (_a) {
|
|
8056
8056
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, containerPosRight = _b.containerPosRight, containerPosTop = _b.containerPosTop, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
|
|
8057
8057
|
var theme = useTheme$1();
|
|
@@ -8060,7 +8060,7 @@ var DropdownDialog = function (_a) {
|
|
|
8060
8060
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8061
8061
|
}) }), void 0) }), void 0));
|
|
8062
8062
|
};
|
|
8063
|
-
var templateObject_1$
|
|
8063
|
+
var templateObject_1$1j, templateObject_2$$, templateObject_3$R, templateObject_4$F, templateObject_5$x;
|
|
8064
8064
|
|
|
8065
8065
|
function FilteringDropdown(_a) {
|
|
8066
8066
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -8093,29 +8093,29 @@ function FilteringDropdown(_a) {
|
|
|
8093
8093
|
}) }, void 0)] }), void 0));
|
|
8094
8094
|
}
|
|
8095
8095
|
|
|
8096
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
8097
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
8098
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
8099
|
-
var Container$
|
|
8096
|
+
var Title$4 = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
8097
|
+
var P$3 = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
8098
|
+
var ArrowContainer = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
8099
|
+
var Container$Y = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
8100
8100
|
var Accordion = function (_a) {
|
|
8101
8101
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
8102
8102
|
var theme = useTheme();
|
|
8103
8103
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8104
|
-
return (jsxs$1(Container$
|
|
8104
|
+
return (jsxs$1(Container$Y, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(P$3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
8105
8105
|
};
|
|
8106
|
-
var templateObject_1$
|
|
8107
|
-
|
|
8108
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
8109
|
-
var Header$3 = newStyled.div(templateObject_2$
|
|
8110
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
8111
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
8112
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
8113
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
8114
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
8115
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
8106
|
+
var templateObject_1$1i, templateObject_2$_, templateObject_3$Q, templateObject_4$E;
|
|
8107
|
+
|
|
8108
|
+
var SectionContent = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
8109
|
+
var Header$3 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
8110
|
+
var MobileHeader = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
8111
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
8112
|
+
var H4 = newStyled.h4(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
8113
|
+
var FilterLink = newStyled.a(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
8114
|
+
var OptionContainer = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
8115
|
+
var ClearAll = newStyled.span(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
8116
8116
|
var MobileFooter = newStyled.div(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
8117
8117
|
var MobileClearContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
8118
|
-
var templateObject_1$
|
|
8118
|
+
var templateObject_1$1h, templateObject_2$Z, templateObject_3$P, templateObject_4$D, templateObject_5$w, templateObject_6$s, templateObject_7$p, templateObject_8$i, templateObject_9$a, templateObject_10$9;
|
|
8119
8119
|
|
|
8120
8120
|
var getStylesBySize$9 = function (size, theme) {
|
|
8121
8121
|
switch (size) {
|
|
@@ -8180,9 +8180,9 @@ var SelectorSecondary = function (_a) {
|
|
|
8180
8180
|
} }), id: id }, void 0));
|
|
8181
8181
|
};
|
|
8182
8182
|
|
|
8183
|
-
var UL = newStyled.ul(templateObject_1$
|
|
8184
|
-
var LI = newStyled.li(templateObject_2$
|
|
8185
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
8183
|
+
var UL = newStyled.ul(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
8184
|
+
var LI = newStyled.li(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
8185
|
+
var CloseIconContainer = newStyled.div(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
8186
8186
|
var Tags = function (_a) {
|
|
8187
8187
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
8188
8188
|
var theme = useTheme();
|
|
@@ -8190,7 +8190,7 @@ var Tags = function (_a) {
|
|
|
8190
8190
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
8191
8191
|
}) }), void 0));
|
|
8192
8192
|
};
|
|
8193
|
-
var templateObject_1$
|
|
8193
|
+
var templateObject_1$1g, templateObject_2$Y, templateObject_3$O;
|
|
8194
8194
|
|
|
8195
8195
|
var Filters = function (_a) {
|
|
8196
8196
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -8326,8 +8326,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8326
8326
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
8327
8327
|
};
|
|
8328
8328
|
|
|
8329
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
8330
|
-
var Container$
|
|
8329
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
8330
|
+
var Container$X = newStyled.div(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
8331
8331
|
var FitGuarantee = function (_a) {
|
|
8332
8332
|
var _b;
|
|
8333
8333
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -8338,17 +8338,17 @@ var FitGuarantee = function (_a) {
|
|
|
8338
8338
|
console.error('Icon', iconName, 'not found');
|
|
8339
8339
|
return null;
|
|
8340
8340
|
}
|
|
8341
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$
|
|
8341
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$X, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$X, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
8342
8342
|
margin: '0.1rem 0',
|
|
8343
8343
|
width: '100%',
|
|
8344
8344
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
8345
8345
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8346
8346
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
8347
8347
|
};
|
|
8348
|
-
var templateObject_1$
|
|
8348
|
+
var templateObject_1$1f, templateObject_2$X;
|
|
8349
8349
|
|
|
8350
|
-
var Container$
|
|
8351
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
8350
|
+
var Container$W = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
8351
|
+
var P$2 = newStyled.p(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
8352
8352
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8353
8353
|
border: 'none',
|
|
8354
8354
|
background: 'transparent',
|
|
@@ -8361,9 +8361,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
8361
8361
|
var FitPredictor = function (_a) {
|
|
8362
8362
|
var onClick = _a.onClick;
|
|
8363
8363
|
var theme = useTheme();
|
|
8364
|
-
return (jsxs(Container$
|
|
8364
|
+
return (jsxs(Container$W, __assign$1({ theme: theme }, { children: [jsx(Container$W, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
8365
8365
|
};
|
|
8366
|
-
var templateObject_1$
|
|
8366
|
+
var templateObject_1$1e, templateObject_2$W;
|
|
8367
8367
|
|
|
8368
8368
|
var Button$8 = newStyled.button(function () { return ({
|
|
8369
8369
|
background: 'transparent',
|
|
@@ -12607,14 +12607,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12607
12607
|
return Slider;
|
|
12608
12608
|
}(React__default.Component);
|
|
12609
12609
|
|
|
12610
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12610
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
12611
12611
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12612
12612
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12613
12613
|
}, function (_a) {
|
|
12614
12614
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12615
12615
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12616
12616
|
});
|
|
12617
|
-
var templateObject_1$
|
|
12617
|
+
var templateObject_1$1d;
|
|
12618
12618
|
|
|
12619
12619
|
var getStylesBySize$8 = function (size) {
|
|
12620
12620
|
// rem units
|
|
@@ -12673,7 +12673,7 @@ var SliderNavigation = function (_a) {
|
|
|
12673
12673
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
12674
12674
|
};
|
|
12675
12675
|
|
|
12676
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12676
|
+
var Image$1 = newStyled.img(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
12677
12677
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12678
12678
|
return borderRadiusVariant &&
|
|
12679
12679
|
"\n border-radius: 20px;\n ";
|
|
@@ -12691,7 +12691,7 @@ var Image$1 = newStyled.img(templateObject_1$1b || (templateObject_1$1b = __make
|
|
|
12691
12691
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12692
12692
|
: 'inherit';
|
|
12693
12693
|
});
|
|
12694
|
-
var templateObject_1$
|
|
12694
|
+
var templateObject_1$1c;
|
|
12695
12695
|
|
|
12696
12696
|
var ImageSmallPreview = function (_a) {
|
|
12697
12697
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare, _c = _a.loading, loading = _c === void 0 ? 'eager' : _c, _d = _a.decoding, decoding = _d === void 0 ? 'auto' : _d;
|
|
@@ -12699,9 +12699,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12699
12699
|
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: loading, decoding: decoding, width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
12700
12700
|
};
|
|
12701
12701
|
|
|
12702
|
-
var horizontalStyles = css(templateObject_1$
|
|
12703
|
-
var verticalStyles = css(templateObject_2$
|
|
12704
|
-
var Container$
|
|
12702
|
+
var horizontalStyles = css(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
12703
|
+
var verticalStyles = css(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
12704
|
+
var Container$V = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12705
12705
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12706
12706
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12707
12707
|
}, function (_a) {
|
|
@@ -12712,12 +12712,12 @@ var Container$U = newStyled.div(templateObject_3$M || (templateObject_3$M = __ma
|
|
|
12712
12712
|
return hasOverflowArrows &&
|
|
12713
12713
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12714
12714
|
});
|
|
12715
|
-
var Button$7 = newStyled.button(templateObject_4$
|
|
12716
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12717
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12718
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12719
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
12720
|
-
var templateObject_1$
|
|
12715
|
+
var Button$7 = newStyled.button(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
12716
|
+
var ArrowsContainer = newStyled.div(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
12717
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
12718
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
12719
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
12720
|
+
var templateObject_1$1b, templateObject_2$V, templateObject_3$N, templateObject_4$C, templateObject_5$v, templateObject_6$r, templateObject_7$o, templateObject_8$h;
|
|
12721
12721
|
|
|
12722
12722
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12723
12723
|
var loading = 'eager';
|
|
@@ -12745,7 +12745,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12745
12745
|
var element = document.querySelector(".imageListContainer");
|
|
12746
12746
|
element.scrollBy(0, 200);
|
|
12747
12747
|
};
|
|
12748
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
12748
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$V, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
12749
12749
|
arrowWidth: 0.75,
|
|
12750
12750
|
arrowHeight: 1.25,
|
|
12751
12751
|
arrowPadding: 1.625,
|
|
@@ -14345,40 +14345,40 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14345
14345
|
afterZoomOut: PropTypes.func
|
|
14346
14346
|
} : {};
|
|
14347
14347
|
|
|
14348
|
-
var Container$
|
|
14348
|
+
var Container$U = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
14349
14349
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14350
14350
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14351
14351
|
});
|
|
14352
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
14352
|
+
var TopTagContainer$7 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
14353
14353
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14354
14354
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
14355
14355
|
}, function (_a) {
|
|
14356
14356
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14357
14357
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
14358
14358
|
});
|
|
14359
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
14359
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
14360
14360
|
var isCTAHidden = _a.isCTAHidden;
|
|
14361
14361
|
return (isCTAHidden ? '60px' : '120px');
|
|
14362
14362
|
});
|
|
14363
|
-
var TopRightTagWrapper = newStyled.div(templateObject_4$
|
|
14364
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_5$
|
|
14365
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$
|
|
14366
|
-
var ImageStyled = newStyled(Image$3)(templateObject_7$
|
|
14363
|
+
var TopRightTagWrapper = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14364
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14365
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
14366
|
+
var ImageStyled = newStyled(Image$3)(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14367
14367
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14368
14368
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14369
14369
|
});
|
|
14370
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$
|
|
14370
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14371
14371
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14372
14372
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14373
14373
|
});
|
|
14374
|
-
var templateObject_1$
|
|
14374
|
+
var templateObject_1$1a, templateObject_2$U, templateObject_3$M, templateObject_4$B, templateObject_5$u, templateObject_6$q, templateObject_7$n, templateObject_8$g;
|
|
14375
14375
|
|
|
14376
14376
|
var ImageProductSlide$1 = function (_a) {
|
|
14377
14377
|
var _b;
|
|
14378
14378
|
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom, isRatioSquare = _a.isRatioSquare;
|
|
14379
14379
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14380
14380
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
14381
|
-
return (jsxs$1(Container$
|
|
14381
|
+
return (jsxs$1(Container$U, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
14382
14382
|
alt: content.alt,
|
|
14383
14383
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
14384
14384
|
loading: 'eager',
|
|
@@ -14386,8 +14386,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14386
14386
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsx$1(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && (jsx$1(TopRightTagWrapper, { children: jsx$1(TopRightTagContainer$2, { children: topRightTag }, void 0) }, void 0))] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
14387
14387
|
};
|
|
14388
14388
|
|
|
14389
|
-
var Container$
|
|
14390
|
-
var templateObject_1$
|
|
14389
|
+
var Container$T = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
14390
|
+
var templateObject_1$19;
|
|
14391
14391
|
|
|
14392
14392
|
var getInitialIndex = function (images, selectedValue) {
|
|
14393
14393
|
if (selectedValue) {
|
|
@@ -14413,10 +14413,10 @@ var ProductGallery = function (_a) {
|
|
|
14413
14413
|
setActiveIndex(index);
|
|
14414
14414
|
};
|
|
14415
14415
|
var selectedImage = images[activeIndex];
|
|
14416
|
-
return (jsxs$1(Container$
|
|
14416
|
+
return (jsxs$1(Container$T, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }, void 0));
|
|
14417
14417
|
};
|
|
14418
14418
|
|
|
14419
|
-
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$
|
|
14419
|
+
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
14420
14420
|
var AmazonButton = function (_a) {
|
|
14421
14421
|
var onClick = _a.onClick;
|
|
14422
14422
|
return (jsx$1(StyledButton$3, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -14425,9 +14425,9 @@ var PaypalButton = function (_a) {
|
|
|
14425
14425
|
var onClick = _a.onClick;
|
|
14426
14426
|
return (jsx$1(StyledButton$3, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
14427
14427
|
};
|
|
14428
|
-
var templateObject_1$
|
|
14428
|
+
var templateObject_1$18;
|
|
14429
14429
|
|
|
14430
|
-
var Container$
|
|
14430
|
+
var Container$S = newStyled.div(function (props) { return ({
|
|
14431
14431
|
height: 'auto',
|
|
14432
14432
|
textAlign: 'center',
|
|
14433
14433
|
justifyContent: 'center',
|
|
@@ -14477,12 +14477,12 @@ var IconsWithTitle = function (_a) {
|
|
|
14477
14477
|
textAlign: 'center',
|
|
14478
14478
|
lineHeight: '18px',
|
|
14479
14479
|
};
|
|
14480
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
14480
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$S, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
14481
14481
|
};
|
|
14482
14482
|
|
|
14483
|
-
var Container$
|
|
14484
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14485
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14483
|
+
var Container$R = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14484
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14485
|
+
var StyledTitle = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14486
14486
|
var titlePosition = _a.titlePosition;
|
|
14487
14487
|
return titlePosition == 'center' &&
|
|
14488
14488
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14490,15 +14490,15 @@ var StyledTitle = newStyled.div(templateObject_3$K || (templateObject_3$K = __ma
|
|
|
14490
14490
|
var ImageCardWithDescription = function (_a) {
|
|
14491
14491
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14492
14492
|
var isMobile = useWindowDimensions().isMobile;
|
|
14493
|
-
return (jsxs$1(Container$
|
|
14493
|
+
return (jsxs$1(Container$R, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14494
14494
|
};
|
|
14495
|
-
var templateObject_1$
|
|
14495
|
+
var templateObject_1$17, templateObject_2$T, templateObject_3$L;
|
|
14496
14496
|
|
|
14497
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14497
|
+
var Label$4 = newStyled.span(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
14498
14498
|
var color = _a.color;
|
|
14499
14499
|
return color;
|
|
14500
14500
|
});
|
|
14501
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14501
|
+
var MandatoryIcon = newStyled.span(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14502
14502
|
var color = _a.color;
|
|
14503
14503
|
return color;
|
|
14504
14504
|
});
|
|
@@ -14507,7 +14507,7 @@ var InputLabel = function (_a) {
|
|
|
14507
14507
|
var theme = useTheme();
|
|
14508
14508
|
return (jsxs$1(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
14509
14509
|
};
|
|
14510
|
-
var templateObject_1$
|
|
14510
|
+
var templateObject_1$16, templateObject_2$S;
|
|
14511
14511
|
|
|
14512
14512
|
var containerByStatus = function (theme, status) {
|
|
14513
14513
|
if (status === InputValidationType.Valid)
|
|
@@ -14516,12 +14516,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14516
14516
|
return theme.colors.semantic.urgent.color;
|
|
14517
14517
|
return '';
|
|
14518
14518
|
};
|
|
14519
|
-
var Container$
|
|
14519
|
+
var Container$Q = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14520
14520
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14521
14521
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14522
14522
|
});
|
|
14523
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14524
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14523
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
14524
|
+
var StyledInput = newStyled.input(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
14525
14525
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14526
14526
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14527
14527
|
}, function (_a) {
|
|
@@ -14576,11 +14576,11 @@ var StyledInput = newStyled.input(templateObject_3$J || (templateObject_3$J = __
|
|
|
14576
14576
|
return hasValue &&
|
|
14577
14577
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14578
14578
|
});
|
|
14579
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14579
|
+
var InputWrapper = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14580
14580
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14581
14581
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14582
14582
|
});
|
|
14583
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14583
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
14584
14584
|
var theme = _a.theme;
|
|
14585
14585
|
return theme.component.input.placeholderColor;
|
|
14586
14586
|
}, function (_a) {
|
|
@@ -14593,8 +14593,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$s || (templateObject_5
|
|
|
14593
14593
|
var theme = _a.theme;
|
|
14594
14594
|
return theme.component.input.lineHeight;
|
|
14595
14595
|
});
|
|
14596
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14597
|
-
var templateObject_1$
|
|
14596
|
+
var ClearInput = newStyled.div(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
14597
|
+
var templateObject_1$15, templateObject_2$R, templateObject_3$K, templateObject_4$A, templateObject_5$t, templateObject_6$p;
|
|
14598
14598
|
|
|
14599
14599
|
var BaseInput = function (_a) {
|
|
14600
14600
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, customErrorMessage = _a.customErrorMessage, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder", "customErrorMessage"]);
|
|
@@ -14618,7 +14618,7 @@ var BaseInput = function (_a) {
|
|
|
14618
14618
|
}, [status]);
|
|
14619
14619
|
var hasValue = Boolean(value);
|
|
14620
14620
|
var errorMessage = customErrorMessage || (status === InputValidationType.Error && required);
|
|
14621
|
-
return (jsxs$1(Container$
|
|
14621
|
+
return (jsxs$1(Container$Q, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14622
14622
|
onChange(event.target.value, event);
|
|
14623
14623
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
14624
14624
|
onChange('', { target: { value: '' } });
|
|
@@ -14639,11 +14639,11 @@ var Button$6 = function (_a) {
|
|
|
14639
14639
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14640
14640
|
};
|
|
14641
14641
|
|
|
14642
|
-
var Container$
|
|
14642
|
+
var Container$P = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
14643
14643
|
var theme = _a.theme;
|
|
14644
14644
|
return theme.component.inputCustom.input.borderRadius;
|
|
14645
14645
|
});
|
|
14646
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14646
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
14647
14647
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14648
14648
|
return defaultRounded
|
|
14649
14649
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14658,23 +14658,23 @@ var Custom = function (_a) {
|
|
|
14658
14658
|
text: text,
|
|
14659
14659
|
disabled: rest.disabled,
|
|
14660
14660
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14661
|
-
return (jsx$1(Container$
|
|
14661
|
+
return (jsx$1(Container$P, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14662
14662
|
};
|
|
14663
|
-
var templateObject_1$
|
|
14663
|
+
var templateObject_1$14, templateObject_2$Q;
|
|
14664
14664
|
|
|
14665
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14665
|
+
var SuccessContainer = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14666
14666
|
var size = _a.size;
|
|
14667
14667
|
return (size === 'small' ? '36px' : '');
|
|
14668
14668
|
});
|
|
14669
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14670
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14669
|
+
var SuccessMessage = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
14670
|
+
var SuccessText = newStyled.span(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
14671
14671
|
var Success = function (_a) {
|
|
14672
14672
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14673
14673
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14674
14674
|
};
|
|
14675
|
-
var templateObject_1$
|
|
14675
|
+
var templateObject_1$13, templateObject_2$P, templateObject_3$J;
|
|
14676
14676
|
|
|
14677
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14677
|
+
var ButtonContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14678
14678
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14679
14679
|
return status === InputValidationType.Empty &&
|
|
14680
14680
|
type === 'primary' &&
|
|
@@ -14691,16 +14691,16 @@ var BasePlusButton = function (_a) {
|
|
|
14691
14691
|
}
|
|
14692
14692
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14693
14693
|
};
|
|
14694
|
-
var templateObject_1$
|
|
14694
|
+
var templateObject_1$12;
|
|
14695
14695
|
|
|
14696
|
-
var Container$
|
|
14697
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14696
|
+
var Container$O = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14697
|
+
var IconContainer$3 = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
14698
14698
|
var BasePlusIcon = function (_a) {
|
|
14699
14699
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14700
14700
|
var theme = useTheme();
|
|
14701
|
-
return (jsx$1(Container$
|
|
14701
|
+
return (jsx$1(Container$O, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$3, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14702
14702
|
};
|
|
14703
|
-
var templateObject_1$
|
|
14703
|
+
var templateObject_1$11, templateObject_2$O;
|
|
14704
14704
|
|
|
14705
14705
|
var Input$3 = {
|
|
14706
14706
|
Simple: BaseInput,
|
|
@@ -14840,21 +14840,21 @@ var Portal = function (_a) {
|
|
|
14840
14840
|
var visibleStyle = function (_a) {
|
|
14841
14841
|
var opened = _a.opened;
|
|
14842
14842
|
return opened
|
|
14843
|
-
? css(templateObject_1
|
|
14843
|
+
? css(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14844
14844
|
};
|
|
14845
14845
|
var transformStyle = function (_a) {
|
|
14846
14846
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14847
14847
|
return opened
|
|
14848
|
-
? css(templateObject_3$
|
|
14848
|
+
? css(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14849
14849
|
};
|
|
14850
|
-
var Container$
|
|
14850
|
+
var Container$N = newStyled.div(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14851
14851
|
var width = _a.width;
|
|
14852
14852
|
return width
|
|
14853
|
-
? css(templateObject_5$
|
|
14853
|
+
? css(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14854
14854
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14855
14855
|
});
|
|
14856
14856
|
}, visibleStyle, transformStyle);
|
|
14857
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14857
|
+
var Overlay = newStyled.div(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"])), visibleStyle);
|
|
14858
14858
|
var Modal = function (_a) {
|
|
14859
14859
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d;
|
|
14860
14860
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14864,7 +14864,7 @@ var Modal = function (_a) {
|
|
|
14864
14864
|
}
|
|
14865
14865
|
close();
|
|
14866
14866
|
};
|
|
14867
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14867
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$N, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
|
|
14868
14868
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14869
14869
|
onDismiss();
|
|
14870
14870
|
} }, void 0)] }), void 0));
|
|
@@ -14895,7 +14895,7 @@ var useModal = function (id) {
|
|
|
14895
14895
|
close: close,
|
|
14896
14896
|
}); }, [close, open, opened]);
|
|
14897
14897
|
};
|
|
14898
|
-
var templateObject_1
|
|
14898
|
+
var templateObject_1$10, templateObject_2$N, templateObject_3$I, templateObject_4$z, templateObject_5$s, templateObject_6$o, templateObject_7$m;
|
|
14899
14899
|
|
|
14900
14900
|
var htmlReactParser = {exports: {}};
|
|
14901
14901
|
|
|
@@ -18676,7 +18676,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18676
18676
|
HTMLReactParser$1.attributesToProps;
|
|
18677
18677
|
HTMLReactParser$1.Element;
|
|
18678
18678
|
|
|
18679
|
-
var Bar$1 = newStyled.div(templateObject_1
|
|
18679
|
+
var Bar$1 = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18680
18680
|
var height = _a.height;
|
|
18681
18681
|
return height || '0.5rem';
|
|
18682
18682
|
}, function (_a) {
|
|
@@ -18715,7 +18715,7 @@ var BarContainer = newStyled.div({
|
|
|
18715
18715
|
padding: '0 16px',
|
|
18716
18716
|
position: 'relative',
|
|
18717
18717
|
});
|
|
18718
|
-
var Container$
|
|
18718
|
+
var Container$M = newStyled.div(function (_a) {
|
|
18719
18719
|
var backgroundColor = _a.backgroundColor;
|
|
18720
18720
|
return ({
|
|
18721
18721
|
width: '475px',
|
|
@@ -18728,7 +18728,7 @@ var Container$L = newStyled.div(function (_a) {
|
|
|
18728
18728
|
background: backgroundColor,
|
|
18729
18729
|
});
|
|
18730
18730
|
});
|
|
18731
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18731
|
+
var MessageContainer = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18732
18732
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18733
18733
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18734
18734
|
};
|
|
@@ -18757,33 +18757,33 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18757
18757
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18758
18758
|
return (jsx$1(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18759
18759
|
};
|
|
18760
|
-
return (jsxs$1(Container$
|
|
18760
|
+
return (jsxs$1(Container$M, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18761
18761
|
};
|
|
18762
|
-
var templateObject_1
|
|
18762
|
+
var templateObject_1$$, templateObject_2$M;
|
|
18763
18763
|
|
|
18764
|
-
var Container$
|
|
18764
|
+
var Container$L = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
18765
18765
|
var theme = _a.theme;
|
|
18766
18766
|
return theme.component.orderBar.backgroundColor;
|
|
18767
18767
|
});
|
|
18768
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18768
|
+
var H1 = newStyled.h1(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
18769
18769
|
var OrderBar = function (_a) {
|
|
18770
18770
|
var message = _a.message, color = _a.color;
|
|
18771
18771
|
var theme = useTheme();
|
|
18772
|
-
return (jsxs$1(Container$
|
|
18772
|
+
return (jsxs$1(Container$L, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18773
18773
|
};
|
|
18774
|
-
var templateObject_1$
|
|
18775
|
-
|
|
18776
|
-
var Container$
|
|
18777
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18778
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18779
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18780
|
-
var Check = newStyled.div(templateObject_5$
|
|
18781
|
-
var IconContainer$2 = newStyled.div(templateObject_6$
|
|
18782
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18783
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
18774
|
+
var templateObject_1$_, templateObject_2$L;
|
|
18775
|
+
|
|
18776
|
+
var Container$K = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
18777
|
+
var Card$1 = newStyled.div(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18778
|
+
var Tag$1 = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
18779
|
+
var Label$3 = newStyled.div(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
18780
|
+
var Check = newStyled.div(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18781
|
+
var IconContainer$2 = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18782
|
+
var IconPlaceholder = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18783
|
+
var DiscountContainer = newStyled.div(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18784
18784
|
var PackSelector = function (_a) {
|
|
18785
18785
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18786
|
-
return (jsx$1(Container$
|
|
18786
|
+
return (jsx$1(Container$K, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18787
18787
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18788
18788
|
}) }), void 0));
|
|
18789
18789
|
};
|
|
@@ -18810,14 +18810,14 @@ var PackCard = function (_a) {
|
|
|
18810
18810
|
currency: currencyCode || 'USD',
|
|
18811
18811
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18812
18812
|
};
|
|
18813
|
-
var templateObject_1$
|
|
18813
|
+
var templateObject_1$Z, templateObject_2$K, templateObject_3$H, templateObject_4$y, templateObject_5$r, templateObject_6$n, templateObject_7$l, templateObject_8$f;
|
|
18814
18814
|
|
|
18815
|
-
var Container$
|
|
18816
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18817
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18815
|
+
var Container$J = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18816
|
+
var IconContainer$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18817
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18818
18818
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18819
18819
|
}));
|
|
18820
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18820
|
+
var PageNumber = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
18821
18821
|
var bold = _a.bold;
|
|
18822
18822
|
return (bold ? '700' : '500');
|
|
18823
18823
|
}, function (_a) {
|
|
@@ -18834,7 +18834,7 @@ var PageNumber = newStyled.span(templateObject_4$w || (templateObject_4$w = __ma
|
|
|
18834
18834
|
var background = _a.background;
|
|
18835
18835
|
return background || 'unset';
|
|
18836
18836
|
});
|
|
18837
|
-
var templateObject_1$
|
|
18837
|
+
var templateObject_1$Y, templateObject_2$J, templateObject_3$G, templateObject_4$x;
|
|
18838
18838
|
|
|
18839
18839
|
var Pagination = function (_a) {
|
|
18840
18840
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18880,7 +18880,7 @@ var Pagination = function (_a) {
|
|
|
18880
18880
|
}
|
|
18881
18881
|
return pages;
|
|
18882
18882
|
}, [from, page, showReducedPages, to]);
|
|
18883
|
-
return (jsxs$1(Container$
|
|
18883
|
+
return (jsxs$1(Container$J, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18884
18884
|
};
|
|
18885
18885
|
|
|
18886
18886
|
var PaginatorBlog = function (_a) {
|
|
@@ -18894,12 +18894,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18894
18894
|
setPage(page);
|
|
18895
18895
|
onChange(page);
|
|
18896
18896
|
};
|
|
18897
|
-
return (jsxs$1(Container$
|
|
18897
|
+
return (jsxs$1(Container$J, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18898
18898
|
? theme.colors.shades['white'].color
|
|
18899
18899
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18900
18900
|
};
|
|
18901
18901
|
|
|
18902
|
-
var Container$
|
|
18902
|
+
var Container$I = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18903
18903
|
var width = _a.width;
|
|
18904
18904
|
return width;
|
|
18905
18905
|
}, function (_a) {
|
|
@@ -18915,14 +18915,14 @@ var Container$H = newStyled.div(templateObject_1$W || (templateObject_1$W = __ma
|
|
|
18915
18915
|
var PaymentMethod = function (_a) {
|
|
18916
18916
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18917
18917
|
var theme = useTheme();
|
|
18918
|
-
return (jsx$1(Container$
|
|
18918
|
+
return (jsx$1(Container$I, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
18919
18919
|
};
|
|
18920
|
-
var templateObject_1$
|
|
18920
|
+
var templateObject_1$X;
|
|
18921
18921
|
|
|
18922
|
-
var Container$
|
|
18922
|
+
var Container$H = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18923
18923
|
var IMAGE_WIDTH = '63px';
|
|
18924
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18925
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18924
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18925
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
18926
18926
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18927
18927
|
}), IMAGE_WIDTH);
|
|
18928
18928
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18945,7 +18945,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18945
18945
|
margin: margin,
|
|
18946
18946
|
});
|
|
18947
18947
|
});
|
|
18948
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18948
|
+
var PriceContainer = newStyled.div(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
18949
18949
|
var withTag = _a.withTag; _a.theme;
|
|
18950
18950
|
return withTag
|
|
18951
18951
|
? mediaQueries({
|
|
@@ -18954,9 +18954,9 @@ var PriceContainer = newStyled.div(templateObject_4$v || (templateObject_4$v = _
|
|
|
18954
18954
|
})
|
|
18955
18955
|
: 'justify-content: end';
|
|
18956
18956
|
});
|
|
18957
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18958
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18959
|
-
var Gift = newStyled.span(templateObject_7$
|
|
18957
|
+
var Quantity = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
18958
|
+
var StyledSpan = newStyled.span(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18959
|
+
var Gift = newStyled.span(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"], ["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"])), function (_a) {
|
|
18960
18960
|
var theme = _a.theme;
|
|
18961
18961
|
return theme.colors.semantic.urgent.color;
|
|
18962
18962
|
});
|
|
@@ -18964,9 +18964,9 @@ var SimpleOrderItem = function (_a) {
|
|
|
18964
18964
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18965
18965
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, midElement = _a.midElement, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle, isGift = _a.isGift;
|
|
18966
18966
|
var theme = useTheme();
|
|
18967
|
-
return (jsxs$1(Container$
|
|
18967
|
+
return (jsxs$1(Container$H, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsx$1(Gift, { children: "Limited Time Only" }, void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
18968
18968
|
};
|
|
18969
|
-
var templateObject_1$
|
|
18969
|
+
var templateObject_1$W, templateObject_2$I, templateObject_3$F, templateObject_4$w, templateObject_5$q, templateObject_6$m, templateObject_7$k;
|
|
18970
18970
|
|
|
18971
18971
|
var P$1 = newStyled.p(function (_a) {
|
|
18972
18972
|
var color = _a.color;
|
|
@@ -18980,7 +18980,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18980
18980
|
margin: '0.938rem 4.188rem',
|
|
18981
18981
|
});
|
|
18982
18982
|
});
|
|
18983
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18983
|
+
var Bar = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18984
18984
|
var height = _a.height;
|
|
18985
18985
|
return height || '0.5rem';
|
|
18986
18986
|
}, function (_a) {
|
|
@@ -19009,7 +19009,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
19009
19009
|
position: 'absolute',
|
|
19010
19010
|
});
|
|
19011
19011
|
});
|
|
19012
|
-
var Container$
|
|
19012
|
+
var Container$G = newStyled.div(function (_a) {
|
|
19013
19013
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
19014
19014
|
return ({
|
|
19015
19015
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -19023,14 +19023,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
19023
19023
|
var ProgressBar = function (_a) {
|
|
19024
19024
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
19025
19025
|
var theme = useTheme();
|
|
19026
|
-
return (jsxs$1(Container$
|
|
19026
|
+
return (jsxs$1(Container$G, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
19027
19027
|
};
|
|
19028
|
-
var templateObject_1$
|
|
19028
|
+
var templateObject_1$V;
|
|
19029
19029
|
|
|
19030
|
-
var Container$
|
|
19031
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19032
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19033
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19030
|
+
var Container$F = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
19031
|
+
var Item$1 = newStyled.span(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
19032
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
19033
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
19034
19034
|
var QuantityPicker = function (_a) {
|
|
19035
19035
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
19036
19036
|
var theme = useTheme();
|
|
@@ -19053,9 +19053,9 @@ var QuantityPicker = function (_a) {
|
|
|
19053
19053
|
return clamp(value);
|
|
19054
19054
|
});
|
|
19055
19055
|
}, [value, clamp]);
|
|
19056
|
-
return (jsxs$1(Container$
|
|
19056
|
+
return (jsxs$1(Container$F, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19057
19057
|
};
|
|
19058
|
-
var templateObject_1$
|
|
19058
|
+
var templateObject_1$U, templateObject_2$H, templateObject_3$E, templateObject_4$v;
|
|
19059
19059
|
|
|
19060
19060
|
/* base styles & size variants */
|
|
19061
19061
|
var CustomRadioStyles$1 = {
|
|
@@ -19124,9 +19124,9 @@ var ContainerStyles$1 = {
|
|
|
19124
19124
|
},
|
|
19125
19125
|
};
|
|
19126
19126
|
|
|
19127
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19128
|
-
var Container$
|
|
19129
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19127
|
+
var Wrapper$3 = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19128
|
+
var Container$E = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19129
|
+
var Input$2 = newStyled.input(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19130
19130
|
var disabled = _a.disabled;
|
|
19131
19131
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19132
19132
|
});
|
|
@@ -19134,7 +19134,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19134
19134
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19135
19135
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19136
19136
|
]; });
|
|
19137
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19137
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
19138
19138
|
var RadioPrimary = function (_a) {
|
|
19139
19139
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
19140
19140
|
var theme = useTheme();
|
|
@@ -19142,9 +19142,9 @@ var RadioPrimary = function (_a) {
|
|
|
19142
19142
|
var value = event.currentTarget.value;
|
|
19143
19143
|
onChange({ value: value, label: label });
|
|
19144
19144
|
};
|
|
19145
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
19145
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$E, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19146
19146
|
};
|
|
19147
|
-
var templateObject_1$
|
|
19147
|
+
var templateObject_1$T, templateObject_2$G, templateObject_3$D;
|
|
19148
19148
|
|
|
19149
19149
|
var RadioGroupInput = function (_a) {
|
|
19150
19150
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19223,9 +19223,9 @@ var ContainerStyles = {
|
|
|
19223
19223
|
},
|
|
19224
19224
|
};
|
|
19225
19225
|
|
|
19226
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19227
|
-
var Container$
|
|
19228
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19226
|
+
var Wrapper$2 = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
19227
|
+
var Container$D = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19228
|
+
var Input$1 = newStyled.input(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19229
19229
|
var disabled = _a.disabled;
|
|
19230
19230
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19231
19231
|
});
|
|
@@ -19233,7 +19233,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19233
19233
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19234
19234
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19235
19235
|
]; });
|
|
19236
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19236
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19237
19237
|
var theme = _a.theme;
|
|
19238
19238
|
return theme.component.radio.textSize;
|
|
19239
19239
|
}, function (_a) {
|
|
@@ -19247,9 +19247,9 @@ var ClubRadioInput = function (_a) {
|
|
|
19247
19247
|
var value = event.currentTarget.value;
|
|
19248
19248
|
onChange({ value: value, label: label });
|
|
19249
19249
|
};
|
|
19250
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
19250
|
+
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$D, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19251
19251
|
};
|
|
19252
|
-
var templateObject_1$
|
|
19252
|
+
var templateObject_1$S, templateObject_2$F, templateObject_3$C;
|
|
19253
19253
|
|
|
19254
19254
|
var ClubRadioGroupInput = function (_a) {
|
|
19255
19255
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19277,14 +19277,14 @@ function formatDate(date, format) {
|
|
|
19277
19277
|
}
|
|
19278
19278
|
}
|
|
19279
19279
|
|
|
19280
|
-
var Container$
|
|
19281
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19282
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19283
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19284
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19285
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19286
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19287
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
19280
|
+
var Container$C = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
19281
|
+
var Content$1 = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
19282
|
+
var StarsContent = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19283
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
19284
|
+
var DateText$1 = newStyled.span(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
19285
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
19286
|
+
var VerifiedText = newStyled.h1(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
19287
|
+
var ReviewTitle$1 = newStyled.h2(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
19288
19288
|
var ReviewDescription = newStyled.div(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
19289
19289
|
var ImageContainer$2 = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
19290
19290
|
var ImageWrapper$3 = newStyled(Image$3)(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
@@ -19315,21 +19315,21 @@ var Review$1 = function (_a) {
|
|
|
19315
19315
|
}
|
|
19316
19316
|
}
|
|
19317
19317
|
}, [opened]);
|
|
19318
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
19318
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$C, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19319
19319
|
(!isVideo ? (jsx$1(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19320
19320
|
};
|
|
19321
|
-
var templateObject_1$
|
|
19321
|
+
var templateObject_1$R, templateObject_2$E, templateObject_3$B, templateObject_4$u, templateObject_5$p, templateObject_6$l, templateObject_7$j, templateObject_8$e, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19322
19322
|
|
|
19323
19323
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19324
19324
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19325
|
-
var Container$
|
|
19326
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19327
|
-
var Content = newStyled.div(templateObject_3$
|
|
19328
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19329
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19330
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19331
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19332
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
19325
|
+
var Container$B = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
19326
|
+
var Heading = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19327
|
+
var Content = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19328
|
+
var ReviewContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19329
|
+
var DateText = newStyled.span(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19330
|
+
var VariantText = newStyled.div(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19331
|
+
var ReviewerName = newStyled.h2(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
19332
|
+
var ReviewTitle = newStyled.h3(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19333
19333
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
19334
19334
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
19335
19335
|
var ImagesContainer = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
@@ -19364,7 +19364,7 @@ var Review = function (_a) {
|
|
|
19364
19364
|
});
|
|
19365
19365
|
};
|
|
19366
19366
|
}, [randomId]);
|
|
19367
|
-
return (jsxs$1(Container$
|
|
19367
|
+
return (jsxs$1(Container$B, { children: [jsxs$1(Heading, { children: [jsx$1(ReviewerName, { children: reviewerName }, void 0), jsx$1(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
19368
19368
|
__html: showMoreMobile
|
|
19369
19369
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19370
19370
|
: description,
|
|
@@ -19374,15 +19374,15 @@ var Review = function (_a) {
|
|
|
19374
19374
|
: description,
|
|
19375
19375
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19376
19376
|
};
|
|
19377
|
-
var templateObject_1$
|
|
19378
|
-
|
|
19379
|
-
var Container$
|
|
19380
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19381
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19382
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19383
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19384
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19385
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
19377
|
+
var templateObject_1$Q, templateObject_2$D, templateObject_3$A, templateObject_4$t, templateObject_5$o, templateObject_6$k, templateObject_7$i, templateObject_8$d, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19378
|
+
|
|
19379
|
+
var Container$A = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19380
|
+
var ReviewsContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
19381
|
+
var ReviewsCount = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
19382
|
+
var ReviewsStars = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
19383
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
19384
|
+
var ReviewsImages = newStyled.div(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
19385
|
+
var SummaryItem = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
19386
19386
|
var backgroundUrl = _a.backgroundUrl;
|
|
19387
19387
|
return "url(".concat(backgroundUrl, ")");
|
|
19388
19388
|
});
|
|
@@ -19390,25 +19390,25 @@ var ReviewsHeader = function (_a) {
|
|
|
19390
19390
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
19391
19391
|
var starsNumber = 5;
|
|
19392
19392
|
var theme = useTheme();
|
|
19393
|
-
return (jsxs$1(Container$
|
|
19393
|
+
return (jsxs$1(Container$A, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19394
19394
|
};
|
|
19395
|
-
var templateObject_1$
|
|
19395
|
+
var templateObject_1$P, templateObject_2$C, templateObject_3$z, templateObject_4$s, templateObject_5$n, templateObject_6$j, templateObject_7$h;
|
|
19396
19396
|
|
|
19397
|
-
var Container$
|
|
19398
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
19397
|
+
var Container$z = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19398
|
+
var Text$1 = newStyled.p(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
19399
19399
|
var ScrollToTop = function (_a) {
|
|
19400
19400
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19401
19401
|
var theme = useTheme();
|
|
19402
19402
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19403
|
-
return (jsxs$1(Container$
|
|
19403
|
+
return (jsxs$1(Container$z, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19404
19404
|
};
|
|
19405
|
-
var templateObject_1$
|
|
19405
|
+
var templateObject_1$O, templateObject_2$B;
|
|
19406
19406
|
|
|
19407
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19407
|
+
var Button$5 = newStyled.button(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"])), mediaQueries({
|
|
19408
19408
|
right: ['1rem', '7.75rem'],
|
|
19409
19409
|
top: ['0.75rem', '0.75rem'],
|
|
19410
19410
|
}));
|
|
19411
|
-
var templateObject_1$
|
|
19411
|
+
var templateObject_1$N;
|
|
19412
19412
|
|
|
19413
19413
|
var ClearButton = function (_a) {
|
|
19414
19414
|
var onClick = _a.onClick;
|
|
@@ -19416,7 +19416,7 @@ var ClearButton = function (_a) {
|
|
|
19416
19416
|
return (jsx$1(Button$5, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19417
19417
|
};
|
|
19418
19418
|
|
|
19419
|
-
var Container$
|
|
19419
|
+
var Container$y = newStyled.div({
|
|
19420
19420
|
display: 'flex',
|
|
19421
19421
|
justifyContent: 'center',
|
|
19422
19422
|
padding: '1rem',
|
|
@@ -19424,10 +19424,10 @@ var Container$x = newStyled.div({
|
|
|
19424
19424
|
|
|
19425
19425
|
var Footer = function (_a) {
|
|
19426
19426
|
var text = _a.text, onClick = _a.onClick;
|
|
19427
|
-
return (jsx$1(Container$
|
|
19427
|
+
return (jsx$1(Container$y, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19428
19428
|
};
|
|
19429
19429
|
|
|
19430
|
-
var Container$
|
|
19430
|
+
var Container$x = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", "\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", "\n"])), mediaQueries({
|
|
19431
19431
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19432
19432
|
}));
|
|
19433
19433
|
var Description = newStyled.div({
|
|
@@ -19441,20 +19441,20 @@ var Description = newStyled.div({
|
|
|
19441
19441
|
textAlign: 'start',
|
|
19442
19442
|
},
|
|
19443
19443
|
});
|
|
19444
|
-
var templateObject_1$
|
|
19444
|
+
var templateObject_1$M;
|
|
19445
19445
|
|
|
19446
19446
|
var ProductItem = function (_a) {
|
|
19447
19447
|
var _b;
|
|
19448
19448
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19449
19449
|
var theme = useTheme();
|
|
19450
|
-
return (jsxs$1(Container$
|
|
19450
|
+
return (jsxs$1(Container$x, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: title, width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, { variant: "body", weight: "regular", size: "regular", testId: "search-product-title", dangerouslySetInnerHTML: { __html: title } }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, color: (_b = theme.colors.pallete.brickRed) === null || _b === void 0 ? void 0 : _b.color, size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19451
19451
|
};
|
|
19452
19452
|
|
|
19453
19453
|
var OptionsList = newStyled.ul({
|
|
19454
19454
|
margin: '0px',
|
|
19455
19455
|
padding: '0px',
|
|
19456
19456
|
});
|
|
19457
|
-
var OptionItem = newStyled.li(templateObject_1$
|
|
19457
|
+
var OptionItem = newStyled.li(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", "\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", "\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
19458
19458
|
padding: [0, '0rem 1rem'],
|
|
19459
19459
|
borderRadius: [0, '0.5rem'],
|
|
19460
19460
|
}));
|
|
@@ -19466,20 +19466,20 @@ var Anchor = newStyled.a({
|
|
|
19466
19466
|
padding: 0,
|
|
19467
19467
|
textDecoration: 'none',
|
|
19468
19468
|
});
|
|
19469
|
-
var Container$
|
|
19469
|
+
var Container$w = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", "\n"])), mediaQueries({
|
|
19470
19470
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19471
19471
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19472
19472
|
borderRadius: ['0', '0.5rem'],
|
|
19473
19473
|
}));
|
|
19474
|
-
var Header$2 = newStyled.div(templateObject_3$
|
|
19474
|
+
var Header$2 = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mediaQueries({
|
|
19475
19475
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19476
19476
|
}));
|
|
19477
|
-
var templateObject_1$
|
|
19477
|
+
var templateObject_1$L, templateObject_2$A, templateObject_3$y;
|
|
19478
19478
|
|
|
19479
19479
|
var ResultsPanel = function (_a) {
|
|
19480
19480
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19481
19481
|
var theme = useTheme();
|
|
19482
|
-
return (jsxs$1(Container$
|
|
19482
|
+
return (jsxs$1(Container$w, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$2, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(OptionsList, { children: options.map(function (_a) {
|
|
19483
19483
|
var optionUrl = _a.optionUrl, price = _a.price, src = _a.src, title = _a.title;
|
|
19484
19484
|
return (jsx$1(OptionItem, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: optionUrl }, { children: jsx$1(ProductItem, { src: src, title: title, price: price }, void 0) }), void 0) }), title));
|
|
19485
19485
|
}) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
@@ -19493,8 +19493,8 @@ var SearchIconContainer = newStyled.div({
|
|
|
19493
19493
|
background: 'white',
|
|
19494
19494
|
alignSelf: 'center',
|
|
19495
19495
|
});
|
|
19496
|
-
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19497
|
-
var templateObject_1$
|
|
19496
|
+
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19497
|
+
var templateObject_1$K;
|
|
19498
19498
|
|
|
19499
19499
|
var SearchControl = function (_a) {
|
|
19500
19500
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
@@ -19540,7 +19540,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19540
19540
|
},
|
|
19541
19541
|
},
|
|
19542
19542
|
}); });
|
|
19543
|
-
var Container$
|
|
19543
|
+
var Container$v = newStyled.div({
|
|
19544
19544
|
position: 'relative',
|
|
19545
19545
|
display: 'flex',
|
|
19546
19546
|
});
|
|
@@ -19595,7 +19595,7 @@ var SearchBar = function (_a) {
|
|
|
19595
19595
|
if (e.cancelable) {
|
|
19596
19596
|
e.preventDefault();
|
|
19597
19597
|
}
|
|
19598
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
19598
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$v, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
19599
19599
|
if (e.key === 'Enter') {
|
|
19600
19600
|
if (e.cancelable) {
|
|
19601
19601
|
e.preventDefault();
|
|
@@ -19606,21 +19606,21 @@ var SearchBar = function (_a) {
|
|
|
19606
19606
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19607
19607
|
};
|
|
19608
19608
|
|
|
19609
|
-
var Container$
|
|
19610
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19611
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19612
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19613
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19614
|
-
var templateObject_1$
|
|
19609
|
+
var Container$u = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19610
|
+
var BackArrow = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19611
|
+
var BoldSpan = newStyled.span(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19612
|
+
var NormalSpan = newStyled.span(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19613
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19614
|
+
var templateObject_1$J, templateObject_2$z, templateObject_3$x, templateObject_4$r, templateObject_5$m;
|
|
19615
19615
|
|
|
19616
19616
|
var SearchNavigation = function (_a) {
|
|
19617
19617
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19618
|
-
return (jsxs$1(Container$
|
|
19618
|
+
return (jsxs$1(Container$u, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction, testId: "breadcrumb-search-returnText" }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19619
19619
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, __assign$1({ "data-testid": "breadcrumb-search-step-".concat(index) }, { children: step }), step)) : (jsx$1(NormalSpan, __assign$1({ "data-testid": "breadcrumb-search-step-".concat(index) }, { children: "".concat(step, " / ") }), step));
|
|
19620
19620
|
}) }, void 0)] }, void 0));
|
|
19621
19621
|
};
|
|
19622
19622
|
|
|
19623
|
-
var Container$
|
|
19623
|
+
var Container$t = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19624
19624
|
var alignCenter = _a.alignCenter;
|
|
19625
19625
|
return alignCenter &&
|
|
19626
19626
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19630,26 +19630,26 @@ var Container$s = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
|
|
|
19630
19630
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19631
19631
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19632
19632
|
});
|
|
19633
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19634
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19633
|
+
var TitleText = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19634
|
+
var BannerText = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19635
19635
|
var ShortBanner = function (_a) {
|
|
19636
19636
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19637
19637
|
var theme = useTheme();
|
|
19638
|
-
return (jsxs$1(Container$
|
|
19638
|
+
return (jsxs$1(Container$t, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19639
19639
|
};
|
|
19640
|
-
var templateObject_1$
|
|
19641
|
-
|
|
19642
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19643
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19644
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19645
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19646
|
-
var TopLabel$1 = newStyled(Label$2)(templateObject_5$
|
|
19647
|
-
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$
|
|
19648
|
-
var Container$
|
|
19649
|
-
var LabelText$1 = newStyled('span')(templateObject_8$
|
|
19640
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$w;
|
|
19641
|
+
|
|
19642
|
+
var TableElement$3 = newStyled.table(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19643
|
+
var TableCell$3 = newStyled.td(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19644
|
+
var TableHead$3 = newStyled.th(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19645
|
+
var Label$2 = newStyled('div')(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19646
|
+
var TopLabel$1 = newStyled(Label$2)(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19647
|
+
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19648
|
+
var Container$s = newStyled('div')(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19649
|
+
var LabelText$1 = newStyled('span')(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19650
19650
|
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19651
19651
|
var TableRow$3 = newStyled.tr(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19652
|
-
var templateObject_1$
|
|
19652
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$v, templateObject_4$q, templateObject_5$l, templateObject_6$i, templateObject_7$g, templateObject_8$c, templateObject_9$7, templateObject_10$6;
|
|
19653
19653
|
|
|
19654
19654
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19655
19655
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19685,21 +19685,21 @@ var SizeChartTable = function (_a) {
|
|
|
19685
19685
|
var theme = useTheme();
|
|
19686
19686
|
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
19687
19687
|
var isMultilabel = xLabel && yLabel;
|
|
19688
|
-
return (jsxs$1(Container$
|
|
19688
|
+
return (jsxs$1(Container$s, { children: [isMultilabel && (jsxs$1(LeftLabel$1, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText$1, { children: xLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(Column$2, { children: [isMultilabel && (jsxs$1(TopLabel$1, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText$1, { children: yLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement$3, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow$3, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$3, __assign$1({ style: {
|
|
19689
19689
|
backgroundColor: getCellColor$2(index, cell),
|
|
19690
19690
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$3, __assign$1({ className: getIsOdd$2(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19691
19691
|
};
|
|
19692
19692
|
|
|
19693
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19694
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19695
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19696
|
-
var TableRow$2 = newStyled.tr(templateObject_4$
|
|
19693
|
+
var TableElement$2 = newStyled.table(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19694
|
+
var TableCell$2 = newStyled.td(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19695
|
+
var TableHead$2 = newStyled.th(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19696
|
+
var TableRow$2 = newStyled.tr(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19697
19697
|
var SizeTable = function (_a) {
|
|
19698
19698
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19699
19699
|
var theme = useTheme();
|
|
19700
19700
|
return (jsxs$1(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19701
19701
|
};
|
|
19702
|
-
var templateObject_1$
|
|
19702
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$u, templateObject_4$p;
|
|
19703
19703
|
|
|
19704
19704
|
var getStylesBySize$7 = function (size) {
|
|
19705
19705
|
switch (size) {
|
|
@@ -19726,7 +19726,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19726
19726
|
} });
|
|
19727
19727
|
};
|
|
19728
19728
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19729
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19729
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19730
19730
|
};
|
|
19731
19731
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19732
19732
|
if (disabled)
|
|
@@ -19742,23 +19742,23 @@ var TextButton = function (_a) {
|
|
|
19742
19742
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19743
19743
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase, testId: testId }, { children: text }), void 0));
|
|
19744
19744
|
};
|
|
19745
|
-
var templateObject_1$
|
|
19745
|
+
var templateObject_1$F;
|
|
19746
19746
|
|
|
19747
|
-
var Container$
|
|
19748
|
-
var P = newStyled.p(templateObject_2$
|
|
19749
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19747
|
+
var Container$r = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19748
|
+
var P = newStyled.p(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n margin: 0 0 0 10px;\n"], ["\n margin: 0 0 0 10px;\n"])));
|
|
19749
|
+
var PercentageSpan = newStyled.span(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19750
19750
|
var SizeFitGuide = function (_a) {
|
|
19751
19751
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19752
|
-
return (jsxs$1(Container$
|
|
19752
|
+
return (jsxs$1(Container$r, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19753
19753
|
};
|
|
19754
|
-
var templateObject_1$
|
|
19754
|
+
var templateObject_1$E, templateObject_2$v, templateObject_3$t;
|
|
19755
19755
|
|
|
19756
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19756
|
+
var ButtonsContainer = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19757
19757
|
var inline = _a.inline;
|
|
19758
19758
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19759
19759
|
});
|
|
19760
|
-
var Row = newStyled.div(templateObject_2$
|
|
19761
|
-
var templateObject_1$
|
|
19760
|
+
var Row = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19761
|
+
var templateObject_1$D, templateObject_2$u;
|
|
19762
19762
|
|
|
19763
19763
|
var SizeSelector = function (_a) {
|
|
19764
19764
|
var _b;
|
|
@@ -19780,7 +19780,7 @@ var SizeSelector = function (_a) {
|
|
|
19780
19780
|
}) }), void 0)] }), void 0));
|
|
19781
19781
|
};
|
|
19782
19782
|
|
|
19783
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19783
|
+
var TabContainer = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19784
19784
|
var titleSize = _a.titleSize;
|
|
19785
19785
|
return titleSize;
|
|
19786
19786
|
}, function (_a) {
|
|
@@ -19797,18 +19797,18 @@ var Tab = function (_a) {
|
|
|
19797
19797
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19798
19798
|
return (jsx$1(Fragment$2, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19799
19799
|
};
|
|
19800
|
-
var templateObject_1$
|
|
19800
|
+
var templateObject_1$C;
|
|
19801
19801
|
|
|
19802
|
-
var Container$
|
|
19803
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19802
|
+
var Container$q = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19803
|
+
var TabList = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19804
19804
|
var backgroundColor = _a.backgroundColor;
|
|
19805
19805
|
return backgroundColor;
|
|
19806
19806
|
}, function (_a) {
|
|
19807
19807
|
var borderColor = _a.borderColor;
|
|
19808
19808
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19809
19809
|
});
|
|
19810
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19811
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19810
|
+
var TabContent = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19811
|
+
var TabSeparator = newStyled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19812
19812
|
var Tabs = function (_a) {
|
|
19813
19813
|
var _b;
|
|
19814
19814
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -19817,16 +19817,16 @@ var Tabs = function (_a) {
|
|
|
19817
19817
|
return null;
|
|
19818
19818
|
}
|
|
19819
19819
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19820
|
-
return (jsxs$1(Container$
|
|
19820
|
+
return (jsxs$1(Container$q, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19821
19821
|
};
|
|
19822
|
-
var templateObject_1$
|
|
19822
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$s, templateObject_4$o;
|
|
19823
19823
|
|
|
19824
|
-
var Container$
|
|
19824
|
+
var Container$p = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19825
19825
|
var Tag = function (_a) {
|
|
19826
19826
|
var text = _a.text, className = _a.className;
|
|
19827
|
-
return jsx$1(Container$
|
|
19827
|
+
return jsx$1(Container$p, __assign$1({ className: className }, { children: text }), void 0);
|
|
19828
19828
|
};
|
|
19829
|
-
var templateObject_1$
|
|
19829
|
+
var templateObject_1$A;
|
|
19830
19830
|
|
|
19831
19831
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19832
19832
|
switch (size) {
|
|
@@ -19939,9 +19939,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19939
19939
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19940
19940
|
};
|
|
19941
19941
|
|
|
19942
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
19943
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
19944
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19942
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19943
|
+
var VideoOverlay$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19944
|
+
var FullscreenVideo = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19945
19945
|
var ImageVideo = function (_a) {
|
|
19946
19946
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19947
19947
|
var video = useRef(null);
|
|
@@ -19961,12 +19961,12 @@ var ImageVideo = function (_a) {
|
|
|
19961
19961
|
height: '100%',
|
|
19962
19962
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19963
19963
|
};
|
|
19964
|
-
var templateObject_1$
|
|
19964
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$r;
|
|
19965
19965
|
|
|
19966
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19967
|
-
var ContainerMobile = css(templateObject_2$
|
|
19968
|
-
var Container$
|
|
19969
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19966
|
+
var ContainerDesktop = css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19967
|
+
var ContainerMobile = css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19968
|
+
var Container$o = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19969
|
+
var TextContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
19970
19970
|
var TextWithImage = function (_a) {
|
|
19971
19971
|
var _b, _c, _d, _e;
|
|
19972
19972
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -19986,7 +19986,7 @@ var TextWithImage = function (_a) {
|
|
|
19986
19986
|
// @ts-ignore
|
|
19987
19987
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19988
19988
|
};
|
|
19989
|
-
return (jsxs(Container$
|
|
19989
|
+
return (jsxs(Container$o, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile, onClick: buttonAction, testId: buttomText, css: {
|
|
19990
19990
|
backgroundColor: props.btnBGColor,
|
|
19991
19991
|
color: '#ffffff',
|
|
19992
19992
|
border: props.btnBGColor,
|
|
@@ -19996,18 +19996,18 @@ var TextWithImage = function (_a) {
|
|
|
19996
19996
|
},
|
|
19997
19997
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19998
19998
|
};
|
|
19999
|
-
var templateObject_1$
|
|
19999
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$q, templateObject_4$n;
|
|
20000
20000
|
|
|
20001
20001
|
var slideInAnimation = function (distanceFromTop) {
|
|
20002
20002
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20003
|
-
return keyframes(templateObject_1$
|
|
20003
|
+
return keyframes(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20004
20004
|
};
|
|
20005
20005
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20006
20006
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20007
|
-
return keyframes(templateObject_2$
|
|
20007
|
+
return keyframes(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20008
20008
|
};
|
|
20009
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20010
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20009
|
+
var ToastContainer = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"])));
|
|
20010
|
+
var ToastContent = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n position: fixed;\n top: ", ";\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"], ["\n position: fixed;\n top: ", ";\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"])), function (_a) {
|
|
20011
20011
|
var distanceFromTop = _a.distanceFromTop;
|
|
20012
20012
|
return distanceFromTop || '124px';
|
|
20013
20013
|
}, function (_a) {
|
|
@@ -20020,12 +20020,12 @@ var ToastContent = newStyled.div(templateObject_4$l || (templateObject_4$l = __m
|
|
|
20020
20020
|
var distanceFromTop = _a.distanceFromTop;
|
|
20021
20021
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20022
20022
|
});
|
|
20023
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20023
|
+
var ToastText = newStyled.p(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"], ["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"])), function (_a) {
|
|
20024
20024
|
var severity = _a.severity;
|
|
20025
20025
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20026
20026
|
});
|
|
20027
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
20028
|
-
var templateObject_1$
|
|
20027
|
+
var CloseIcon = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20028
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$p, templateObject_4$m, templateObject_5$k, templateObject_6$h;
|
|
20029
20029
|
|
|
20030
20030
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20031
20031
|
var _b;
|
|
@@ -20047,9 +20047,9 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
20047
20047
|
});
|
|
20048
20048
|
Toast.displayName = 'Toast';
|
|
20049
20049
|
|
|
20050
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20051
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20052
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20050
|
+
var Wrapper$1 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
20051
|
+
var GrandTotal = newStyled.h1(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
20052
|
+
var Currency = newStyled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
20053
20053
|
var theme = _a.theme;
|
|
20054
20054
|
return theme.component.total.basicTotal.currency.color;
|
|
20055
20055
|
}, function (_a) {
|
|
@@ -20062,41 +20062,41 @@ var Currency = newStyled.span(templateObject_3$n || (templateObject_3$n = __make
|
|
|
20062
20062
|
var theme = _a.theme;
|
|
20063
20063
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20064
20064
|
});
|
|
20065
|
-
var Container$
|
|
20065
|
+
var Container$n = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
20066
20066
|
var highlightColor = _a.highlightColor;
|
|
20067
20067
|
return highlightColor;
|
|
20068
20068
|
});
|
|
20069
|
-
var TotalContainer = newStyled(Container$
|
|
20069
|
+
var TotalContainer = newStyled(Container$n)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20070
20070
|
var showTotalLabel = _a.showTotalLabel;
|
|
20071
20071
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20072
20072
|
});
|
|
20073
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20074
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
20073
|
+
var DiscountText = newStyled.h3(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
20074
|
+
var DiscountAmount = newStyled.h3(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
20075
20075
|
var theme = _a.theme;
|
|
20076
20076
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20077
20077
|
});
|
|
20078
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
20079
|
-
var templateObject_1$
|
|
20078
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20079
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$l, templateObject_5$j, templateObject_6$g, templateObject_7$f, templateObject_8$b;
|
|
20080
20080
|
|
|
20081
20081
|
var Total = function (_a) {
|
|
20082
20082
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
20083
20083
|
var theme = useTheme();
|
|
20084
|
-
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$
|
|
20084
|
+
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$n, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20085
20085
|
};
|
|
20086
20086
|
|
|
20087
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20087
|
+
var Wrapper = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20088
20088
|
var color = _a.color;
|
|
20089
20089
|
return color;
|
|
20090
20090
|
});
|
|
20091
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20092
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20091
|
+
var ItemContainer = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
20092
|
+
var Item = newStyled.h4(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
20093
20093
|
var theme = _a.theme;
|
|
20094
20094
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20095
20095
|
}, function (_a) {
|
|
20096
20096
|
var theme = _a.theme;
|
|
20097
20097
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20098
20098
|
});
|
|
20099
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20099
|
+
var CouponItem = newStyled(Item)(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20100
20100
|
var color = _a.color;
|
|
20101
20101
|
return color;
|
|
20102
20102
|
});
|
|
@@ -20109,27 +20109,27 @@ var Subtotal = function (_a) {
|
|
|
20109
20109
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20110
20110
|
})] }), void 0));
|
|
20111
20111
|
};
|
|
20112
|
-
var templateObject_1$
|
|
20112
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$k;
|
|
20113
20113
|
|
|
20114
20114
|
var Totals = {
|
|
20115
20115
|
Total: Total,
|
|
20116
20116
|
Subtotal: Subtotal,
|
|
20117
20117
|
};
|
|
20118
20118
|
|
|
20119
|
-
var Container$
|
|
20120
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20121
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20122
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20123
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20124
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
20119
|
+
var Container$m = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20120
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20121
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20122
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20123
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
20124
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
20125
20125
|
return props.finishedTrack
|
|
20126
20126
|
? props.finishedTrackColor
|
|
20127
20127
|
: props.activeTrack
|
|
20128
20128
|
? props.activeTrackColor
|
|
20129
20129
|
: '';
|
|
20130
20130
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
20131
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
20132
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$
|
|
20131
|
+
var CheckpointStatusMessage = newStyled.span(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"], ["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"])));
|
|
20132
|
+
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20133
20133
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20134
20134
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20135
20135
|
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
@@ -20157,7 +20157,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20157
20157
|
}
|
|
20158
20158
|
return '30px';
|
|
20159
20159
|
};
|
|
20160
|
-
return (jsxs$1(Container$
|
|
20160
|
+
return (jsxs$1(Container$m, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20161
20161
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20162
20162
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsx$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxs$1(Fragment$2, { children: [jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
20163
20163
|
? activeCheckpointColor
|
|
@@ -20168,18 +20168,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20168
20168
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20169
20169
|
})] }), void 0));
|
|
20170
20170
|
};
|
|
20171
|
-
var templateObject_1$
|
|
20172
|
-
|
|
20173
|
-
var Container$
|
|
20174
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20175
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20176
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20177
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20178
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
20171
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$m, templateObject_4$j, templateObject_5$i, templateObject_6$f, templateObject_7$e, templateObject_8$a, templateObject_9$6, templateObject_10$5, templateObject_11$3;
|
|
20172
|
+
|
|
20173
|
+
var Container$l = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20174
|
+
var CheckpointContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20175
|
+
var CheckpointDate = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20176
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20177
|
+
var CheckpointStatus = newStyled.p(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
20178
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20179
20179
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20180
20180
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20181
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
20182
|
-
var LastCheckpointTrack = newStyled.div(templateObject_8$
|
|
20181
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
20182
|
+
var LastCheckpointTrack = newStyled.div(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
20183
20183
|
var TrackingProgress = function (_a) {
|
|
20184
20184
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
20185
20185
|
var theme = useTheme();
|
|
@@ -20199,7 +20199,7 @@ var TrackingProgress = function (_a) {
|
|
|
20199
20199
|
}
|
|
20200
20200
|
return '30px';
|
|
20201
20201
|
};
|
|
20202
|
-
return (jsxs$1(Container$
|
|
20202
|
+
return (jsxs$1(Container$l, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20203
20203
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20204
20204
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
20205
20205
|
? theme.colors.semantic.informative.color
|
|
@@ -20208,19 +20208,19 @@ var TrackingProgress = function (_a) {
|
|
|
20208
20208
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20209
20209
|
})] }), void 0));
|
|
20210
20210
|
};
|
|
20211
|
-
var templateObject_1$
|
|
20211
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$l, templateObject_4$i, templateObject_5$h, templateObject_6$e, templateObject_7$d, templateObject_8$9;
|
|
20212
20212
|
|
|
20213
|
-
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20213
|
+
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20214
20214
|
var checked = _a.checked;
|
|
20215
20215
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20216
20216
|
});
|
|
20217
|
-
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$
|
|
20218
|
-
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$
|
|
20219
|
-
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$
|
|
20220
|
-
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$
|
|
20221
|
-
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$
|
|
20222
|
-
var CheckboxInput = newStyled.input(templateObject_7$
|
|
20223
|
-
var templateObject_1$
|
|
20217
|
+
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"])));
|
|
20218
|
+
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20219
|
+
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20220
|
+
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20221
|
+
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20222
|
+
var CheckboxInput = newStyled.input(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20223
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$k, templateObject_4$h, templateObject_5$g, templateObject_6$d, templateObject_7$c;
|
|
20224
20224
|
|
|
20225
20225
|
function AutoshipOfferCard(_a) {
|
|
20226
20226
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20244,18 +20244,18 @@ function AutoshipOfferCard(_a) {
|
|
|
20244
20244
|
return (jsxs$1(AutoShipCardContainerWrapper$1, __assign$1({ checked: check }, { children: [jsxs$1(AutoShipHeaderBarWrapper$1, { children: [jsx$1("div", { children: jsx$1(CheckboxInput, { type: "checkbox", onChange: handleCheckBox, checked: check, "data-testid": "autoshipcheckbox" }, void 0) }, void 0), jsx$1("div", { children: renderCopy(copy) }, void 0)] }, void 0), !check && (jsxs$1(AutoShipBodyWrapper$1, { children: [jsxs$1(AutoShipBodyTitle$1, __assign$1({ onClick: handleShowMore }, { children: [jsx$1("span", { children: showMoreBenefits ? renderCopy(showMore.openedCopy) : renderCopy(showMore.closedCopy) }, void 0), jsx$1(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0), showMoreBenefits && (jsx$1(AutoShipBodyListWrapper$1, { children: copyList.map(function (item) { return (jsxs$1(AutoShipBodyListItem$1, { children: [jsx$1(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), renderCopy(item.copy)] }, item.icon)); }) }, void 0))] }, void 0))] }), void 0));
|
|
20245
20245
|
}
|
|
20246
20246
|
|
|
20247
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
20247
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20248
20248
|
var checked = _a.checked;
|
|
20249
20249
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20250
20250
|
});
|
|
20251
|
-
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$
|
|
20252
|
-
var AutoShipBodyWrapper = newStyled.div(templateObject_3$
|
|
20253
|
-
var AutoShipBodyTitle = newStyled.div(templateObject_4$
|
|
20254
|
-
var AutoShipBodyListItem = newStyled.div(templateObject_5$
|
|
20255
|
-
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$
|
|
20256
|
-
newStyled.input(templateObject_7$
|
|
20257
|
-
var ButtonRemoveWrapper = newStyled.div(templateObject_8$
|
|
20258
|
-
var templateObject_1$
|
|
20251
|
+
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
20252
|
+
var AutoShipBodyWrapper = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20253
|
+
var AutoShipBodyTitle = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20254
|
+
var AutoShipBodyListItem = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20255
|
+
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20256
|
+
newStyled.input(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20257
|
+
var ButtonRemoveWrapper = newStyled.div(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"], ["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"])));
|
|
20258
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$j, templateObject_4$g, templateObject_5$f, templateObject_6$c, templateObject_7$b, templateObject_8$8;
|
|
20259
20259
|
|
|
20260
20260
|
function AutoshipOfferCardCta(_a) {
|
|
20261
20261
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, buttonCopy = _a.buttonCopy;
|
|
@@ -20273,6 +20273,28 @@ function AutoshipOfferCardCta(_a) {
|
|
|
20273
20273
|
return (jsxs$1(AutoShipCardContainerWrapper, __assign$1({ checked: check }, { children: [jsxs$1(AutoShipHeaderBarWrapper, { children: [jsx$1("div", { children: copy }, void 0), check && (jsx$1(ButtonRemoveWrapper, __assign$1({ tabIndex: 0, role: "button", onKeyDown: handleCheckBox, onClick: handleCheckBox }, { children: "Remove" }), void 0))] }, void 0), !check && (jsxs$1(Fragment$2, { children: [jsxs$1(AutoShipBodyWrapper, { children: [(showMore === null || showMore === void 0 ? void 0 : showMore.openedCopy) && (showMore === null || showMore === void 0 ? void 0 : showMore.closedCopy) && (jsxs$1(AutoShipBodyTitle, __assign$1({ onClick: handleShowMore }, { children: [jsx$1("span", { children: showMoreBenefits ? showMore.openedCopy : showMore.closedCopy }, void 0), jsx$1(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0)), showMoreBenefits && (jsx$1(AutoShipBodyListWrapper, { children: copyList.map(function (item) { return (jsxs$1(AutoShipBodyListItem, { children: [jsx$1(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), item.copy] }, item.icon)); }) }, void 0))] }, void 0), jsx$1("div", { children: jsx$1(ButtonSecondary, { onClick: handleCheckBox, text: buttonCopy, wide: true }, void 0) }, void 0)] }, void 0))] }), void 0));
|
|
20274
20274
|
}
|
|
20275
20275
|
|
|
20276
|
+
var ContainerBase$2 = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n border-radius: 8px;\n border-color: #e5e5e5;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n background-color: rgba(255, 243, 227, 0.3);\n"], ["\n border-radius: 8px;\n border-color: #e5e5e5;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n background-color: rgba(255, 243, 227, 0.3);\n"])));
|
|
20277
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n background-color: #fff3e34d;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n background-color: #fff3e34d;\n"])));
|
|
20278
|
+
var SubscriptionHeader$2 = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"], ["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"])));
|
|
20279
|
+
newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20280
|
+
newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
20281
|
+
newStyled(Text$7)(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20282
|
+
var Container$k = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20283
|
+
var Benefits$1 = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"])), function (_a) {
|
|
20284
|
+
var height = _a.height;
|
|
20285
|
+
return height !== null && height !== void 0 ? height : '100%';
|
|
20286
|
+
});
|
|
20287
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$i, templateObject_4$f, templateObject_5$e, templateObject_6$b, templateObject_7$a, templateObject_8$7;
|
|
20288
|
+
|
|
20289
|
+
var AutoshipPdpCard = function (_a) {
|
|
20290
|
+
var handleWithoutSavings = _a.handleWithoutSavings, handleSavings = _a.handleSavings, title = _a.title, ctaText = _a.ctaText, ctaTextNoSavings = _a.ctaTextNoSavings, className = _a.className, benefits = _a.benefits, bottomCopy = _a.bottomCopy;
|
|
20291
|
+
return (jsxs$1(Container$k, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$2, __assign$1({ "data-testid": "subscription-container" }, { children: [jsxs$1(SubscriptionHeader$2, { children: [jsx$1(Text$7, { variant: "label", dangerouslySetInnerHTML: { __html: title !== null && title !== void 0 ? title : '' } }, void 0), jsx$1(ButtonPrimary, { wide: true, text: ctaText !== null && ctaText !== void 0 ? ctaText : 'Yes, I want this offer', size: ComponentSize.Small, onClick: function () {
|
|
20292
|
+
handleSavings();
|
|
20293
|
+
} }, void 0)] }, void 0), jsxs$1(Benefits$1, __assign$1({ "data-testid": "benefits-component" }, { children: [jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0), bottomCopy && jsx$1(Text$7, { variant: "label", dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }), void 0)] }), void 0), jsx$1(ButtonSecondary, { wide: true, text: ctaTextNoSavings !== null && ctaTextNoSavings !== void 0 ? ctaTextNoSavings : 'Continue without more savings - ', size: ComponentSize.Small, onClick: function () {
|
|
20294
|
+
handleWithoutSavings();
|
|
20295
|
+
} }, void 0)] }), void 0));
|
|
20296
|
+
};
|
|
20297
|
+
|
|
20276
20298
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
20277
20299
|
background: props.bgColor,
|
|
20278
20300
|
height: '100%',
|
|
@@ -22206,5 +22228,5 @@ var SubscriptionPlanSelector = function (_a) {
|
|
|
22206
22228
|
}, useV2Style: true, checked: !radiosStatuses.oneTime.disabled && radiosStatuses.oneTime.checked, disabled: radiosStatuses.oneTime.disabled }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), disabled: radiosStatuses.oneTime.disabled, highlighted: !radiosStatuses.oneTime.disabled && radiosStatuses.oneTime.highlighted, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
22207
22229
|
};
|
|
22208
22230
|
|
|
22209
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$3 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HorizontalDivider, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, LikeButton, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartV2, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, benefits, benefitsRawHtml, benefitsRawHtmlV2, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, newStyled as styled, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
22231
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipPdpCard, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitsList, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CacheProvider, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$3 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HorizontalDivider, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, LikeButton, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartV2, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, SubscriptionPlanSelector, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, benefits, benefitsRawHtml, benefitsRawHtmlV2, buildImageUrl, componentSizeMapper, createCache, css, decimalFormat, formatPrice, getSrcSet, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, newStyled as styled, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
22210
22232
|
//# sourceMappingURL=index.esm.js.map
|