@trafilea/afrodita-components 6.45.5 → 6.46.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +20 -2
- package/build/index.esm.js +694 -669
- package/build/index.esm.js.map +1 -1
- package/build/index.js +694 -668
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.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,
|
|
@@ -4628,6 +4628,8 @@ var KlarnaLogo = function (props) { return jsx$1(Icon$1, __assign$1({}, props, {
|
|
|
4628
4628
|
|
|
4629
4629
|
var LightBulb = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/light_bulb" }), void 0); };
|
|
4630
4630
|
|
|
4631
|
+
var LoadingTrafisizy = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/loading_trafisizy" }), void 0); };
|
|
4632
|
+
|
|
4631
4633
|
var Minus = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/minus" }), void 0); };
|
|
4632
4634
|
|
|
4633
4635
|
var Moon = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/moon" }), void 0); };
|
|
@@ -4686,6 +4688,7 @@ var PDP = /*#__PURE__*/Object.freeze({
|
|
|
4686
4688
|
Hours: Hours,
|
|
4687
4689
|
KlarnaLogo: KlarnaLogo,
|
|
4688
4690
|
LightBulb: LightBulb,
|
|
4691
|
+
LoadingTrafisizy: LoadingTrafisizy,
|
|
4689
4692
|
Minus: Minus,
|
|
4690
4693
|
Moon: Moon,
|
|
4691
4694
|
NewClock: NewClock,
|
|
@@ -4813,14 +4816,14 @@ function jsxs(type, props, key) {
|
|
|
4813
4816
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4814
4817
|
// `variants` styles that are consistent through all themes.
|
|
4815
4818
|
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$
|
|
4819
|
+
hero1: newStyled.h1(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject([""], [""]))),
|
|
4820
|
+
hero2: newStyled.h2(templateObject_2$1D || (templateObject_2$1D = __makeTemplateObject([""], [""]))),
|
|
4821
|
+
hero3: newStyled.h3(templateObject_3$1h || (templateObject_3$1h = __makeTemplateObject([""], [""]))),
|
|
4822
|
+
display1: newStyled.h1(templateObject_4$11 || (templateObject_4$11 = __makeTemplateObject([""], [""]))),
|
|
4823
|
+
display2: newStyled.h2(templateObject_5$O || (templateObject_5$O = __makeTemplateObject([""], [""]))),
|
|
4824
|
+
display3: newStyled.h3(templateObject_6$G || (templateObject_6$G = __makeTemplateObject([""], [""]))),
|
|
4825
|
+
heading1: newStyled.h1(templateObject_7$x || (templateObject_7$x = __makeTemplateObject([""], [""]))),
|
|
4826
|
+
heading2: newStyled.h2(templateObject_8$q || (templateObject_8$q = __makeTemplateObject([""], [""]))),
|
|
4824
4827
|
heading3: newStyled.h3(templateObject_9$d || (templateObject_9$d = __makeTemplateObject([""], [""]))),
|
|
4825
4828
|
heading4: newStyled.h4(templateObject_10$c || (templateObject_10$c = __makeTemplateObject([""], [""]))),
|
|
4826
4829
|
heading5: newStyled.h5(templateObject_11$8 || (templateObject_11$8 = __makeTemplateObject([""], [""]))),
|
|
@@ -4953,17 +4956,17 @@ var DEFAULTS = {
|
|
|
4953
4956
|
size: 'regular',
|
|
4954
4957
|
},
|
|
4955
4958
|
};
|
|
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$
|
|
4959
|
+
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;
|
|
4960
|
+
|
|
4961
|
+
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"])));
|
|
4962
|
+
var Card$4 = newStyled.div(templateObject_2$1C || (templateObject_2$1C = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4963
|
+
var Tag$2 = newStyled.div(templateObject_3$1g || (templateObject_3$1g = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4964
|
+
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"])));
|
|
4965
|
+
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"])));
|
|
4966
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$F || (templateObject_6$F = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4964
4967
|
var PackSelectorV2 = function (_a) {
|
|
4965
4968
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4966
|
-
return (jsx$1(Container$
|
|
4969
|
+
return (jsx$1(Container$1n, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4967
4970
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4968
4971
|
}) }), void 0));
|
|
4969
4972
|
};
|
|
@@ -4985,27 +4988,27 @@ var PackCard$1 = function (_a) {
|
|
|
4985
4988
|
currency: currencyCode || 'USD',
|
|
4986
4989
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4987
4990
|
};
|
|
4988
|
-
var templateObject_1$
|
|
4991
|
+
var templateObject_1$2d, templateObject_2$1C, templateObject_3$1g, templateObject_4$10, templateObject_5$N, templateObject_6$F;
|
|
4989
4992
|
|
|
4990
|
-
var Container$
|
|
4991
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4993
|
+
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"])));
|
|
4994
|
+
var DropContainer = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4992
4995
|
var DropList = function (_a) {
|
|
4993
4996
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4994
|
-
return (jsx$1(Container$
|
|
4997
|
+
return (jsx$1(Container$1m, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4995
4998
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4996
4999
|
}) }, void 0));
|
|
4997
5000
|
};
|
|
4998
|
-
var templateObject_1$
|
|
5001
|
+
var templateObject_1$2c, templateObject_2$1B;
|
|
4999
5002
|
|
|
5000
5003
|
var DROPS_TOTAL = 5;
|
|
5001
|
-
var Container$
|
|
5002
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5003
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
5004
|
+
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"])));
|
|
5005
|
+
var Title$b = newStyled.p(templateObject_2$1A || (templateObject_2$1A = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
5006
|
+
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
5007
|
var AbsorbencyLevel = function (_a) {
|
|
5005
5008
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5006
|
-
return (jsxs$1(Container$
|
|
5009
|
+
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
5010
|
};
|
|
5008
|
-
var templateObject_1$
|
|
5011
|
+
var templateObject_1$2b, templateObject_2$1A, templateObject_3$1f;
|
|
5009
5012
|
|
|
5010
5013
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
5011
5014
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -5081,7 +5084,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5081
5084
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5082
5085
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5083
5086
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5084
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5087
|
+
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
5088
|
var Accordion$1 = function (_a) {
|
|
5086
5089
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, testId = _a.testId;
|
|
5087
5090
|
var theme = useTheme();
|
|
@@ -5105,9 +5108,9 @@ var Accordion$1 = function (_a) {
|
|
|
5105
5108
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5106
5109
|
} }), void 0));
|
|
5107
5110
|
};
|
|
5108
|
-
var templateObject_1$
|
|
5111
|
+
var templateObject_1$2a;
|
|
5109
5112
|
|
|
5110
|
-
var Container$
|
|
5113
|
+
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
5114
|
var AccordionOptions = function (_a) {
|
|
5112
5115
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5113
5116
|
var _b = useState({
|
|
@@ -5120,7 +5123,7 @@ var AccordionOptions = function (_a) {
|
|
|
5120
5123
|
}
|
|
5121
5124
|
return false;
|
|
5122
5125
|
};
|
|
5123
|
-
return (jsx$1(Container$
|
|
5126
|
+
return (jsx$1(Container$1k, { children: accordions.map(function (accordion, index) {
|
|
5124
5127
|
var forceOpenValue = getForceOpen(index);
|
|
5125
5128
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5126
5129
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5131,7 +5134,7 @@ var AccordionOptions = function (_a) {
|
|
|
5131
5134
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5132
5135
|
}) }, void 0));
|
|
5133
5136
|
};
|
|
5134
|
-
var templateObject_1$
|
|
5137
|
+
var templateObject_1$29;
|
|
5135
5138
|
|
|
5136
5139
|
/**
|
|
5137
5140
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5267,27 +5270,27 @@ var isValidDate = function (value) {
|
|
|
5267
5270
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5268
5271
|
};
|
|
5269
5272
|
|
|
5270
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5271
|
-
var FlexContainer$4 = newStyled.div(templateObject_2$
|
|
5272
|
-
var templateObject_1$
|
|
5273
|
+
var Bold = newStyled.span(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5274
|
+
var FlexContainer$4 = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
5275
|
+
var templateObject_1$28, templateObject_2$1z;
|
|
5273
5276
|
|
|
5274
|
-
var Container$
|
|
5277
|
+
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
5278
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5276
5279
|
return width;
|
|
5277
5280
|
}, function (_a) {
|
|
5278
5281
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5279
5282
|
return height;
|
|
5280
5283
|
});
|
|
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$
|
|
5284
|
+
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"])));
|
|
5285
|
+
var LeftSide = newStyled.div(templateObject_3$1e || (templateObject_3$1e = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5286
|
+
var RightSide = newStyled.div(templateObject_4$$ || (templateObject_4$$ = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5287
|
+
var FlexStart = newStyled.div(templateObject_5$M || (templateObject_5$M = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5288
|
+
var templateObject_1$27, templateObject_2$1y, templateObject_3$1e, templateObject_4$$, templateObject_5$M;
|
|
5286
5289
|
|
|
5287
5290
|
var CouponCard = function (_a) {
|
|
5288
5291
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
5289
5292
|
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5290
|
-
return (jsxs$1(Container$
|
|
5293
|
+
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
5294
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5292
5295
|
setShowCoupon(function (prev) { return !prev; });
|
|
5293
5296
|
} }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
|
|
@@ -5435,14 +5438,14 @@ var sizeOptions = [
|
|
|
5435
5438
|
},
|
|
5436
5439
|
];
|
|
5437
5440
|
|
|
5438
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5439
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5441
|
+
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; });
|
|
5442
|
+
var ErrorContainer = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
5440
5443
|
var Error$1 = function (_a) {
|
|
5441
5444
|
var error = _a.error;
|
|
5442
5445
|
var theme = useTheme();
|
|
5443
5446
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5444
5447
|
};
|
|
5445
|
-
var templateObject_1$
|
|
5448
|
+
var templateObject_1$26, templateObject_2$1x;
|
|
5446
5449
|
|
|
5447
5450
|
var BaseSelectButton = function (_a) {
|
|
5448
5451
|
var children = _a.children, as = _a.as;
|
|
@@ -5459,7 +5462,7 @@ function BaseSelectOption(_a) {
|
|
|
5459
5462
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5460
5463
|
}
|
|
5461
5464
|
|
|
5462
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5465
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5463
5466
|
function BaseSelect(_a) {
|
|
5464
5467
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5465
5468
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5469,7 +5472,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5469
5472
|
Options: BaseSelectOptions,
|
|
5470
5473
|
Option: BaseSelectOption,
|
|
5471
5474
|
});
|
|
5472
|
-
var templateObject_1$
|
|
5475
|
+
var templateObject_1$25;
|
|
5473
5476
|
|
|
5474
5477
|
var CustomButton = newStyled.button(function (_a) {
|
|
5475
5478
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5508,7 +5511,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5508
5511
|
});
|
|
5509
5512
|
});
|
|
5510
5513
|
// TODO Remove this when we find the real solution
|
|
5511
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5514
|
+
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
5515
|
var open = _a.open;
|
|
5513
5516
|
return open &&
|
|
5514
5517
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5528,7 +5531,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5528
5531
|
} }), void 0));
|
|
5529
5532
|
};
|
|
5530
5533
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5531
|
-
var templateObject_1$
|
|
5534
|
+
var templateObject_1$24;
|
|
5532
5535
|
|
|
5533
5536
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5534
5537
|
var theme = _a.theme;
|
|
@@ -5695,7 +5698,7 @@ var CustomCheckboxStyles = {
|
|
|
5695
5698
|
},
|
|
5696
5699
|
};
|
|
5697
5700
|
|
|
5698
|
-
var Container$
|
|
5701
|
+
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
5702
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5700
5703
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5701
5704
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5706,7 +5709,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5706
5709
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5707
5710
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5708
5711
|
]; });
|
|
5709
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5712
|
+
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
5713
|
var disabled = _a.disabled;
|
|
5711
5714
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5712
5715
|
});
|
|
@@ -5720,9 +5723,9 @@ var Checkbox = function (_a) {
|
|
|
5720
5723
|
}
|
|
5721
5724
|
onChange(e.target.checked);
|
|
5722
5725
|
};
|
|
5723
|
-
return (jsxs$1(Container$
|
|
5726
|
+
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
5727
|
};
|
|
5725
|
-
var templateObject_1$
|
|
5728
|
+
var templateObject_1$23, templateObject_2$1w;
|
|
5726
5729
|
|
|
5727
5730
|
var CustomOption = newStyled.li(function (_a) {
|
|
5728
5731
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5771,9 +5774,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5771
5774
|
Option: BaseDropdownOption,
|
|
5772
5775
|
});
|
|
5773
5776
|
|
|
5774
|
-
var Container$
|
|
5775
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5776
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5777
|
+
var Container$1h = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject([""], [""])));
|
|
5778
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
5779
|
+
var SelectedOption = newStyled.span(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5777
5780
|
var fontWeight = _a.fontWeight;
|
|
5778
5781
|
return fontWeight || '';
|
|
5779
5782
|
});
|
|
@@ -5806,10 +5809,10 @@ function SimpleDropdown(_a) {
|
|
|
5806
5809
|
}
|
|
5807
5810
|
setSelectedValue(value);
|
|
5808
5811
|
}, [value, options, initialValue]);
|
|
5809
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5812
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1h : Fragment$1;
|
|
5810
5813
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5811
5814
|
}
|
|
5812
|
-
var templateObject_1$
|
|
5815
|
+
var templateObject_1$22, templateObject_2$1v, templateObject_3$1d;
|
|
5813
5816
|
|
|
5814
5817
|
/* base styles & size variants */
|
|
5815
5818
|
var CustomRadioStyles$2 = {
|
|
@@ -5874,9 +5877,9 @@ var ContainerStyles$2 = {
|
|
|
5874
5877
|
},
|
|
5875
5878
|
};
|
|
5876
5879
|
|
|
5877
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5878
|
-
var Container$
|
|
5879
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5880
|
+
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"])));
|
|
5881
|
+
var Container$1g = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5882
|
+
var Input$4 = newStyled.input(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5880
5883
|
var disabled = _a.disabled;
|
|
5881
5884
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5882
5885
|
});
|
|
@@ -5884,14 +5887,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5884
5887
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5885
5888
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5886
5889
|
]; });
|
|
5887
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5890
|
+
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
5891
|
var theme = _a.theme;
|
|
5889
5892
|
return theme.component.radio.textSize;
|
|
5890
5893
|
}, function (_a) {
|
|
5891
5894
|
var theme = _a.theme;
|
|
5892
5895
|
return theme.component.radio.lineHeight;
|
|
5893
5896
|
});
|
|
5894
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5897
|
+
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
5898
|
var theme = _a.theme;
|
|
5896
5899
|
return theme.component.radio.textSize;
|
|
5897
5900
|
}, function (_a) {
|
|
@@ -5908,9 +5911,9 @@ var RadioInput = function (_a) {
|
|
|
5908
5911
|
var value = event.currentTarget.value;
|
|
5909
5912
|
onChange({ value: value, label: label });
|
|
5910
5913
|
};
|
|
5911
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5914
|
+
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
5915
|
};
|
|
5913
|
-
var templateObject_1$
|
|
5916
|
+
var templateObject_1$21, templateObject_2$1u, templateObject_3$1c, templateObject_4$_;
|
|
5914
5917
|
|
|
5915
5918
|
var useOnClickOutside = function (ref, handler) {
|
|
5916
5919
|
useEffect(function () {
|
|
@@ -6003,7 +6006,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6003
6006
|
}
|
|
6004
6007
|
};
|
|
6005
6008
|
|
|
6006
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
6009
|
+
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
6010
|
var position = _a.position;
|
|
6008
6011
|
return getWrapperFlexDirection(position);
|
|
6009
6012
|
}, function (_a) {
|
|
@@ -6013,7 +6016,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __ma
|
|
|
6013
6016
|
var disableHover = _a.disableHover;
|
|
6014
6017
|
return (disableHover ? 0 : 1);
|
|
6015
6018
|
});
|
|
6016
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6019
|
+
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
6020
|
var position = _a.position;
|
|
6018
6021
|
return getContainerFlexDirection(position);
|
|
6019
6022
|
}, function (_a) {
|
|
@@ -6041,14 +6044,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1s || (templateObject_2$1s
|
|
|
6041
6044
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6042
6045
|
return actual === expected ? margin : '0';
|
|
6043
6046
|
};
|
|
6044
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
6047
|
+
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
6048
|
var borderColor = _a.borderColor;
|
|
6046
6049
|
return borderColor;
|
|
6047
6050
|
}, function (_a) {
|
|
6048
6051
|
var backgroundColor = _a.backgroundColor;
|
|
6049
6052
|
return backgroundColor;
|
|
6050
6053
|
});
|
|
6051
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
6054
|
+
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
6055
|
var theme = _a.theme;
|
|
6053
6056
|
return theme.component.autoship.tooltip.text.alignment;
|
|
6054
6057
|
}, function (_a) {
|
|
@@ -6058,17 +6061,17 @@ var TooltipText = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __ma
|
|
|
6058
6061
|
var color = _a.color;
|
|
6059
6062
|
return color;
|
|
6060
6063
|
});
|
|
6061
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
6062
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
6064
|
+
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"])));
|
|
6065
|
+
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
6066
|
var color = _a.color;
|
|
6064
6067
|
return color;
|
|
6065
6068
|
});
|
|
6066
|
-
var IconContainer$6 = newStyled.div(templateObject_7$
|
|
6067
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
6069
|
+
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"])));
|
|
6070
|
+
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
6071
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6069
6072
|
return right;
|
|
6070
6073
|
});
|
|
6071
|
-
var templateObject_1$
|
|
6074
|
+
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
6075
|
|
|
6073
6076
|
var Tooltip = function (_a) {
|
|
6074
6077
|
var _b;
|
|
@@ -6111,8 +6114,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
6111
6114
|
};
|
|
6112
6115
|
};
|
|
6113
6116
|
|
|
6114
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6115
|
-
var ContainerBase$
|
|
6117
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6118
|
+
var ContainerBase$4 = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6116
6119
|
var selected = _a.selected, theme = _a.theme;
|
|
6117
6120
|
return selected
|
|
6118
6121
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6126,21 +6129,21 @@ var ContainerBase$3 = newStyled.div(templateObject_2$1r || (templateObject_2$1r
|
|
|
6126
6129
|
var theme = _a.theme;
|
|
6127
6130
|
return theme.colors.pallete.primary.color;
|
|
6128
6131
|
});
|
|
6129
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$
|
|
6132
|
+
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
6133
|
var onClick = _a.onClick;
|
|
6131
6134
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6132
6135
|
});
|
|
6133
|
-
var SubscriptionContainer$
|
|
6134
|
-
var SubscriptionHeader$
|
|
6136
|
+
var SubscriptionContainer$4 = newStyled(ContainerBase$4)(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6137
|
+
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
6138
|
var theme = _a.theme;
|
|
6136
6139
|
return theme.colors.shades[200].color;
|
|
6137
6140
|
}, function (_a) {
|
|
6138
6141
|
var theme = _a.theme;
|
|
6139
6142
|
return theme.colors.pallete.primary.color;
|
|
6140
6143
|
});
|
|
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$
|
|
6144
|
+
var BenefitsContainer$3 = newStyled.div(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6145
|
+
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"])));
|
|
6146
|
+
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
6147
|
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
6148
|
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
6149
|
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 +6151,8 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6148
6151
|
var selected = _a.selected, theme = _a.theme;
|
|
6149
6152
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6150
6153
|
});
|
|
6151
|
-
var Container$
|
|
6152
|
-
var templateObject_1$
|
|
6154
|
+
var Container$1f = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6155
|
+
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
6156
|
|
|
6154
6157
|
var radioIds$2 = {
|
|
6155
6158
|
oneTime: {
|
|
@@ -6199,17 +6202,17 @@ var Autoship = function (_a) {
|
|
|
6199
6202
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6200
6203
|
};
|
|
6201
6204
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6202
|
-
return (jsxs$1(Container$
|
|
6205
|
+
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
6206
|
? benefitsColor.selected
|
|
6204
6207
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$3, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6205
6208
|
};
|
|
6206
6209
|
|
|
6207
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6210
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6208
6211
|
var theme = _a.theme;
|
|
6209
6212
|
return theme.name === 'TheSpaDr' &&
|
|
6210
6213
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
6211
6214
|
});
|
|
6212
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
6215
|
+
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
6216
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6214
6217
|
return isSelected
|
|
6215
6218
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6225,7 +6228,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6225
6228
|
}
|
|
6226
6229
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6227
6230
|
};
|
|
6228
|
-
var ContainerBase$
|
|
6231
|
+
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
6232
|
var selected = _a.selected, theme = _a.theme;
|
|
6230
6233
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6231
6234
|
}, function (_a) {
|
|
@@ -6237,32 +6240,32 @@ var ContainerBase$2 = newStyled.div(templateObject_3$18 || (templateObject_3$18
|
|
|
6237
6240
|
var theme = _a.theme;
|
|
6238
6241
|
return theme.colors.pallete.primary.color;
|
|
6239
6242
|
});
|
|
6240
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$
|
|
6243
|
+
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
6244
|
var onClick = _a.onClick;
|
|
6242
6245
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6243
6246
|
});
|
|
6244
|
-
var SubscriptionContainer$
|
|
6245
|
-
var SubscriptionHeader$
|
|
6247
|
+
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"])));
|
|
6248
|
+
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
6249
|
var theme = _a.theme;
|
|
6247
6250
|
return theme.colors.shades[200].color;
|
|
6248
6251
|
}, function (_a) {
|
|
6249
6252
|
var theme = _a.theme;
|
|
6250
6253
|
return theme.colors.pallete.primary.color;
|
|
6251
6254
|
});
|
|
6252
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_7$
|
|
6253
|
-
var Benefit$3 = newStyled.div(templateObject_8$
|
|
6255
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_7$u || (templateObject_7$u = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6256
|
+
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
6257
|
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
6258
|
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
6259
|
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
6260
|
var selected = _a.selected, theme = _a.theme;
|
|
6258
6261
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6259
6262
|
});
|
|
6260
|
-
var Container$
|
|
6263
|
+
var Container$1e = newStyled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6261
6264
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6262
6265
|
var theme = _a.theme;
|
|
6263
6266
|
return theme.component.autoship.tooltip.margin;
|
|
6264
6267
|
});
|
|
6265
|
-
var templateObject_1$
|
|
6268
|
+
var templateObject_1$1_, templateObject_2$1r, templateObject_3$19, templateObject_4$X, templateObject_5$J, templateObject_6$C, templateObject_7$u, templateObject_8$n, templateObject_9$b, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6266
6269
|
|
|
6267
6270
|
var radioIds$1 = {
|
|
6268
6271
|
oneTime: {
|
|
@@ -6322,7 +6325,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6322
6325
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6323
6326
|
};
|
|
6324
6327
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6325
|
-
return (jsxs$1(Container$
|
|
6328
|
+
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
6329
|
? benefitsColor.selected
|
|
6327
6330
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$2, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$2, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Delivery Every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer$2, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsx$1(StyledPrice$2, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6328
6331
|
};
|
|
@@ -6341,13 +6344,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6341
6344
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6342
6345
|
_a$2);
|
|
6343
6346
|
|
|
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$
|
|
6347
|
+
var CustomerDetails = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject([""], [""])));
|
|
6348
|
+
var CustomerInfo = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6349
|
+
var Name = newStyled.h4(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
6350
|
+
var StarIconContainer = newStyled.div(templateObject_4$W || (templateObject_4$W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6351
|
+
var Description$2 = newStyled.p(templateObject_5$I || (templateObject_5$I = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6352
|
+
var ReviewDays = newStyled.span(templateObject_6$B || (templateObject_6$B = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6353
|
+
var templateObject_1$1Z, templateObject_2$1q, templateObject_3$18, templateObject_4$W, templateObject_5$I, templateObject_6$B;
|
|
6351
6354
|
|
|
6352
6355
|
var NameWithStars = function (_a) {
|
|
6353
6356
|
var name = _a.name, size = _a.size;
|
|
@@ -6365,10 +6368,10 @@ var ResultFeedback = function (_a) {
|
|
|
6365
6368
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6366
6369
|
};
|
|
6367
6370
|
|
|
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$
|
|
6371
|
+
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; });
|
|
6372
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
6373
|
+
var ImageCard = newStyled.div(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
6374
|
+
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
6375
|
var theme = _a.theme;
|
|
6373
6376
|
return theme.colors.pallete.secondary.color;
|
|
6374
6377
|
}, function (_a) {
|
|
@@ -6378,7 +6381,7 @@ var UserInfoText = newStyled.div(templateObject_4$U || (templateObject_4$U = __m
|
|
|
6378
6381
|
var theme = _a.theme, size = _a.size;
|
|
6379
6382
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6380
6383
|
});
|
|
6381
|
-
var templateObject_1$
|
|
6384
|
+
var templateObject_1$1Y, templateObject_2$1p, templateObject_3$17, templateObject_4$V;
|
|
6382
6385
|
|
|
6383
6386
|
/* base styles & size variants */
|
|
6384
6387
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6453,10 +6456,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6453
6456
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6454
6457
|
var infoText = buildInfoText(name, age, months);
|
|
6455
6458
|
var Component = componentByVariant[variant];
|
|
6456
|
-
return (jsxs$1(Container$
|
|
6459
|
+
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
6460
|
};
|
|
6458
6461
|
|
|
6459
|
-
var Section = newStyled.div(templateObject_1$
|
|
6462
|
+
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
6463
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6461
6464
|
});
|
|
6462
6465
|
var CardHeader = function (_a) {
|
|
@@ -6467,16 +6470,16 @@ var CardFooter = function (_a) {
|
|
|
6467
6470
|
var children = _a.children;
|
|
6468
6471
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6469
6472
|
};
|
|
6470
|
-
var templateObject_1$
|
|
6473
|
+
var templateObject_1$1X;
|
|
6471
6474
|
|
|
6472
|
-
var Body$1 = newStyled.div(templateObject_1$
|
|
6475
|
+
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
6476
|
var CardBody$1 = function (_a) {
|
|
6474
6477
|
var children = _a.children;
|
|
6475
6478
|
return jsx$1(Body$1, { children: children }, void 0);
|
|
6476
6479
|
};
|
|
6477
|
-
var templateObject_1$
|
|
6480
|
+
var templateObject_1$1W;
|
|
6478
6481
|
|
|
6479
|
-
var Container$
|
|
6482
|
+
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
6483
|
var flex = _a.flex;
|
|
6481
6484
|
return flex &&
|
|
6482
6485
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6491,23 +6494,23 @@ var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = _
|
|
|
6491
6494
|
var Card$2 = function (_a) {
|
|
6492
6495
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
6493
6496
|
var theme = useTheme();
|
|
6494
|
-
return (jsx$1(Container$
|
|
6497
|
+
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
6498
|
};
|
|
6496
6499
|
var Card$3 = Object.assign(Card$2, {
|
|
6497
6500
|
Header: CardHeader,
|
|
6498
6501
|
Footer: CardFooter,
|
|
6499
6502
|
Body: CardBody$1,
|
|
6500
6503
|
});
|
|
6501
|
-
var templateObject_1$
|
|
6504
|
+
var templateObject_1$1V;
|
|
6502
6505
|
|
|
6503
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6504
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6505
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6506
|
+
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"])));
|
|
6507
|
+
var StyledContainer = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6508
|
+
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
6509
|
var color = _a.color;
|
|
6507
6510
|
return color;
|
|
6508
6511
|
});
|
|
6509
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6510
|
-
var templateObject_1$
|
|
6512
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6513
|
+
var templateObject_1$1U, templateObject_2$1o, templateObject_3$16, templateObject_4$U;
|
|
6511
6514
|
|
|
6512
6515
|
var Minimalistic = function (_a) {
|
|
6513
6516
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -6515,28 +6518,28 @@ var Minimalistic = function (_a) {
|
|
|
6515
6518
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6516
6519
|
};
|
|
6517
6520
|
|
|
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$
|
|
6521
|
+
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"])));
|
|
6522
|
+
var Title$9 = newStyled.h1(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
6523
|
+
var Details$1 = newStyled.span(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6524
|
+
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
6525
|
var Simple = function (_a) {
|
|
6523
6526
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
6524
6527
|
var theme = useTheme();
|
|
6525
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
6528
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$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
6529
|
};
|
|
6527
|
-
var templateObject_1$
|
|
6530
|
+
var templateObject_1$1T, templateObject_2$1n, templateObject_3$15, templateObject_4$T;
|
|
6528
6531
|
|
|
6529
6532
|
var Bundle = {
|
|
6530
6533
|
Minimalistic: Minimalistic,
|
|
6531
6534
|
Simple: Simple,
|
|
6532
6535
|
};
|
|
6533
6536
|
|
|
6534
|
-
var Container$
|
|
6537
|
+
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
6538
|
var displayBNPL = _a.displayBNPL;
|
|
6536
6539
|
return (displayBNPL ? 'flex' : 'none');
|
|
6537
6540
|
});
|
|
6538
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6539
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6541
|
+
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"])));
|
|
6542
|
+
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
6543
|
var BuyNowPayLater = function (_a) {
|
|
6541
6544
|
var _b;
|
|
6542
6545
|
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 +6559,48 @@ var BuyNowPayLater = function (_a) {
|
|
|
6556
6559
|
else {
|
|
6557
6560
|
dynamicText = "or 4 interest-free payments of ";
|
|
6558
6561
|
}
|
|
6559
|
-
return (jsx$1(Container$
|
|
6562
|
+
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
6563
|
display: 'inline',
|
|
6561
6564
|
fontSize: fontSize,
|
|
6562
6565
|
paddingLeft: '0.25rem',
|
|
6563
6566
|
paddingRight: '0.25rem',
|
|
6564
6567
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsx$1(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsx$1(IconComponent, { width: !bnplWithAfterPay ? 3.2 : 5.3, height: 2, fill: iconColor, style: { position: 'relative', left: bnplWithAfterPay ? '1rem' : '0' } }, void 0) }), void 0))] }), void 0) }), void 0));
|
|
6565
6568
|
};
|
|
6566
|
-
var templateObject_1$
|
|
6569
|
+
var templateObject_1$1S, templateObject_2$1m, templateObject_3$14;
|
|
6567
6570
|
|
|
6568
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6571
|
+
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
6572
|
var Title$8 = function (_a) {
|
|
6570
6573
|
var title = _a.title;
|
|
6571
6574
|
var theme = useTheme();
|
|
6572
6575
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6573
6576
|
};
|
|
6574
|
-
var templateObject_1$
|
|
6577
|
+
var templateObject_1$1R;
|
|
6575
6578
|
|
|
6576
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6579
|
+
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
6580
|
var Promo = function (_a) {
|
|
6578
6581
|
var text = _a.text;
|
|
6579
6582
|
var theme = useTheme();
|
|
6580
6583
|
return (jsx$1(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6581
6584
|
};
|
|
6582
|
-
var templateObject_1$
|
|
6585
|
+
var templateObject_1$1Q;
|
|
6583
6586
|
|
|
6584
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6587
|
+
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
6588
|
var Description$1 = function (_a) {
|
|
6586
6589
|
var text = _a.text;
|
|
6587
6590
|
var theme = useTheme();
|
|
6588
6591
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6589
6592
|
};
|
|
6590
|
-
var templateObject_1$
|
|
6593
|
+
var templateObject_1$1P;
|
|
6591
6594
|
|
|
6592
|
-
var Container$
|
|
6595
|
+
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
6596
|
var CloseButton$1 = function (_a) {
|
|
6594
6597
|
var onClick = _a.onClick, size = _a.size;
|
|
6595
6598
|
var theme = useTheme();
|
|
6596
|
-
return (jsx$1(Container$
|
|
6599
|
+
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
6600
|
};
|
|
6598
|
-
var templateObject_1$
|
|
6601
|
+
var templateObject_1$1O;
|
|
6599
6602
|
|
|
6600
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6603
|
+
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
6604
|
var backgroundColor = _a.backgroundColor;
|
|
6602
6605
|
return backgroundColor;
|
|
6603
6606
|
}, function (_a) {
|
|
@@ -6612,7 +6615,7 @@ var OfferBanner = function (_a) {
|
|
|
6612
6615
|
var theme = useTheme();
|
|
6613
6616
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6614
6617
|
};
|
|
6615
|
-
var templateObject_1$
|
|
6618
|
+
var templateObject_1$1N;
|
|
6616
6619
|
|
|
6617
6620
|
var CartProductItem = {
|
|
6618
6621
|
Title: Title$8,
|
|
@@ -6622,20 +6625,20 @@ var CartProductItem = {
|
|
|
6622
6625
|
CloseButton: CloseButton$1,
|
|
6623
6626
|
};
|
|
6624
6627
|
|
|
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$
|
|
6628
|
+
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"])));
|
|
6629
|
+
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"])));
|
|
6630
|
+
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"])));
|
|
6631
|
+
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"])));
|
|
6632
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$H || (templateObject_5$H = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6633
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$A || (templateObject_6$A = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6634
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$t || (templateObject_7$t = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6635
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$m || (templateObject_8$m = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6633
6636
|
var ClubPriceLabel = function (_a) {
|
|
6634
6637
|
var clubPrice = _a.clubPrice;
|
|
6635
6638
|
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$
|
|
6639
|
+
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
6640
|
};
|
|
6638
|
-
var templateObject_1$
|
|
6641
|
+
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
6642
|
|
|
6640
6643
|
var Spacing = function (_a) {
|
|
6641
6644
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6643,10 +6646,10 @@ var Spacing = function (_a) {
|
|
|
6643
6646
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6644
6647
|
};
|
|
6645
6648
|
|
|
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$
|
|
6649
|
+
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"])));
|
|
6650
|
+
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"])));
|
|
6651
|
+
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"])));
|
|
6652
|
+
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
6653
|
var index = _a.index;
|
|
6651
6654
|
return "".concat(6 + 3 * index, "px");
|
|
6652
6655
|
}, function (_a) {
|
|
@@ -6655,12 +6658,12 @@ var Bar$2 = newStyled('div')(templateObject_4$Q || (templateObject_4$Q = __makeT
|
|
|
6655
6658
|
});
|
|
6656
6659
|
var StrengthBars = function (_a) {
|
|
6657
6660
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6658
|
-
return (jsxs$1(Container$
|
|
6661
|
+
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
6662
|
};
|
|
6660
|
-
var templateObject_1$
|
|
6663
|
+
var templateObject_1$1L, templateObject_2$1k, templateObject_3$12, templateObject_4$R;
|
|
6661
6664
|
|
|
6662
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6663
|
-
var templateObject_1$
|
|
6665
|
+
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"])));
|
|
6666
|
+
var templateObject_1$1K;
|
|
6664
6667
|
|
|
6665
6668
|
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
6669
|
|
|
@@ -6682,10 +6685,10 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6682
6685
|
|
|
6683
6686
|
var STARTS_NUMBER = 5;
|
|
6684
6687
|
|
|
6685
|
-
var Container$
|
|
6686
|
-
var templateObject_1$
|
|
6688
|
+
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"])));
|
|
6689
|
+
var templateObject_1$1J;
|
|
6687
6690
|
|
|
6688
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6691
|
+
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
6692
|
var marginRight = _a.marginRight;
|
|
6690
6693
|
return marginRight;
|
|
6691
6694
|
});
|
|
@@ -6697,11 +6700,11 @@ var StarList = function (_a) {
|
|
|
6697
6700
|
width: theme.component.stars.element[size].width,
|
|
6698
6701
|
height: theme.component.stars.element[size].height,
|
|
6699
6702
|
};
|
|
6700
|
-
return (jsx$1(Container$
|
|
6703
|
+
return (jsx$1(Container$16, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6701
6704
|
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
6705
|
}) }, void 0));
|
|
6703
6706
|
};
|
|
6704
|
-
var templateObject_1$
|
|
6707
|
+
var templateObject_1$1I;
|
|
6705
6708
|
|
|
6706
6709
|
/* base styles & size variants */
|
|
6707
6710
|
var LabelStyles = {
|
|
@@ -6749,7 +6752,7 @@ var LabelStyles = {
|
|
|
6749
6752
|
});
|
|
6750
6753
|
},
|
|
6751
6754
|
};
|
|
6752
|
-
var Container$
|
|
6755
|
+
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
6756
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6754
6757
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6755
6758
|
return [
|
|
@@ -6768,8 +6771,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6768
6771
|
}),
|
|
6769
6772
|
];
|
|
6770
6773
|
});
|
|
6771
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6772
|
-
var templateObject_1$
|
|
6774
|
+
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; });
|
|
6775
|
+
var templateObject_1$1H, templateObject_2$1j;
|
|
6773
6776
|
|
|
6774
6777
|
var Rating = function (_a) {
|
|
6775
6778
|
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 +6793,19 @@ var Rating = function (_a) {
|
|
|
6790
6793
|
href: reviewsContainerId,
|
|
6791
6794
|
}
|
|
6792
6795
|
: {};
|
|
6793
|
-
return (jsxs$1(Container$
|
|
6796
|
+
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
6797
|
};
|
|
6795
6798
|
|
|
6796
|
-
var ImageWrapper$4 = newStyled.div(templateObject_1$
|
|
6799
|
+
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
6800
|
var width = _a.width;
|
|
6798
6801
|
return width;
|
|
6799
6802
|
});
|
|
6800
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6801
|
-
var RatingText = newStyled.span(templateObject_3$
|
|
6803
|
+
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"])));
|
|
6804
|
+
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
6805
|
var fontSize = _a.fontSize;
|
|
6803
6806
|
return fontSize;
|
|
6804
6807
|
});
|
|
6805
|
-
var templateObject_1$
|
|
6808
|
+
var templateObject_1$1G, templateObject_2$1i, templateObject_3$11;
|
|
6806
6809
|
|
|
6807
6810
|
var OfferAtCartImage = function (_a) {
|
|
6808
6811
|
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width;
|
|
@@ -6849,9 +6852,9 @@ var getDropdownOptions = function (frequency) {
|
|
|
6849
6852
|
}); });
|
|
6850
6853
|
};
|
|
6851
6854
|
|
|
6852
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
6853
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_2$
|
|
6854
|
-
var templateObject_1$
|
|
6855
|
+
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"])));
|
|
6856
|
+
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"])));
|
|
6857
|
+
var templateObject_1$1F, templateObject_2$1h;
|
|
6855
6858
|
|
|
6856
6859
|
var BenefitsList = function (_a) {
|
|
6857
6860
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6862,23 +6865,23 @@ var BenefitsList = function (_a) {
|
|
|
6862
6865
|
}) }, void 0));
|
|
6863
6866
|
};
|
|
6864
6867
|
|
|
6865
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6868
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6866
6869
|
var timerColor = _a.timerColor;
|
|
6867
6870
|
return timerColor || '';
|
|
6868
6871
|
});
|
|
6869
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
6872
|
+
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
6873
|
var timerColor = _a.timerColor;
|
|
6871
6874
|
return timerColor || '';
|
|
6872
6875
|
});
|
|
6873
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3
|
|
6876
|
+
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
6877
|
var theme = _a.theme;
|
|
6875
6878
|
return theme.colors.shades.white.color;
|
|
6876
6879
|
}, function (_a) {
|
|
6877
6880
|
var theme = _a.theme;
|
|
6878
6881
|
return theme.colors.shades.white.color;
|
|
6879
6882
|
});
|
|
6880
|
-
var Unit = newStyled.p(templateObject_4$
|
|
6881
|
-
var templateObject_1$
|
|
6883
|
+
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"])));
|
|
6884
|
+
var templateObject_1$1E, templateObject_2$1g, templateObject_3$10, templateObject_4$Q;
|
|
6882
6885
|
|
|
6883
6886
|
var HRS = 'HRS';
|
|
6884
6887
|
var MIN = 'MIN';
|
|
@@ -6919,7 +6922,7 @@ var Timer = function (_a) {
|
|
|
6919
6922
|
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
6923
|
};
|
|
6921
6924
|
|
|
6922
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
6925
|
+
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
6926
|
var textPosition = _a.textPosition;
|
|
6924
6927
|
return textPosition;
|
|
6925
6928
|
}, function (_a) {
|
|
@@ -6932,7 +6935,7 @@ var TimerContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C =
|
|
|
6932
6935
|
var borderRadius = _a.borderRadius;
|
|
6933
6936
|
return borderRadius || '8px';
|
|
6934
6937
|
});
|
|
6935
|
-
var templateObject_1$
|
|
6938
|
+
var templateObject_1$1D;
|
|
6936
6939
|
|
|
6937
6940
|
var getDefaultCountdown = function () {
|
|
6938
6941
|
var tomorrowDate = new Date();
|
|
@@ -6948,7 +6951,7 @@ var HurryUp = function (_a) {
|
|
|
6948
6951
|
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
6952
|
};
|
|
6950
6953
|
|
|
6951
|
-
var Container$
|
|
6954
|
+
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
6955
|
var size = _a.size;
|
|
6953
6956
|
return (size ? size : '100%');
|
|
6954
6957
|
}, function (_a) {
|
|
@@ -6963,7 +6966,7 @@ var borderSize = {
|
|
|
6963
6966
|
large: '3px',
|
|
6964
6967
|
};
|
|
6965
6968
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
6966
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
6969
|
+
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
6970
|
var size = _a.size;
|
|
6968
6971
|
return borderSize[size];
|
|
6969
6972
|
}, function (_a) {
|
|
@@ -6976,29 +6979,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1e || (templateObject_2$1e =
|
|
|
6976
6979
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
6977
6980
|
return duration;
|
|
6978
6981
|
});
|
|
6979
|
-
var templateObject_1$
|
|
6982
|
+
var templateObject_1$1C, templateObject_2$1f;
|
|
6980
6983
|
|
|
6981
6984
|
var Spinner = function (_a) {
|
|
6982
6985
|
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$
|
|
6986
|
+
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
6987
|
};
|
|
6985
6988
|
|
|
6986
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
6987
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
6988
|
-
var templateObject_1$
|
|
6989
|
+
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); });
|
|
6990
|
+
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; });
|
|
6991
|
+
var templateObject_1$1B, templateObject_2$1e;
|
|
6989
6992
|
|
|
6990
6993
|
var ProgressBar$1 = function (_a) {
|
|
6991
6994
|
var progress = _a.progress, hide = _a.hide;
|
|
6992
6995
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
6993
6996
|
};
|
|
6994
6997
|
|
|
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$
|
|
6998
|
+
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"])));
|
|
6999
|
+
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; });
|
|
7000
|
+
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"])));
|
|
7001
|
+
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"])));
|
|
7002
|
+
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"])));
|
|
7003
|
+
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"])));
|
|
7004
|
+
var templateObject_1$1A, templateObject_2$1d, templateObject_3$$, templateObject_4$P, templateObject_5$G, templateObject_6$z;
|
|
7002
7005
|
|
|
7003
7006
|
var Video$1 = function (_a) {
|
|
7004
7007
|
var _b, _c, _d, _e;
|
|
@@ -7048,14 +7051,14 @@ var Video$1 = function (_a) {
|
|
|
7048
7051
|
setVideoProgress(videoRef.current.currentTime);
|
|
7049
7052
|
}
|
|
7050
7053
|
};
|
|
7051
|
-
return (jsxs$1(Container$
|
|
7054
|
+
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
7055
|
};
|
|
7053
7056
|
|
|
7054
|
-
var LikeCount = newStyled.span(templateObject_1$
|
|
7057
|
+
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
7058
|
var theme = _a.theme;
|
|
7056
7059
|
return theme.colors.shades.black.color;
|
|
7057
7060
|
});
|
|
7058
|
-
var LikeBtnContainer = newStyled.button(templateObject_2$
|
|
7061
|
+
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
7062
|
var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
|
|
7060
7063
|
return position;
|
|
7061
7064
|
}, function (_a) {
|
|
@@ -7074,7 +7077,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1b || (templateObject_2
|
|
|
7074
7077
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
7075
7078
|
return boxSizing;
|
|
7076
7079
|
});
|
|
7077
|
-
var templateObject_1$
|
|
7080
|
+
var templateObject_1$1z, templateObject_2$1c;
|
|
7078
7081
|
|
|
7079
7082
|
var getStylesBySize$c = function (size) {
|
|
7080
7083
|
switch (size) {
|
|
@@ -7095,7 +7098,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7095
7098
|
};
|
|
7096
7099
|
}
|
|
7097
7100
|
};
|
|
7098
|
-
var Container$
|
|
7101
|
+
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
7102
|
var backgroundColor = _a.backgroundColor;
|
|
7100
7103
|
return backgroundColor;
|
|
7101
7104
|
}, function (_a) {
|
|
@@ -7136,9 +7139,9 @@ var IconButton = function (_a) {
|
|
|
7136
7139
|
var _b, _c;
|
|
7137
7140
|
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
7141
|
var theme = useTheme();
|
|
7139
|
-
return (jsx$1(Container$
|
|
7142
|
+
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
7143
|
};
|
|
7141
|
-
var templateObject_1$
|
|
7144
|
+
var templateObject_1$1y;
|
|
7142
7145
|
|
|
7143
7146
|
var LikeButton = function (_a) {
|
|
7144
7147
|
var _b;
|
|
@@ -7151,11 +7154,11 @@ var LikeButton = function (_a) {
|
|
|
7151
7154
|
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
7155
|
};
|
|
7153
7156
|
|
|
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$
|
|
7157
|
+
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"])));
|
|
7158
|
+
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"])));
|
|
7159
|
+
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"])));
|
|
7160
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7161
|
+
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
7162
|
var RegularPriceTag = function () {
|
|
7160
7163
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
7161
7164
|
};
|
|
@@ -7205,11 +7208,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
7205
7208
|
: ComponentSize.XSmall;
|
|
7206
7209
|
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
7210
|
};
|
|
7208
|
-
return (jsxs$1(Container$
|
|
7211
|
+
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
7212
|
? finalPriceArray[0]
|
|
7210
7213
|
: (_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
7214
|
};
|
|
7212
|
-
var templateObject_1$
|
|
7215
|
+
var templateObject_1$1x, templateObject_2$1b, templateObject_3$_, templateObject_4$O, templateObject_5$F;
|
|
7213
7216
|
|
|
7214
7217
|
var STYLES_BY_THEME = {
|
|
7215
7218
|
TheSpaDr: {
|
|
@@ -7282,10 +7285,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7282
7285
|
height: height,
|
|
7283
7286
|
});
|
|
7284
7287
|
});
|
|
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$
|
|
7288
|
+
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"])));
|
|
7289
|
+
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"])));
|
|
7290
|
+
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"])));
|
|
7291
|
+
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
7292
|
var theme = _a.theme;
|
|
7290
7293
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
7291
7294
|
}, function (_a) {
|
|
@@ -7336,17 +7339,17 @@ var getStylesBySize$b = function (size) {
|
|
|
7336
7339
|
};
|
|
7337
7340
|
}
|
|
7338
7341
|
};
|
|
7339
|
-
var TopTagContainer$9 = newStyled.div(templateObject_5$
|
|
7342
|
+
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
7343
|
var style = _a.style;
|
|
7341
7344
|
return style.width;
|
|
7342
7345
|
});
|
|
7343
|
-
var BottomTagContainer$9 = newStyled.div(templateObject_6$
|
|
7346
|
+
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
7347
|
var style = _a.style;
|
|
7345
7348
|
return style.width;
|
|
7346
7349
|
});
|
|
7347
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
7348
|
-
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$
|
|
7349
|
-
var templateObject_1$
|
|
7350
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7351
|
+
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"])));
|
|
7352
|
+
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
7353
|
|
|
7351
7354
|
var ProductItemMobile = function (_a) {
|
|
7352
7355
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7438,12 +7441,12 @@ var ProductItemMobile = function (_a) {
|
|
|
7438
7441
|
setIsLiked(function (prev) { return !prev; });
|
|
7439
7442
|
likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.onClick(e);
|
|
7440
7443
|
};
|
|
7441
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7444
|
+
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
7445
|
background: {
|
|
7443
7446
|
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
7447
|
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
7448
|
},
|
|
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$
|
|
7449
|
+
} }, 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
7450
|
letterSpacing: '-0.05rem',
|
|
7448
7451
|
} }), 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
7452
|
e.preventDefault();
|
|
@@ -7463,10 +7466,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7463
7466
|
height: height,
|
|
7464
7467
|
});
|
|
7465
7468
|
});
|
|
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$
|
|
7469
|
+
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; });
|
|
7470
|
+
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"])));
|
|
7471
|
+
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"])));
|
|
7472
|
+
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
7473
|
var getStylesBySize$a = function (size) {
|
|
7471
7474
|
switch (size) {
|
|
7472
7475
|
case ComponentSize.Medium:
|
|
@@ -7492,16 +7495,16 @@ var getStylesBySize$a = function (size) {
|
|
|
7492
7495
|
};
|
|
7493
7496
|
}
|
|
7494
7497
|
};
|
|
7495
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
7498
|
+
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
7499
|
var style = _a.style;
|
|
7497
7500
|
return style.width;
|
|
7498
7501
|
});
|
|
7499
|
-
var TopRightTagContainer$3 = newStyled.div(templateObject_6$
|
|
7500
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_7$
|
|
7502
|
+
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"])));
|
|
7503
|
+
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
7504
|
var style = _a.style;
|
|
7502
7505
|
return style.width;
|
|
7503
7506
|
});
|
|
7504
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
7507
|
+
var MarginTopContainer = newStyled.div(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7505
7508
|
var ProductItemTK = function (_a) {
|
|
7506
7509
|
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
7510
|
display: false,
|
|
@@ -7545,26 +7548,26 @@ var ProductItemTK = function (_a) {
|
|
|
7545
7548
|
: undefined }, void 0));
|
|
7546
7549
|
};
|
|
7547
7550
|
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
|
|
7551
|
+
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
7552
|
// @ts-ignore
|
|
7550
7553
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
7551
7554
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
7552
7555
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7553
7556
|
} }, { 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
7557
|
};
|
|
7555
|
-
var templateObject_1$
|
|
7558
|
+
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
7559
|
|
|
7557
|
-
var Container
|
|
7560
|
+
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
7561
|
function withProductGrid(ProductItemComponent, data) {
|
|
7559
7562
|
function WithProductGrid(props) {
|
|
7560
|
-
return (jsx$1(Container
|
|
7563
|
+
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
7564
|
}
|
|
7562
7565
|
/* istanbul ignore next */
|
|
7563
7566
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
7564
7567
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7565
7568
|
return WithProductGrid;
|
|
7566
7569
|
}
|
|
7567
|
-
var templateObject_1$
|
|
7570
|
+
var templateObject_1$1u;
|
|
7568
7571
|
|
|
7569
7572
|
var Collection = {
|
|
7570
7573
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7572,11 +7575,11 @@ var Collection = {
|
|
|
7572
7575
|
ProductItemTK: ProductItemTK,
|
|
7573
7576
|
};
|
|
7574
7577
|
|
|
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$
|
|
7578
|
+
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"])));
|
|
7579
|
+
newStyled(lt.Label)(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7580
|
+
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"])));
|
|
7581
|
+
var Span = newStyled.span(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7582
|
+
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
7583
|
var Label$5 = function (_a) {
|
|
7581
7584
|
var label = _a.label, values = _a.values;
|
|
7582
7585
|
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 +7597,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7594
7597
|
Option: Option,
|
|
7595
7598
|
OptionsContainer: OptionsContainer,
|
|
7596
7599
|
});
|
|
7597
|
-
var templateObject_1$
|
|
7600
|
+
var templateObject_1$1t, templateObject_2$18, templateObject_3$X, templateObject_4$L, templateObject_5$C;
|
|
7598
7601
|
|
|
7599
7602
|
var OneColorSelector = function (_a) {
|
|
7600
7603
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7635,21 +7638,21 @@ var OutOfStock = function (_a) {
|
|
|
7635
7638
|
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
7639
|
};
|
|
7637
7640
|
|
|
7638
|
-
var Container$
|
|
7641
|
+
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
7642
|
var borderColor = _a.borderColor;
|
|
7640
7643
|
return borderColor;
|
|
7641
7644
|
}, function (_a) {
|
|
7642
7645
|
var noStock = _a.noStock;
|
|
7643
7646
|
return (noStock ? '0.4' : '1');
|
|
7644
7647
|
});
|
|
7645
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7648
|
+
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
7649
|
var PatternSelector = function (_a) {
|
|
7647
7650
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7648
7651
|
var theme = useTheme();
|
|
7649
7652
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7650
|
-
return (jsx$1(Container$
|
|
7653
|
+
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
7654
|
};
|
|
7652
|
-
var templateObject_1$
|
|
7655
|
+
var templateObject_1$1s, templateObject_2$17;
|
|
7653
7656
|
|
|
7654
7657
|
var renderOptions$1 = function (options, showCross) {
|
|
7655
7658
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7677,10 +7680,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7677
7680
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7678
7681
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7679
7682
|
var showCloseIcon = (tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {}).showCloseIcon;
|
|
7680
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7683
|
+
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
7684
|
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
7685
|
};
|
|
7683
|
-
var templateObject_1$
|
|
7686
|
+
var templateObject_1$1r;
|
|
7684
7687
|
|
|
7685
7688
|
var renderOptions = function (selectedColor, options) {
|
|
7686
7689
|
if (options == null || options.length === 0) {
|
|
@@ -7718,21 +7721,21 @@ var MultiColorPicker = function (_a) {
|
|
|
7718
7721
|
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
7722
|
};
|
|
7720
7723
|
|
|
7721
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7722
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7723
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7724
|
+
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'); });
|
|
7725
|
+
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"])));
|
|
7726
|
+
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
7727
|
return props.rightToLeft &&
|
|
7725
7728
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7726
7729
|
});
|
|
7727
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7728
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
7729
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7730
|
+
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; });
|
|
7731
|
+
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; });
|
|
7732
|
+
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
7733
|
var CrossSellCheckbox = function (_a) {
|
|
7731
7734
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7732
7735
|
var theme = useTheme();
|
|
7733
7736
|
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
7737
|
};
|
|
7735
|
-
var templateObject_1$
|
|
7738
|
+
var templateObject_1$1q, templateObject_2$16, templateObject_3$W, templateObject_4$K, templateObject_5$B, templateObject_6$w;
|
|
7736
7739
|
|
|
7737
7740
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7738
7741
|
__proto__: null,
|
|
@@ -7761,7 +7764,7 @@ var sizeMapper = (_a = {},
|
|
|
7761
7764
|
_a[ComponentSize.XSmall] = 'small',
|
|
7762
7765
|
_a[ComponentSize.XXSmall] = 'small',
|
|
7763
7766
|
_a);
|
|
7764
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7767
|
+
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
7768
|
var wide = _a.wide;
|
|
7766
7769
|
return (wide ? '100%' : 'fit-content');
|
|
7767
7770
|
}, function (_a) {
|
|
@@ -7783,11 +7786,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1o || (templateObj
|
|
|
7783
7786
|
var theme = _a.theme;
|
|
7784
7787
|
return theme.colors.text.disabled;
|
|
7785
7788
|
});
|
|
7786
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7789
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7787
7790
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7788
7791
|
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
7792
|
});
|
|
7790
|
-
var templateObject_1$
|
|
7793
|
+
var templateObject_1$1p, templateObject_2$15;
|
|
7791
7794
|
|
|
7792
7795
|
var BaseCTA = function (_a) {
|
|
7793
7796
|
var _b, _c, _d;
|
|
@@ -7878,44 +7881,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7878
7881
|
} }), void 0));
|
|
7879
7882
|
};
|
|
7880
7883
|
|
|
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$
|
|
7884
|
+
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; });
|
|
7885
|
+
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"])));
|
|
7886
|
+
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; });
|
|
7887
|
+
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
7888
|
var Note = function (_a) {
|
|
7886
7889
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7887
7890
|
var theme = useTheme();
|
|
7888
|
-
return (jsxs$1(Container$
|
|
7891
|
+
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
7892
|
};
|
|
7890
|
-
var templateObject_1$
|
|
7893
|
+
var templateObject_1$1o, templateObject_2$14, templateObject_3$V, templateObject_4$J;
|
|
7891
7894
|
|
|
7892
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7895
|
+
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
7896
|
var theme = _a.theme;
|
|
7894
7897
|
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
7898
|
});
|
|
7896
|
-
var Line = newStyled.div(templateObject_2$
|
|
7897
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7899
|
+
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; });
|
|
7900
|
+
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
7901
|
flexDirection: ['column', 'row'],
|
|
7899
7902
|
}));
|
|
7900
|
-
var Col = newStyled.div(templateObject_4$
|
|
7903
|
+
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
7904
|
margin: ['0', '0 1.25rem'],
|
|
7902
7905
|
marginBottom: ['1.875rem', '0'],
|
|
7903
7906
|
alignItems: ['center', 'flex-start'],
|
|
7904
7907
|
textAlign: ['center', 'inherit'],
|
|
7905
7908
|
width: ['100%', 'inherit'],
|
|
7906
7909
|
}));
|
|
7907
|
-
var IconContainer$4 = newStyled.div(templateObject_5$
|
|
7910
|
+
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
7911
|
marginRight: ['0', '0.438rem'],
|
|
7909
7912
|
marginBottom: ['10px', '0'],
|
|
7910
7913
|
width: ['auto', '1.5rem'],
|
|
7911
7914
|
}));
|
|
7912
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7915
|
+
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
7916
|
display: ['block', 'flex'],
|
|
7914
7917
|
}), function (_a) {
|
|
7915
7918
|
var theme = _a.theme;
|
|
7916
7919
|
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
7920
|
});
|
|
7918
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7921
|
+
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
7922
|
var theme = _a.theme;
|
|
7920
7923
|
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
7924
|
}, function (_a) {
|
|
@@ -7926,22 +7929,22 @@ var SectionDetails = newStyled.p(templateObject_7$p || (templateObject_7$p = __m
|
|
|
7926
7929
|
})
|
|
7927
7930
|
: '';
|
|
7928
7931
|
});
|
|
7929
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
7932
|
+
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
7933
|
var DeliveryDetails = function (_a) {
|
|
7931
7934
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7932
7935
|
var theme = useTheme();
|
|
7933
7936
|
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
7937
|
};
|
|
7935
|
-
var templateObject_1$
|
|
7938
|
+
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
7939
|
|
|
7937
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7940
|
+
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
7941
|
var top = _a.top;
|
|
7939
7942
|
return top;
|
|
7940
7943
|
}, function (_a) {
|
|
7941
7944
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7942
7945
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7943
7946
|
});
|
|
7944
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7947
|
+
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
7948
|
var height = _a.height;
|
|
7946
7949
|
return height;
|
|
7947
7950
|
}, function (_a) {
|
|
@@ -7988,20 +7991,20 @@ var Drawer = function (_a) {
|
|
|
7988
7991
|
}, [isOpen, onClose, onOpen]);
|
|
7989
7992
|
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
7993
|
};
|
|
7991
|
-
var templateObject_1$
|
|
7994
|
+
var templateObject_1$1m, templateObject_2$12;
|
|
7992
7995
|
|
|
7993
7996
|
var TooltipArrow = function (_a) {
|
|
7994
7997
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7995
7998
|
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
7999
|
};
|
|
7997
8000
|
|
|
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$
|
|
8001
|
+
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"])));
|
|
8002
|
+
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"])));
|
|
8003
|
+
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"])));
|
|
8004
|
+
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"])));
|
|
8005
|
+
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; });
|
|
8006
|
+
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; });
|
|
8007
|
+
var templateObject_1$1l, templateObject_2$11, templateObject_3$T, templateObject_4$H, templateObject_5$z, templateObject_6$u;
|
|
8005
8008
|
|
|
8006
8009
|
var DropdownListIcons = function (_a) {
|
|
8007
8010
|
var items = _a.items;
|
|
@@ -8014,13 +8017,13 @@ var Dropdown = function (_a) {
|
|
|
8014
8017
|
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
8018
|
};
|
|
8016
8019
|
|
|
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$
|
|
8020
|
+
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"])));
|
|
8021
|
+
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"])));
|
|
8022
|
+
var SizeLabel = newStyled.span(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8023
|
+
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"])));
|
|
8024
|
+
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"])));
|
|
8025
|
+
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"])));
|
|
8026
|
+
var templateObject_1$1k, templateObject_2$10, templateObject_3$S, templateObject_4$G, templateObject_5$y, templateObject_6$t;
|
|
8024
8027
|
|
|
8025
8028
|
var SizeDropdown = function (_a) {
|
|
8026
8029
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8043,15 +8046,15 @@ var SizeDropdown = function (_a) {
|
|
|
8043
8046
|
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
8047
|
};
|
|
8045
8048
|
|
|
8046
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
8047
|
-
var DialogDropdownWrapper2 = newStyled.div(templateObject_2
|
|
8048
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_3$
|
|
8049
|
+
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; });
|
|
8050
|
+
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; });
|
|
8051
|
+
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
8052
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
8050
8053
|
}, function (props) {
|
|
8051
8054
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8052
8055
|
});
|
|
8053
|
-
var DialogDropdownListItem = newStyled.li(templateObject_4$
|
|
8054
|
-
var DialogDropdownLink = newStyled.a(templateObject_5$
|
|
8056
|
+
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"])));
|
|
8057
|
+
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
8058
|
var DropdownDialog = function (_a) {
|
|
8056
8059
|
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
8060
|
var theme = useTheme$1();
|
|
@@ -8060,7 +8063,7 @@ var DropdownDialog = function (_a) {
|
|
|
8060
8063
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8061
8064
|
}) }), void 0) }), void 0));
|
|
8062
8065
|
};
|
|
8063
|
-
var templateObject_1$
|
|
8066
|
+
var templateObject_1$1j, templateObject_2$$, templateObject_3$R, templateObject_4$F, templateObject_5$x;
|
|
8064
8067
|
|
|
8065
8068
|
function FilteringDropdown(_a) {
|
|
8066
8069
|
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 +8096,29 @@ function FilteringDropdown(_a) {
|
|
|
8093
8096
|
}) }, void 0)] }), void 0));
|
|
8094
8097
|
}
|
|
8095
8098
|
|
|
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$
|
|
8099
|
+
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; });
|
|
8100
|
+
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; });
|
|
8101
|
+
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"])));
|
|
8102
|
+
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
8103
|
var Accordion = function (_a) {
|
|
8101
8104
|
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
8105
|
var theme = useTheme();
|
|
8103
8106
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8104
|
-
return (jsxs$1(Container$
|
|
8107
|
+
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
8108
|
};
|
|
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$
|
|
8109
|
+
var templateObject_1$1i, templateObject_2$_, templateObject_3$Q, templateObject_4$E;
|
|
8110
|
+
|
|
8111
|
+
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; });
|
|
8112
|
+
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"])));
|
|
8113
|
+
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"])));
|
|
8114
|
+
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"])));
|
|
8115
|
+
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; });
|
|
8116
|
+
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; });
|
|
8117
|
+
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'); });
|
|
8118
|
+
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
8119
|
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
8120
|
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$
|
|
8121
|
+
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
8122
|
|
|
8120
8123
|
var getStylesBySize$9 = function (size, theme) {
|
|
8121
8124
|
switch (size) {
|
|
@@ -8180,9 +8183,9 @@ var SelectorSecondary = function (_a) {
|
|
|
8180
8183
|
} }), id: id }, void 0));
|
|
8181
8184
|
};
|
|
8182
8185
|
|
|
8183
|
-
var UL = newStyled.ul(templateObject_1$
|
|
8184
|
-
var LI = newStyled.li(templateObject_2$
|
|
8185
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
8186
|
+
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"])));
|
|
8187
|
+
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; });
|
|
8188
|
+
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
8189
|
var Tags = function (_a) {
|
|
8187
8190
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
8188
8191
|
var theme = useTheme();
|
|
@@ -8190,7 +8193,7 @@ var Tags = function (_a) {
|
|
|
8190
8193
|
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
8194
|
}) }), void 0));
|
|
8192
8195
|
};
|
|
8193
|
-
var templateObject_1$
|
|
8196
|
+
var templateObject_1$1g, templateObject_2$Y, templateObject_3$O;
|
|
8194
8197
|
|
|
8195
8198
|
var Filters = function (_a) {
|
|
8196
8199
|
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 +8329,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8326
8329
|
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
8330
|
};
|
|
8328
8331
|
|
|
8329
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
8330
|
-
var Container$
|
|
8332
|
+
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"])));
|
|
8333
|
+
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
8334
|
var FitGuarantee = function (_a) {
|
|
8332
8335
|
var _b;
|
|
8333
8336
|
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 +8341,17 @@ var FitGuarantee = function (_a) {
|
|
|
8338
8341
|
console.error('Icon', iconName, 'not found');
|
|
8339
8342
|
return null;
|
|
8340
8343
|
}
|
|
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$
|
|
8344
|
+
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
8345
|
margin: '0.1rem 0',
|
|
8343
8346
|
width: '100%',
|
|
8344
8347
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
8345
8348
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8346
8349
|
} }, { 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
8350
|
};
|
|
8348
|
-
var templateObject_1$
|
|
8351
|
+
var templateObject_1$1f, templateObject_2$X;
|
|
8349
8352
|
|
|
8350
|
-
var Container$
|
|
8351
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
8353
|
+
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"])));
|
|
8354
|
+
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
8355
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8353
8356
|
border: 'none',
|
|
8354
8357
|
background: 'transparent',
|
|
@@ -8361,9 +8364,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
8361
8364
|
var FitPredictor = function (_a) {
|
|
8362
8365
|
var onClick = _a.onClick;
|
|
8363
8366
|
var theme = useTheme();
|
|
8364
|
-
return (jsxs(Container$
|
|
8367
|
+
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
8368
|
};
|
|
8366
|
-
var templateObject_1$
|
|
8369
|
+
var templateObject_1$1e, templateObject_2$W;
|
|
8367
8370
|
|
|
8368
8371
|
var Button$8 = newStyled.button(function () { return ({
|
|
8369
8372
|
background: 'transparent',
|
|
@@ -12607,14 +12610,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12607
12610
|
return Slider;
|
|
12608
12611
|
}(React__default.Component);
|
|
12609
12612
|
|
|
12610
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12613
|
+
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
12614
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12612
12615
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12613
12616
|
}, function (_a) {
|
|
12614
12617
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12615
12618
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12616
12619
|
});
|
|
12617
|
-
var templateObject_1$
|
|
12620
|
+
var templateObject_1$1d;
|
|
12618
12621
|
|
|
12619
12622
|
var getStylesBySize$8 = function (size) {
|
|
12620
12623
|
// rem units
|
|
@@ -12673,7 +12676,7 @@ var SliderNavigation = function (_a) {
|
|
|
12673
12676
|
} }, { 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
12677
|
};
|
|
12675
12678
|
|
|
12676
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12679
|
+
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
12680
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12678
12681
|
return borderRadiusVariant &&
|
|
12679
12682
|
"\n border-radius: 20px;\n ";
|
|
@@ -12691,7 +12694,7 @@ var Image$1 = newStyled.img(templateObject_1$1b || (templateObject_1$1b = __make
|
|
|
12691
12694
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12692
12695
|
: 'inherit';
|
|
12693
12696
|
});
|
|
12694
|
-
var templateObject_1$
|
|
12697
|
+
var templateObject_1$1c;
|
|
12695
12698
|
|
|
12696
12699
|
var ImageSmallPreview = function (_a) {
|
|
12697
12700
|
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 +12702,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12699
12702
|
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
12703
|
};
|
|
12701
12704
|
|
|
12702
|
-
var horizontalStyles = css(templateObject_1$
|
|
12703
|
-
var verticalStyles = css(templateObject_2$
|
|
12704
|
-
var Container$
|
|
12705
|
+
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"])));
|
|
12706
|
+
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"])));
|
|
12707
|
+
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
12708
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12706
12709
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12707
12710
|
}, function (_a) {
|
|
@@ -12712,12 +12715,12 @@ var Container$U = newStyled.div(templateObject_3$M || (templateObject_3$M = __ma
|
|
|
12712
12715
|
return hasOverflowArrows &&
|
|
12713
12716
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12714
12717
|
});
|
|
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$
|
|
12718
|
+
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"])));
|
|
12719
|
+
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"])));
|
|
12720
|
+
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"])));
|
|
12721
|
+
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"])));
|
|
12722
|
+
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"])));
|
|
12723
|
+
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
12724
|
|
|
12722
12725
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12723
12726
|
var loading = 'eager';
|
|
@@ -12745,7 +12748,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12745
12748
|
var element = document.querySelector(".imageListContainer");
|
|
12746
12749
|
element.scrollBy(0, 200);
|
|
12747
12750
|
};
|
|
12748
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
12751
|
+
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
12752
|
arrowWidth: 0.75,
|
|
12750
12753
|
arrowHeight: 1.25,
|
|
12751
12754
|
arrowPadding: 1.625,
|
|
@@ -14345,40 +14348,40 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14345
14348
|
afterZoomOut: PropTypes.func
|
|
14346
14349
|
} : {};
|
|
14347
14350
|
|
|
14348
|
-
var Container$
|
|
14351
|
+
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
14352
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14350
14353
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14351
14354
|
});
|
|
14352
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
14355
|
+
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
14356
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14354
14357
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
14355
14358
|
}, function (_a) {
|
|
14356
14359
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14357
14360
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
14358
14361
|
});
|
|
14359
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
14362
|
+
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
14363
|
var isCTAHidden = _a.isCTAHidden;
|
|
14361
14364
|
return (isCTAHidden ? '60px' : '120px');
|
|
14362
14365
|
});
|
|
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$
|
|
14366
|
+
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"])));
|
|
14367
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14368
|
+
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"])));
|
|
14369
|
+
var ImageStyled = newStyled(Image$3)(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14367
14370
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14368
14371
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14369
14372
|
});
|
|
14370
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$
|
|
14373
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14371
14374
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14372
14375
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14373
14376
|
});
|
|
14374
|
-
var templateObject_1$
|
|
14377
|
+
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
14378
|
|
|
14376
14379
|
var ImageProductSlide$1 = function (_a) {
|
|
14377
14380
|
var _b;
|
|
14378
14381
|
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
14382
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14380
14383
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
14381
|
-
return (jsxs$1(Container$
|
|
14384
|
+
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
14385
|
alt: content.alt,
|
|
14383
14386
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
14384
14387
|
loading: 'eager',
|
|
@@ -14386,8 +14389,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14386
14389
|
}, 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
14390
|
};
|
|
14388
14391
|
|
|
14389
|
-
var Container$
|
|
14390
|
-
var templateObject_1$
|
|
14392
|
+
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"])));
|
|
14393
|
+
var templateObject_1$19;
|
|
14391
14394
|
|
|
14392
14395
|
var getInitialIndex = function (images, selectedValue) {
|
|
14393
14396
|
if (selectedValue) {
|
|
@@ -14413,10 +14416,10 @@ var ProductGallery = function (_a) {
|
|
|
14413
14416
|
setActiveIndex(index);
|
|
14414
14417
|
};
|
|
14415
14418
|
var selectedImage = images[activeIndex];
|
|
14416
|
-
return (jsxs$1(Container$
|
|
14419
|
+
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
14420
|
};
|
|
14418
14421
|
|
|
14419
|
-
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$
|
|
14422
|
+
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
14423
|
var AmazonButton = function (_a) {
|
|
14421
14424
|
var onClick = _a.onClick;
|
|
14422
14425
|
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 +14428,9 @@ var PaypalButton = function (_a) {
|
|
|
14425
14428
|
var onClick = _a.onClick;
|
|
14426
14429
|
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
14430
|
};
|
|
14428
|
-
var templateObject_1$
|
|
14431
|
+
var templateObject_1$18;
|
|
14429
14432
|
|
|
14430
|
-
var Container$
|
|
14433
|
+
var Container$S = newStyled.div(function (props) { return ({
|
|
14431
14434
|
height: 'auto',
|
|
14432
14435
|
textAlign: 'center',
|
|
14433
14436
|
justifyContent: 'center',
|
|
@@ -14477,12 +14480,12 @@ var IconsWithTitle = function (_a) {
|
|
|
14477
14480
|
textAlign: 'center',
|
|
14478
14481
|
lineHeight: '18px',
|
|
14479
14482
|
};
|
|
14480
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
14483
|
+
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
14484
|
};
|
|
14482
14485
|
|
|
14483
|
-
var Container$
|
|
14484
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14485
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14486
|
+
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'); });
|
|
14487
|
+
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'); });
|
|
14488
|
+
var StyledTitle = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14486
14489
|
var titlePosition = _a.titlePosition;
|
|
14487
14490
|
return titlePosition == 'center' &&
|
|
14488
14491
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14490,15 +14493,15 @@ var StyledTitle = newStyled.div(templateObject_3$K || (templateObject_3$K = __ma
|
|
|
14490
14493
|
var ImageCardWithDescription = function (_a) {
|
|
14491
14494
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14492
14495
|
var isMobile = useWindowDimensions().isMobile;
|
|
14493
|
-
return (jsxs$1(Container$
|
|
14496
|
+
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
14497
|
};
|
|
14495
|
-
var templateObject_1$
|
|
14498
|
+
var templateObject_1$17, templateObject_2$T, templateObject_3$L;
|
|
14496
14499
|
|
|
14497
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14500
|
+
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
14501
|
var color = _a.color;
|
|
14499
14502
|
return color;
|
|
14500
14503
|
});
|
|
14501
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14504
|
+
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
14505
|
var color = _a.color;
|
|
14503
14506
|
return color;
|
|
14504
14507
|
});
|
|
@@ -14507,7 +14510,7 @@ var InputLabel = function (_a) {
|
|
|
14507
14510
|
var theme = useTheme();
|
|
14508
14511
|
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
14512
|
};
|
|
14510
|
-
var templateObject_1$
|
|
14513
|
+
var templateObject_1$16, templateObject_2$S;
|
|
14511
14514
|
|
|
14512
14515
|
var containerByStatus = function (theme, status) {
|
|
14513
14516
|
if (status === InputValidationType.Valid)
|
|
@@ -14516,12 +14519,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14516
14519
|
return theme.colors.semantic.urgent.color;
|
|
14517
14520
|
return '';
|
|
14518
14521
|
};
|
|
14519
|
-
var Container$
|
|
14522
|
+
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
14523
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14521
14524
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14522
14525
|
});
|
|
14523
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14524
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14526
|
+
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"])));
|
|
14527
|
+
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
14528
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14526
14529
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14527
14530
|
}, function (_a) {
|
|
@@ -14576,11 +14579,11 @@ var StyledInput = newStyled.input(templateObject_3$J || (templateObject_3$J = __
|
|
|
14576
14579
|
return hasValue &&
|
|
14577
14580
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14578
14581
|
});
|
|
14579
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14582
|
+
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
14583
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14581
14584
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14582
14585
|
});
|
|
14583
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14586
|
+
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
14587
|
var theme = _a.theme;
|
|
14585
14588
|
return theme.component.input.placeholderColor;
|
|
14586
14589
|
}, function (_a) {
|
|
@@ -14593,8 +14596,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$s || (templateObject_5
|
|
|
14593
14596
|
var theme = _a.theme;
|
|
14594
14597
|
return theme.component.input.lineHeight;
|
|
14595
14598
|
});
|
|
14596
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14597
|
-
var templateObject_1$
|
|
14599
|
+
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"])));
|
|
14600
|
+
var templateObject_1$15, templateObject_2$R, templateObject_3$K, templateObject_4$A, templateObject_5$t, templateObject_6$p;
|
|
14598
14601
|
|
|
14599
14602
|
var BaseInput = function (_a) {
|
|
14600
14603
|
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 +14621,7 @@ var BaseInput = function (_a) {
|
|
|
14618
14621
|
}, [status]);
|
|
14619
14622
|
var hasValue = Boolean(value);
|
|
14620
14623
|
var errorMessage = customErrorMessage || (status === InputValidationType.Error && required);
|
|
14621
|
-
return (jsxs$1(Container$
|
|
14624
|
+
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
14625
|
onChange(event.target.value, event);
|
|
14623
14626
|
}, 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
14627
|
onChange('', { target: { value: '' } });
|
|
@@ -14639,11 +14642,11 @@ var Button$6 = function (_a) {
|
|
|
14639
14642
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14640
14643
|
};
|
|
14641
14644
|
|
|
14642
|
-
var Container$
|
|
14645
|
+
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
14646
|
var theme = _a.theme;
|
|
14644
14647
|
return theme.component.inputCustom.input.borderRadius;
|
|
14645
14648
|
});
|
|
14646
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14649
|
+
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
14650
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14648
14651
|
return defaultRounded
|
|
14649
14652
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14658,23 +14661,23 @@ var Custom = function (_a) {
|
|
|
14658
14661
|
text: text,
|
|
14659
14662
|
disabled: rest.disabled,
|
|
14660
14663
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14661
|
-
return (jsx$1(Container$
|
|
14664
|
+
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
14665
|
};
|
|
14663
|
-
var templateObject_1$
|
|
14666
|
+
var templateObject_1$14, templateObject_2$Q;
|
|
14664
14667
|
|
|
14665
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14668
|
+
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
14669
|
var size = _a.size;
|
|
14667
14670
|
return (size === 'small' ? '36px' : '');
|
|
14668
14671
|
});
|
|
14669
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14670
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14672
|
+
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"])));
|
|
14673
|
+
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
14674
|
var Success = function (_a) {
|
|
14672
14675
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14673
14676
|
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
14677
|
};
|
|
14675
|
-
var templateObject_1$
|
|
14678
|
+
var templateObject_1$13, templateObject_2$P, templateObject_3$J;
|
|
14676
14679
|
|
|
14677
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14680
|
+
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
14681
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14679
14682
|
return status === InputValidationType.Empty &&
|
|
14680
14683
|
type === 'primary' &&
|
|
@@ -14691,16 +14694,16 @@ var BasePlusButton = function (_a) {
|
|
|
14691
14694
|
}
|
|
14692
14695
|
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
14696
|
};
|
|
14694
|
-
var templateObject_1$
|
|
14697
|
+
var templateObject_1$12;
|
|
14695
14698
|
|
|
14696
|
-
var Container$
|
|
14697
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14699
|
+
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"])));
|
|
14700
|
+
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
14701
|
var BasePlusIcon = function (_a) {
|
|
14699
14702
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14700
14703
|
var theme = useTheme();
|
|
14701
|
-
return (jsx$1(Container$
|
|
14704
|
+
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
14705
|
};
|
|
14703
|
-
var templateObject_1$
|
|
14706
|
+
var templateObject_1$11, templateObject_2$O;
|
|
14704
14707
|
|
|
14705
14708
|
var Input$3 = {
|
|
14706
14709
|
Simple: BaseInput,
|
|
@@ -14840,21 +14843,21 @@ var Portal = function (_a) {
|
|
|
14840
14843
|
var visibleStyle = function (_a) {
|
|
14841
14844
|
var opened = _a.opened;
|
|
14842
14845
|
return opened
|
|
14843
|
-
? css(templateObject_1
|
|
14846
|
+
? 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
14847
|
};
|
|
14845
14848
|
var transformStyle = function (_a) {
|
|
14846
14849
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14847
14850
|
return opened
|
|
14848
|
-
? css(templateObject_3$
|
|
14851
|
+
? 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
14852
|
};
|
|
14850
|
-
var Container$
|
|
14853
|
+
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
14854
|
var width = _a.width;
|
|
14852
14855
|
return width
|
|
14853
|
-
? css(templateObject_5$
|
|
14856
|
+
? css(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14854
14857
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14855
14858
|
});
|
|
14856
14859
|
}, visibleStyle, transformStyle);
|
|
14857
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14860
|
+
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
14861
|
var Modal = function (_a) {
|
|
14859
14862
|
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
14863
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14864,7 +14867,7 @@ var Modal = function (_a) {
|
|
|
14864
14867
|
}
|
|
14865
14868
|
close();
|
|
14866
14869
|
};
|
|
14867
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14870
|
+
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
14871
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14869
14872
|
onDismiss();
|
|
14870
14873
|
} }, void 0)] }), void 0));
|
|
@@ -14895,7 +14898,7 @@ var useModal = function (id) {
|
|
|
14895
14898
|
close: close,
|
|
14896
14899
|
}); }, [close, open, opened]);
|
|
14897
14900
|
};
|
|
14898
|
-
var templateObject_1
|
|
14901
|
+
var templateObject_1$10, templateObject_2$N, templateObject_3$I, templateObject_4$z, templateObject_5$s, templateObject_6$o, templateObject_7$m;
|
|
14899
14902
|
|
|
14900
14903
|
var htmlReactParser = {exports: {}};
|
|
14901
14904
|
|
|
@@ -18676,7 +18679,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18676
18679
|
HTMLReactParser$1.attributesToProps;
|
|
18677
18680
|
HTMLReactParser$1.Element;
|
|
18678
18681
|
|
|
18679
|
-
var Bar$1 = newStyled.div(templateObject_1
|
|
18682
|
+
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
18683
|
var height = _a.height;
|
|
18681
18684
|
return height || '0.5rem';
|
|
18682
18685
|
}, function (_a) {
|
|
@@ -18715,7 +18718,7 @@ var BarContainer = newStyled.div({
|
|
|
18715
18718
|
padding: '0 16px',
|
|
18716
18719
|
position: 'relative',
|
|
18717
18720
|
});
|
|
18718
|
-
var Container$
|
|
18721
|
+
var Container$M = newStyled.div(function (_a) {
|
|
18719
18722
|
var backgroundColor = _a.backgroundColor;
|
|
18720
18723
|
return ({
|
|
18721
18724
|
width: '475px',
|
|
@@ -18728,7 +18731,7 @@ var Container$L = newStyled.div(function (_a) {
|
|
|
18728
18731
|
background: backgroundColor,
|
|
18729
18732
|
});
|
|
18730
18733
|
});
|
|
18731
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18734
|
+
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
18735
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18733
18736
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18734
18737
|
};
|
|
@@ -18757,33 +18760,33 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18757
18760
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18758
18761
|
return (jsx$1(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18759
18762
|
};
|
|
18760
|
-
return (jsxs$1(Container$
|
|
18763
|
+
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
18764
|
};
|
|
18762
|
-
var templateObject_1
|
|
18765
|
+
var templateObject_1$$, templateObject_2$M;
|
|
18763
18766
|
|
|
18764
|
-
var Container$
|
|
18767
|
+
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
18768
|
var theme = _a.theme;
|
|
18766
18769
|
return theme.component.orderBar.backgroundColor;
|
|
18767
18770
|
});
|
|
18768
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18771
|
+
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
18772
|
var OrderBar = function (_a) {
|
|
18770
18773
|
var message = _a.message, color = _a.color;
|
|
18771
18774
|
var theme = useTheme();
|
|
18772
|
-
return (jsxs$1(Container$
|
|
18775
|
+
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
18776
|
};
|
|
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$
|
|
18777
|
+
var templateObject_1$_, templateObject_2$L;
|
|
18778
|
+
|
|
18779
|
+
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"])));
|
|
18780
|
+
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"])));
|
|
18781
|
+
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"])));
|
|
18782
|
+
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"])));
|
|
18783
|
+
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"])));
|
|
18784
|
+
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"])));
|
|
18785
|
+
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"])));
|
|
18786
|
+
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
18787
|
var PackSelector = function (_a) {
|
|
18785
18788
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18786
|
-
return (jsx$1(Container$
|
|
18789
|
+
return (jsx$1(Container$K, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18787
18790
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18788
18791
|
}) }), void 0));
|
|
18789
18792
|
};
|
|
@@ -18810,14 +18813,14 @@ var PackCard = function (_a) {
|
|
|
18810
18813
|
currency: currencyCode || 'USD',
|
|
18811
18814
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18812
18815
|
};
|
|
18813
|
-
var templateObject_1$
|
|
18816
|
+
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
18817
|
|
|
18815
|
-
var Container$
|
|
18816
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18817
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18818
|
+
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"])));
|
|
18819
|
+
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"])));
|
|
18820
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18818
18821
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18819
18822
|
}));
|
|
18820
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18823
|
+
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
18824
|
var bold = _a.bold;
|
|
18822
18825
|
return (bold ? '700' : '500');
|
|
18823
18826
|
}, function (_a) {
|
|
@@ -18834,7 +18837,7 @@ var PageNumber = newStyled.span(templateObject_4$w || (templateObject_4$w = __ma
|
|
|
18834
18837
|
var background = _a.background;
|
|
18835
18838
|
return background || 'unset';
|
|
18836
18839
|
});
|
|
18837
|
-
var templateObject_1$
|
|
18840
|
+
var templateObject_1$Y, templateObject_2$J, templateObject_3$G, templateObject_4$x;
|
|
18838
18841
|
|
|
18839
18842
|
var Pagination = function (_a) {
|
|
18840
18843
|
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 +18883,7 @@ var Pagination = function (_a) {
|
|
|
18880
18883
|
}
|
|
18881
18884
|
return pages;
|
|
18882
18885
|
}, [from, page, showReducedPages, to]);
|
|
18883
|
-
return (jsxs$1(Container$
|
|
18886
|
+
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
18887
|
};
|
|
18885
18888
|
|
|
18886
18889
|
var PaginatorBlog = function (_a) {
|
|
@@ -18894,12 +18897,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18894
18897
|
setPage(page);
|
|
18895
18898
|
onChange(page);
|
|
18896
18899
|
};
|
|
18897
|
-
return (jsxs$1(Container$
|
|
18900
|
+
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
18901
|
? theme.colors.shades['white'].color
|
|
18899
18902
|
: 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
18903
|
};
|
|
18901
18904
|
|
|
18902
|
-
var Container$
|
|
18905
|
+
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
18906
|
var width = _a.width;
|
|
18904
18907
|
return width;
|
|
18905
18908
|
}, function (_a) {
|
|
@@ -18915,14 +18918,14 @@ var Container$H = newStyled.div(templateObject_1$W || (templateObject_1$W = __ma
|
|
|
18915
18918
|
var PaymentMethod = function (_a) {
|
|
18916
18919
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18917
18920
|
var theme = useTheme();
|
|
18918
|
-
return (jsx$1(Container$
|
|
18921
|
+
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
18922
|
};
|
|
18920
|
-
var templateObject_1$
|
|
18923
|
+
var templateObject_1$X;
|
|
18921
18924
|
|
|
18922
|
-
var Container$
|
|
18925
|
+
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
18926
|
var IMAGE_WIDTH = '63px';
|
|
18924
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18925
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18927
|
+
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);
|
|
18928
|
+
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
18929
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18927
18930
|
}), IMAGE_WIDTH);
|
|
18928
18931
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18945,7 +18948,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18945
18948
|
margin: margin,
|
|
18946
18949
|
});
|
|
18947
18950
|
});
|
|
18948
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18951
|
+
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
18952
|
var withTag = _a.withTag; _a.theme;
|
|
18950
18953
|
return withTag
|
|
18951
18954
|
? mediaQueries({
|
|
@@ -18954,9 +18957,9 @@ var PriceContainer = newStyled.div(templateObject_4$v || (templateObject_4$v = _
|
|
|
18954
18957
|
})
|
|
18955
18958
|
: 'justify-content: end';
|
|
18956
18959
|
});
|
|
18957
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18958
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18959
|
-
var Gift = newStyled.span(templateObject_7$
|
|
18960
|
+
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"])));
|
|
18961
|
+
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"])));
|
|
18962
|
+
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
18963
|
var theme = _a.theme;
|
|
18961
18964
|
return theme.colors.semantic.urgent.color;
|
|
18962
18965
|
});
|
|
@@ -18964,9 +18967,9 @@ var SimpleOrderItem = function (_a) {
|
|
|
18964
18967
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18965
18968
|
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
18969
|
var theme = useTheme();
|
|
18967
|
-
return (jsxs$1(Container$
|
|
18970
|
+
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
18971
|
};
|
|
18969
|
-
var templateObject_1$
|
|
18972
|
+
var templateObject_1$W, templateObject_2$I, templateObject_3$F, templateObject_4$w, templateObject_5$q, templateObject_6$m, templateObject_7$k;
|
|
18970
18973
|
|
|
18971
18974
|
var P$1 = newStyled.p(function (_a) {
|
|
18972
18975
|
var color = _a.color;
|
|
@@ -18980,7 +18983,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18980
18983
|
margin: '0.938rem 4.188rem',
|
|
18981
18984
|
});
|
|
18982
18985
|
});
|
|
18983
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18986
|
+
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
18987
|
var height = _a.height;
|
|
18985
18988
|
return height || '0.5rem';
|
|
18986
18989
|
}, function (_a) {
|
|
@@ -19009,7 +19012,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
19009
19012
|
position: 'absolute',
|
|
19010
19013
|
});
|
|
19011
19014
|
});
|
|
19012
|
-
var Container$
|
|
19015
|
+
var Container$G = newStyled.div(function (_a) {
|
|
19013
19016
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
19014
19017
|
return ({
|
|
19015
19018
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -19023,14 +19026,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
19023
19026
|
var ProgressBar = function (_a) {
|
|
19024
19027
|
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
19028
|
var theme = useTheme();
|
|
19026
|
-
return (jsxs$1(Container$
|
|
19029
|
+
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
19030
|
};
|
|
19028
|
-
var templateObject_1$
|
|
19031
|
+
var templateObject_1$V;
|
|
19029
19032
|
|
|
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$
|
|
19033
|
+
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; });
|
|
19034
|
+
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"])));
|
|
19035
|
+
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"])));
|
|
19036
|
+
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
19037
|
var QuantityPicker = function (_a) {
|
|
19035
19038
|
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
19039
|
var theme = useTheme();
|
|
@@ -19053,9 +19056,9 @@ var QuantityPicker = function (_a) {
|
|
|
19053
19056
|
return clamp(value);
|
|
19054
19057
|
});
|
|
19055
19058
|
}, [value, clamp]);
|
|
19056
|
-
return (jsxs$1(Container$
|
|
19059
|
+
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
19060
|
};
|
|
19058
|
-
var templateObject_1$
|
|
19061
|
+
var templateObject_1$U, templateObject_2$H, templateObject_3$E, templateObject_4$v;
|
|
19059
19062
|
|
|
19060
19063
|
/* base styles & size variants */
|
|
19061
19064
|
var CustomRadioStyles$1 = {
|
|
@@ -19124,9 +19127,9 @@ var ContainerStyles$1 = {
|
|
|
19124
19127
|
},
|
|
19125
19128
|
};
|
|
19126
19129
|
|
|
19127
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19128
|
-
var Container$
|
|
19129
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19130
|
+
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"])));
|
|
19131
|
+
var Container$E = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19132
|
+
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
19133
|
var disabled = _a.disabled;
|
|
19131
19134
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19132
19135
|
});
|
|
@@ -19134,7 +19137,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19134
19137
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19135
19138
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19136
19139
|
]; });
|
|
19137
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19140
|
+
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
19141
|
var RadioPrimary = function (_a) {
|
|
19139
19142
|
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
19143
|
var theme = useTheme();
|
|
@@ -19142,9 +19145,9 @@ var RadioPrimary = function (_a) {
|
|
|
19142
19145
|
var value = event.currentTarget.value;
|
|
19143
19146
|
onChange({ value: value, label: label });
|
|
19144
19147
|
};
|
|
19145
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
19148
|
+
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
19149
|
};
|
|
19147
|
-
var templateObject_1$
|
|
19150
|
+
var templateObject_1$T, templateObject_2$G, templateObject_3$D;
|
|
19148
19151
|
|
|
19149
19152
|
var RadioGroupInput = function (_a) {
|
|
19150
19153
|
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 +19226,9 @@ var ContainerStyles = {
|
|
|
19223
19226
|
},
|
|
19224
19227
|
};
|
|
19225
19228
|
|
|
19226
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19227
|
-
var Container$
|
|
19228
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19229
|
+
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"])));
|
|
19230
|
+
var Container$D = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19231
|
+
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
19232
|
var disabled = _a.disabled;
|
|
19230
19233
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19231
19234
|
});
|
|
@@ -19233,7 +19236,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19233
19236
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19234
19237
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19235
19238
|
]; });
|
|
19236
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19239
|
+
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
19240
|
var theme = _a.theme;
|
|
19238
19241
|
return theme.component.radio.textSize;
|
|
19239
19242
|
}, function (_a) {
|
|
@@ -19247,9 +19250,9 @@ var ClubRadioInput = function (_a) {
|
|
|
19247
19250
|
var value = event.currentTarget.value;
|
|
19248
19251
|
onChange({ value: value, label: label });
|
|
19249
19252
|
};
|
|
19250
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
19253
|
+
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
19254
|
};
|
|
19252
|
-
var templateObject_1$
|
|
19255
|
+
var templateObject_1$S, templateObject_2$F, templateObject_3$C;
|
|
19253
19256
|
|
|
19254
19257
|
var ClubRadioGroupInput = function (_a) {
|
|
19255
19258
|
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 +19280,14 @@ function formatDate(date, format) {
|
|
|
19277
19280
|
}
|
|
19278
19281
|
}
|
|
19279
19282
|
|
|
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$
|
|
19283
|
+
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"])));
|
|
19284
|
+
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"])));
|
|
19285
|
+
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"])));
|
|
19286
|
+
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"])));
|
|
19287
|
+
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"])));
|
|
19288
|
+
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"])));
|
|
19289
|
+
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"])));
|
|
19290
|
+
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
19291
|
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
19292
|
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
19293
|
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 +19318,21 @@ var Review$1 = function (_a) {
|
|
|
19315
19318
|
}
|
|
19316
19319
|
}
|
|
19317
19320
|
}, [opened]);
|
|
19318
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
19321
|
+
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
19322
|
(!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
19323
|
};
|
|
19321
|
-
var templateObject_1$
|
|
19324
|
+
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
19325
|
|
|
19323
19326
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19324
19327
|
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$
|
|
19328
|
+
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"])));
|
|
19329
|
+
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"])));
|
|
19330
|
+
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"])));
|
|
19331
|
+
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"])));
|
|
19332
|
+
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"])));
|
|
19333
|
+
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"])));
|
|
19334
|
+
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"])));
|
|
19335
|
+
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
19336
|
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
19337
|
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
19338
|
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 +19367,7 @@ var Review = function (_a) {
|
|
|
19364
19367
|
});
|
|
19365
19368
|
};
|
|
19366
19369
|
}, [randomId]);
|
|
19367
|
-
return (jsxs$1(Container$
|
|
19370
|
+
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
19371
|
__html: showMoreMobile
|
|
19369
19372
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19370
19373
|
: description,
|
|
@@ -19374,15 +19377,15 @@ var Review = function (_a) {
|
|
|
19374
19377
|
: description,
|
|
19375
19378
|
} }, 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
19379
|
};
|
|
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$
|
|
19380
|
+
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;
|
|
19381
|
+
|
|
19382
|
+
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"])));
|
|
19383
|
+
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"])));
|
|
19384
|
+
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"])));
|
|
19385
|
+
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"])));
|
|
19386
|
+
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"])));
|
|
19387
|
+
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"])));
|
|
19388
|
+
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
19389
|
var backgroundUrl = _a.backgroundUrl;
|
|
19387
19390
|
return "url(".concat(backgroundUrl, ")");
|
|
19388
19391
|
});
|
|
@@ -19390,25 +19393,25 @@ var ReviewsHeader = function (_a) {
|
|
|
19390
19393
|
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
19394
|
var starsNumber = 5;
|
|
19392
19395
|
var theme = useTheme();
|
|
19393
|
-
return (jsxs$1(Container$
|
|
19396
|
+
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
19397
|
};
|
|
19395
|
-
var templateObject_1$
|
|
19398
|
+
var templateObject_1$P, templateObject_2$C, templateObject_3$z, templateObject_4$s, templateObject_5$n, templateObject_6$j, templateObject_7$h;
|
|
19396
19399
|
|
|
19397
|
-
var Container$
|
|
19398
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
19400
|
+
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"])));
|
|
19401
|
+
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
19402
|
var ScrollToTop = function (_a) {
|
|
19400
19403
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19401
19404
|
var theme = useTheme();
|
|
19402
19405
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19403
|
-
return (jsxs$1(Container$
|
|
19406
|
+
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
19407
|
};
|
|
19405
|
-
var templateObject_1$
|
|
19408
|
+
var templateObject_1$O, templateObject_2$B;
|
|
19406
19409
|
|
|
19407
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19410
|
+
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
19411
|
right: ['1rem', '7.75rem'],
|
|
19409
19412
|
top: ['0.75rem', '0.75rem'],
|
|
19410
19413
|
}));
|
|
19411
|
-
var templateObject_1$
|
|
19414
|
+
var templateObject_1$N;
|
|
19412
19415
|
|
|
19413
19416
|
var ClearButton = function (_a) {
|
|
19414
19417
|
var onClick = _a.onClick;
|
|
@@ -19416,7 +19419,7 @@ var ClearButton = function (_a) {
|
|
|
19416
19419
|
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
19420
|
};
|
|
19418
19421
|
|
|
19419
|
-
var Container$
|
|
19422
|
+
var Container$y = newStyled.div({
|
|
19420
19423
|
display: 'flex',
|
|
19421
19424
|
justifyContent: 'center',
|
|
19422
19425
|
padding: '1rem',
|
|
@@ -19424,10 +19427,10 @@ var Container$x = newStyled.div({
|
|
|
19424
19427
|
|
|
19425
19428
|
var Footer = function (_a) {
|
|
19426
19429
|
var text = _a.text, onClick = _a.onClick;
|
|
19427
|
-
return (jsx$1(Container$
|
|
19430
|
+
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
19431
|
};
|
|
19429
19432
|
|
|
19430
|
-
var Container$
|
|
19433
|
+
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
19434
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19432
19435
|
}));
|
|
19433
19436
|
var Description = newStyled.div({
|
|
@@ -19441,20 +19444,20 @@ var Description = newStyled.div({
|
|
|
19441
19444
|
textAlign: 'start',
|
|
19442
19445
|
},
|
|
19443
19446
|
});
|
|
19444
|
-
var templateObject_1$
|
|
19447
|
+
var templateObject_1$M;
|
|
19445
19448
|
|
|
19446
19449
|
var ProductItem = function (_a) {
|
|
19447
19450
|
var _b;
|
|
19448
19451
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19449
19452
|
var theme = useTheme();
|
|
19450
|
-
return (jsxs$1(Container$
|
|
19453
|
+
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
19454
|
};
|
|
19452
19455
|
|
|
19453
19456
|
var OptionsList = newStyled.ul({
|
|
19454
19457
|
margin: '0px',
|
|
19455
19458
|
padding: '0px',
|
|
19456
19459
|
});
|
|
19457
|
-
var OptionItem = newStyled.li(templateObject_1$
|
|
19460
|
+
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
19461
|
padding: [0, '0rem 1rem'],
|
|
19459
19462
|
borderRadius: [0, '0.5rem'],
|
|
19460
19463
|
}));
|
|
@@ -19466,20 +19469,20 @@ var Anchor = newStyled.a({
|
|
|
19466
19469
|
padding: 0,
|
|
19467
19470
|
textDecoration: 'none',
|
|
19468
19471
|
});
|
|
19469
|
-
var Container$
|
|
19472
|
+
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
19473
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19471
19474
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19472
19475
|
borderRadius: ['0', '0.5rem'],
|
|
19473
19476
|
}));
|
|
19474
|
-
var Header$2 = newStyled.div(templateObject_3$
|
|
19477
|
+
var Header$2 = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mediaQueries({
|
|
19475
19478
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19476
19479
|
}));
|
|
19477
|
-
var templateObject_1$
|
|
19480
|
+
var templateObject_1$L, templateObject_2$A, templateObject_3$y;
|
|
19478
19481
|
|
|
19479
19482
|
var ResultsPanel = function (_a) {
|
|
19480
19483
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19481
19484
|
var theme = useTheme();
|
|
19482
|
-
return (jsxs$1(Container$
|
|
19485
|
+
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
19486
|
var optionUrl = _a.optionUrl, price = _a.price, src = _a.src, title = _a.title;
|
|
19484
19487
|
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
19488
|
}) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
@@ -19493,8 +19496,8 @@ var SearchIconContainer = newStyled.div({
|
|
|
19493
19496
|
background: 'white',
|
|
19494
19497
|
alignSelf: 'center',
|
|
19495
19498
|
});
|
|
19496
|
-
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19497
|
-
var templateObject_1$
|
|
19499
|
+
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"])));
|
|
19500
|
+
var templateObject_1$K;
|
|
19498
19501
|
|
|
19499
19502
|
var SearchControl = function (_a) {
|
|
19500
19503
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
@@ -19540,7 +19543,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19540
19543
|
},
|
|
19541
19544
|
},
|
|
19542
19545
|
}); });
|
|
19543
|
-
var Container$
|
|
19546
|
+
var Container$v = newStyled.div({
|
|
19544
19547
|
position: 'relative',
|
|
19545
19548
|
display: 'flex',
|
|
19546
19549
|
});
|
|
@@ -19595,7 +19598,7 @@ var SearchBar = function (_a) {
|
|
|
19595
19598
|
if (e.cancelable) {
|
|
19596
19599
|
e.preventDefault();
|
|
19597
19600
|
}
|
|
19598
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
19601
|
+
}, 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
19602
|
if (e.key === 'Enter') {
|
|
19600
19603
|
if (e.cancelable) {
|
|
19601
19604
|
e.preventDefault();
|
|
@@ -19606,21 +19609,21 @@ var SearchBar = function (_a) {
|
|
|
19606
19609
|
} }, 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
19610
|
};
|
|
19608
19611
|
|
|
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$
|
|
19612
|
+
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"])));
|
|
19613
|
+
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"])));
|
|
19614
|
+
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"])));
|
|
19615
|
+
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"])));
|
|
19616
|
+
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"])));
|
|
19617
|
+
var templateObject_1$J, templateObject_2$z, templateObject_3$x, templateObject_4$r, templateObject_5$m;
|
|
19615
19618
|
|
|
19616
19619
|
var SearchNavigation = function (_a) {
|
|
19617
19620
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19618
|
-
return (jsxs$1(Container$
|
|
19621
|
+
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
19622
|
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
19623
|
}) }, void 0)] }, void 0));
|
|
19621
19624
|
};
|
|
19622
19625
|
|
|
19623
|
-
var Container$
|
|
19626
|
+
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
19627
|
var alignCenter = _a.alignCenter;
|
|
19625
19628
|
return alignCenter &&
|
|
19626
19629
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19630,26 +19633,26 @@ var Container$s = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
|
|
|
19630
19633
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19631
19634
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19632
19635
|
});
|
|
19633
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19634
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19636
|
+
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"])));
|
|
19637
|
+
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
19638
|
var ShortBanner = function (_a) {
|
|
19636
19639
|
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
19640
|
var theme = useTheme();
|
|
19638
|
-
return (jsxs$1(Container$
|
|
19641
|
+
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
19642
|
};
|
|
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$
|
|
19643
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$w;
|
|
19644
|
+
|
|
19645
|
+
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; });
|
|
19646
|
+
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; });
|
|
19647
|
+
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; });
|
|
19648
|
+
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"])));
|
|
19649
|
+
var TopLabel$1 = newStyled(Label$2)(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19650
|
+
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"])));
|
|
19651
|
+
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"])));
|
|
19652
|
+
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
19653
|
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
19654
|
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$
|
|
19655
|
+
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
19656
|
|
|
19654
19657
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19655
19658
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19685,21 +19688,21 @@ var SizeChartTable = function (_a) {
|
|
|
19685
19688
|
var theme = useTheme();
|
|
19686
19689
|
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
19690
|
var isMultilabel = xLabel && yLabel;
|
|
19688
|
-
return (jsxs$1(Container$
|
|
19691
|
+
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
19692
|
backgroundColor: getCellColor$2(index, cell),
|
|
19690
19693
|
}, 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
19694
|
};
|
|
19692
19695
|
|
|
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$
|
|
19696
|
+
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; });
|
|
19697
|
+
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; });
|
|
19698
|
+
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; });
|
|
19699
|
+
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
19700
|
var SizeTable = function (_a) {
|
|
19698
19701
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19699
19702
|
var theme = useTheme();
|
|
19700
19703
|
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
19704
|
};
|
|
19702
|
-
var templateObject_1$
|
|
19705
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$u, templateObject_4$p;
|
|
19703
19706
|
|
|
19704
19707
|
var getStylesBySize$7 = function (size) {
|
|
19705
19708
|
switch (size) {
|
|
@@ -19726,7 +19729,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19726
19729
|
} });
|
|
19727
19730
|
};
|
|
19728
19731
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19729
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19732
|
+
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
19733
|
};
|
|
19731
19734
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19732
19735
|
if (disabled)
|
|
@@ -19742,23 +19745,23 @@ var TextButton = function (_a) {
|
|
|
19742
19745
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19743
19746
|
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
19747
|
};
|
|
19745
|
-
var templateObject_1$
|
|
19748
|
+
var templateObject_1$F;
|
|
19746
19749
|
|
|
19747
|
-
var Container$
|
|
19748
|
-
var P = newStyled.p(templateObject_2$
|
|
19749
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19750
|
+
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"])));
|
|
19751
|
+
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"])));
|
|
19752
|
+
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
19753
|
var SizeFitGuide = function (_a) {
|
|
19751
19754
|
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$
|
|
19755
|
+
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
19756
|
};
|
|
19754
|
-
var templateObject_1$
|
|
19757
|
+
var templateObject_1$E, templateObject_2$v, templateObject_3$t;
|
|
19755
19758
|
|
|
19756
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19759
|
+
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
19760
|
var inline = _a.inline;
|
|
19758
19761
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19759
19762
|
});
|
|
19760
|
-
var Row = newStyled.div(templateObject_2$
|
|
19761
|
-
var templateObject_1$
|
|
19763
|
+
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"])));
|
|
19764
|
+
var templateObject_1$D, templateObject_2$u;
|
|
19762
19765
|
|
|
19763
19766
|
var SizeSelector = function (_a) {
|
|
19764
19767
|
var _b;
|
|
@@ -19780,7 +19783,7 @@ var SizeSelector = function (_a) {
|
|
|
19780
19783
|
}) }), void 0)] }), void 0));
|
|
19781
19784
|
};
|
|
19782
19785
|
|
|
19783
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19786
|
+
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
19787
|
var titleSize = _a.titleSize;
|
|
19785
19788
|
return titleSize;
|
|
19786
19789
|
}, function (_a) {
|
|
@@ -19797,18 +19800,18 @@ var Tab = function (_a) {
|
|
|
19797
19800
|
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
19801
|
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
19802
|
};
|
|
19800
|
-
var templateObject_1$
|
|
19803
|
+
var templateObject_1$C;
|
|
19801
19804
|
|
|
19802
|
-
var Container$
|
|
19803
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19805
|
+
var Container$q = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19806
|
+
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
19807
|
var backgroundColor = _a.backgroundColor;
|
|
19805
19808
|
return backgroundColor;
|
|
19806
19809
|
}, function (_a) {
|
|
19807
19810
|
var borderColor = _a.borderColor;
|
|
19808
19811
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19809
19812
|
});
|
|
19810
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19811
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19813
|
+
var TabContent = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19814
|
+
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
19815
|
var Tabs = function (_a) {
|
|
19813
19816
|
var _b;
|
|
19814
19817
|
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 +19820,16 @@ var Tabs = function (_a) {
|
|
|
19817
19820
|
return null;
|
|
19818
19821
|
}
|
|
19819
19822
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19820
|
-
return (jsxs$1(Container$
|
|
19823
|
+
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
19824
|
};
|
|
19822
|
-
var templateObject_1$
|
|
19825
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$s, templateObject_4$o;
|
|
19823
19826
|
|
|
19824
|
-
var Container$
|
|
19827
|
+
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
19828
|
var Tag = function (_a) {
|
|
19826
19829
|
var text = _a.text, className = _a.className;
|
|
19827
|
-
return jsx$1(Container$
|
|
19830
|
+
return jsx$1(Container$p, __assign$1({ className: className }, { children: text }), void 0);
|
|
19828
19831
|
};
|
|
19829
|
-
var templateObject_1$
|
|
19832
|
+
var templateObject_1$A;
|
|
19830
19833
|
|
|
19831
19834
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19832
19835
|
switch (size) {
|
|
@@ -19939,9 +19942,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19939
19942
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19940
19943
|
};
|
|
19941
19944
|
|
|
19942
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
19943
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
19944
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19945
|
+
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"])));
|
|
19946
|
+
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"])));
|
|
19947
|
+
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
19948
|
var ImageVideo = function (_a) {
|
|
19946
19949
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19947
19950
|
var video = useRef(null);
|
|
@@ -19961,12 +19964,12 @@ var ImageVideo = function (_a) {
|
|
|
19961
19964
|
height: '100%',
|
|
19962
19965
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19963
19966
|
};
|
|
19964
|
-
var templateObject_1$
|
|
19967
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$r;
|
|
19965
19968
|
|
|
19966
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19967
|
-
var ContainerMobile = css(templateObject_2$
|
|
19968
|
-
var Container$
|
|
19969
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19969
|
+
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"])));
|
|
19970
|
+
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"])));
|
|
19971
|
+
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);
|
|
19972
|
+
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
19973
|
var TextWithImage = function (_a) {
|
|
19971
19974
|
var _b, _c, _d, _e;
|
|
19972
19975
|
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 +19989,7 @@ var TextWithImage = function (_a) {
|
|
|
19986
19989
|
// @ts-ignore
|
|
19987
19990
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19988
19991
|
};
|
|
19989
|
-
return (jsxs(Container$
|
|
19992
|
+
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
19993
|
backgroundColor: props.btnBGColor,
|
|
19991
19994
|
color: '#ffffff',
|
|
19992
19995
|
border: props.btnBGColor,
|
|
@@ -19996,18 +19999,18 @@ var TextWithImage = function (_a) {
|
|
|
19996
19999
|
},
|
|
19997
20000
|
} }, 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
20001
|
};
|
|
19999
|
-
var templateObject_1$
|
|
20002
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$q, templateObject_4$n;
|
|
20000
20003
|
|
|
20001
20004
|
var slideInAnimation = function (distanceFromTop) {
|
|
20002
20005
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20003
|
-
return keyframes(templateObject_1$
|
|
20006
|
+
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
20007
|
};
|
|
20005
20008
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20006
20009
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20007
|
-
return keyframes(templateObject_2$
|
|
20010
|
+
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
20011
|
};
|
|
20009
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20010
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20012
|
+
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"])));
|
|
20013
|
+
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
20014
|
var distanceFromTop = _a.distanceFromTop;
|
|
20012
20015
|
return distanceFromTop || '124px';
|
|
20013
20016
|
}, function (_a) {
|
|
@@ -20020,12 +20023,12 @@ var ToastContent = newStyled.div(templateObject_4$l || (templateObject_4$l = __m
|
|
|
20020
20023
|
var distanceFromTop = _a.distanceFromTop;
|
|
20021
20024
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20022
20025
|
});
|
|
20023
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20026
|
+
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
20027
|
var severity = _a.severity;
|
|
20025
20028
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20026
20029
|
});
|
|
20027
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
20028
|
-
var templateObject_1$
|
|
20030
|
+
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"])));
|
|
20031
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$p, templateObject_4$m, templateObject_5$k, templateObject_6$h;
|
|
20029
20032
|
|
|
20030
20033
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20031
20034
|
var _b;
|
|
@@ -20047,9 +20050,9 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
20047
20050
|
});
|
|
20048
20051
|
Toast.displayName = 'Toast';
|
|
20049
20052
|
|
|
20050
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20051
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20052
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20053
|
+
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"])));
|
|
20054
|
+
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; });
|
|
20055
|
+
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
20056
|
var theme = _a.theme;
|
|
20054
20057
|
return theme.component.total.basicTotal.currency.color;
|
|
20055
20058
|
}, function (_a) {
|
|
@@ -20062,41 +20065,41 @@ var Currency = newStyled.span(templateObject_3$n || (templateObject_3$n = __make
|
|
|
20062
20065
|
var theme = _a.theme;
|
|
20063
20066
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20064
20067
|
});
|
|
20065
|
-
var Container$
|
|
20068
|
+
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
20069
|
var highlightColor = _a.highlightColor;
|
|
20067
20070
|
return highlightColor;
|
|
20068
20071
|
});
|
|
20069
|
-
var TotalContainer = newStyled(Container$
|
|
20072
|
+
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
20073
|
var showTotalLabel = _a.showTotalLabel;
|
|
20071
20074
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20072
20075
|
});
|
|
20073
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20074
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
20076
|
+
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"])));
|
|
20077
|
+
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
20078
|
var theme = _a.theme;
|
|
20076
20079
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20077
20080
|
});
|
|
20078
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
20079
|
-
var templateObject_1$
|
|
20081
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20082
|
+
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
20083
|
|
|
20081
20084
|
var Total = function (_a) {
|
|
20082
20085
|
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
20086
|
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$
|
|
20087
|
+
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
20088
|
};
|
|
20086
20089
|
|
|
20087
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20090
|
+
var Wrapper = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20088
20091
|
var color = _a.color;
|
|
20089
20092
|
return color;
|
|
20090
20093
|
});
|
|
20091
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20092
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20094
|
+
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"])));
|
|
20095
|
+
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
20096
|
var theme = _a.theme;
|
|
20094
20097
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20095
20098
|
}, function (_a) {
|
|
20096
20099
|
var theme = _a.theme;
|
|
20097
20100
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20098
20101
|
});
|
|
20099
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20102
|
+
var CouponItem = newStyled(Item)(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20100
20103
|
var color = _a.color;
|
|
20101
20104
|
return color;
|
|
20102
20105
|
});
|
|
@@ -20109,27 +20112,27 @@ var Subtotal = function (_a) {
|
|
|
20109
20112
|
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
20113
|
})] }), void 0));
|
|
20111
20114
|
};
|
|
20112
|
-
var templateObject_1$
|
|
20115
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$k;
|
|
20113
20116
|
|
|
20114
20117
|
var Totals = {
|
|
20115
20118
|
Total: Total,
|
|
20116
20119
|
Subtotal: Subtotal,
|
|
20117
20120
|
};
|
|
20118
20121
|
|
|
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$
|
|
20122
|
+
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"])));
|
|
20123
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20124
|
+
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; });
|
|
20125
|
+
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'); });
|
|
20126
|
+
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"])));
|
|
20127
|
+
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
20128
|
return props.finishedTrack
|
|
20126
20129
|
? props.finishedTrackColor
|
|
20127
20130
|
: props.activeTrack
|
|
20128
20131
|
? props.activeTrackColor
|
|
20129
20132
|
: '';
|
|
20130
20133
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
20131
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
20132
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$
|
|
20134
|
+
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"])));
|
|
20135
|
+
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
20136
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20134
20137
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20135
20138
|
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 +20160,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20157
20160
|
}
|
|
20158
20161
|
return '30px';
|
|
20159
20162
|
};
|
|
20160
|
-
return (jsxs$1(Container$
|
|
20163
|
+
return (jsxs$1(Container$m, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20161
20164
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20162
20165
|
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
20166
|
? activeCheckpointColor
|
|
@@ -20168,18 +20171,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20168
20171
|
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
20172
|
})] }), void 0));
|
|
20170
20173
|
};
|
|
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$
|
|
20174
|
+
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;
|
|
20175
|
+
|
|
20176
|
+
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"])));
|
|
20177
|
+
var CheckpointContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20178
|
+
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; });
|
|
20179
|
+
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'); });
|
|
20180
|
+
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'); });
|
|
20181
|
+
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
20182
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20180
20183
|
}, 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$
|
|
20184
|
+
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)'); });
|
|
20185
|
+
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
20186
|
var TrackingProgress = function (_a) {
|
|
20184
20187
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
20185
20188
|
var theme = useTheme();
|
|
@@ -20199,7 +20202,7 @@ var TrackingProgress = function (_a) {
|
|
|
20199
20202
|
}
|
|
20200
20203
|
return '30px';
|
|
20201
20204
|
};
|
|
20202
|
-
return (jsxs$1(Container$
|
|
20205
|
+
return (jsxs$1(Container$l, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20203
20206
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20204
20207
|
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
20208
|
? theme.colors.semantic.informative.color
|
|
@@ -20208,19 +20211,19 @@ var TrackingProgress = function (_a) {
|
|
|
20208
20211
|
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
20212
|
})] }), void 0));
|
|
20210
20213
|
};
|
|
20211
|
-
var templateObject_1$
|
|
20214
|
+
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
20215
|
|
|
20213
|
-
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20216
|
+
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
20217
|
var checked = _a.checked;
|
|
20215
20218
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20216
20219
|
});
|
|
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$
|
|
20220
|
+
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"])));
|
|
20221
|
+
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"])));
|
|
20222
|
+
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"])));
|
|
20223
|
+
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"])));
|
|
20224
|
+
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"])));
|
|
20225
|
+
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"])));
|
|
20226
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$k, templateObject_4$h, templateObject_5$g, templateObject_6$d, templateObject_7$c;
|
|
20224
20227
|
|
|
20225
20228
|
function AutoshipOfferCard(_a) {
|
|
20226
20229
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20244,18 +20247,18 @@ function AutoshipOfferCard(_a) {
|
|
|
20244
20247
|
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
20248
|
}
|
|
20246
20249
|
|
|
20247
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
20250
|
+
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
20251
|
var checked = _a.checked;
|
|
20249
20252
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20250
20253
|
});
|
|
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$
|
|
20254
|
+
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"])));
|
|
20255
|
+
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"])));
|
|
20256
|
+
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"])));
|
|
20257
|
+
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"])));
|
|
20258
|
+
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"])));
|
|
20259
|
+
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"])));
|
|
20260
|
+
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"])));
|
|
20261
|
+
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
20262
|
|
|
20260
20263
|
function AutoshipOfferCardCta(_a) {
|
|
20261
20264
|
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 +20276,28 @@ function AutoshipOfferCardCta(_a) {
|
|
|
20273
20276
|
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
20277
|
}
|
|
20275
20278
|
|
|
20279
|
+
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"])));
|
|
20280
|
+
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"])));
|
|
20281
|
+
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"])));
|
|
20282
|
+
newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20283
|
+
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"])));
|
|
20284
|
+
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"])));
|
|
20285
|
+
var Container$k = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20286
|
+
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) {
|
|
20287
|
+
var height = _a.height;
|
|
20288
|
+
return height !== null && height !== void 0 ? height : '100%';
|
|
20289
|
+
});
|
|
20290
|
+
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;
|
|
20291
|
+
|
|
20292
|
+
var AutoshipPdpCard = function (_a) {
|
|
20293
|
+
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;
|
|
20294
|
+
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 () {
|
|
20295
|
+
handleSavings();
|
|
20296
|
+
} }, 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 () {
|
|
20297
|
+
handleWithoutSavings();
|
|
20298
|
+
} }, void 0)] }), void 0));
|
|
20299
|
+
};
|
|
20300
|
+
|
|
20276
20301
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
20277
20302
|
background: props.bgColor,
|
|
20278
20303
|
height: '100%',
|
|
@@ -22206,5 +22231,5 @@ var SubscriptionPlanSelector = function (_a) {
|
|
|
22206
22231
|
}, 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
22232
|
};
|
|
22208
22233
|
|
|
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 };
|
|
22234
|
+
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
22235
|
//# sourceMappingURL=index.esm.js.map
|