@trafilea/afrodita-components 6.49.7 → 6.50.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +17 -1
- package/build/index.esm.js +621 -609
- package/build/index.esm.js.map +1 -1
- package/build/index.js +621 -608
- package/build/index.js.map +1 -1
- package/build/theme/thespadr.theme.js +4 -4
- 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$1w = newStyled.div(templateObject_1$2x || (templateObject_1$2x = __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$1v = newStyled.div(templateObject_1$2w || (templateObject_1$2w = _
|
|
|
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$1P || (templateObject_2$1P = __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$1O || (templateObject_2$1O = __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$1w, __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$2x, templateObject_2$1P;
|
|
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$1v = newStyled.div(templateObject_1$2w || (templateObject_1$2w = __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$1u = newStyled.div(templateObject_1$2v || (templateObject_1$2v = _
|
|
|
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$1O || (templateObject_2$1O = __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$1N || (templateObject_2$1N = __makeTemp
|
|
|
3296
3296
|
var DiscountTag$4 = 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$1v, __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$2w, templateObject_2$1O;
|
|
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$1 = newStyled.p(templateObject_2$
|
|
3410
|
+
var Container$1u = newStyled.div(templateObject_1$2v || (templateObject_1$2v = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3411
|
+
var Price$1 = newStyled.p(templateObject_2$1N || (templateObject_2$1N = __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$1 = newStyled.p(templateObject_2$1M || (templateObject_2$1M = __makeTe
|
|
|
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$1o || (templateObject_3$1o = __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$1, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3465
3465
|
};
|
|
3466
|
-
return (jsxs$1(Container$
|
|
3466
|
+
return (jsxs$1(Container$1u, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(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$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3467
3467
|
};
|
|
3468
|
-
var templateObject_1$
|
|
3468
|
+
var templateObject_1$2v, templateObject_2$1N, templateObject_3$1o;
|
|
3469
3469
|
|
|
3470
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3470
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2u || (templateObject_1$2u = __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$1, __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$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3523
|
-
return (jsxs$1(Container$
|
|
3523
|
+
return (jsxs$1(Container$1u, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __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$1, __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$2u;
|
|
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$2t || (templateObject_1$2t = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3542
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1M || (templateObject_2$1M = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3543
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1n || (templateObject_3$1n = __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$2(testId, 'each-one-price') }, { children: [jsxs$1(Price$1, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price$1, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price$1, __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$1u, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$1u, { children: [jsxs$1(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3599
3599
|
marginTop: '-5px',
|
|
3600
3600
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __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$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3601
3601
|
marginTop: '-6px',
|
|
@@ -3611,10 +3611,10 @@ 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$2t, templateObject_2$1M, templateObject_3$1n;
|
|
3615
3615
|
|
|
3616
|
-
var Container$
|
|
3617
|
-
var Price = newStyled.p(templateObject_2$
|
|
3616
|
+
var Container$1t = newStyled.div(templateObject_1$2s || (templateObject_1$2s = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"])));
|
|
3617
|
+
var Price = newStyled.p(templateObject_2$1L || (templateObject_2$1L = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"])), function (_a) {
|
|
3618
3618
|
var weight = _a.weight;
|
|
3619
3619
|
return weight !== null && weight !== void 0 ? weight : '400';
|
|
3620
3620
|
}, function (_a) {
|
|
@@ -3627,7 +3627,7 @@ var Price = newStyled.p(templateObject_2$1K || (templateObject_2$1K = __makeTemp
|
|
|
3627
3627
|
var underlined = _a.underlined;
|
|
3628
3628
|
return (underlined ? 'line-through' : 'none');
|
|
3629
3629
|
});
|
|
3630
|
-
var templateObject_1$
|
|
3630
|
+
var templateObject_1$2s, templateObject_2$1L;
|
|
3631
3631
|
|
|
3632
3632
|
function getTestId$1() {
|
|
3633
3633
|
var args = [];
|
|
@@ -3648,10 +3648,10 @@ var PriceLabelV5 = function (_a) {
|
|
|
3648
3648
|
color: color !== null && color !== void 0 ? color : theme.colors.pallete.secondary.color,
|
|
3649
3649
|
weight: 700,
|
|
3650
3650
|
};
|
|
3651
|
-
return (jsx$1(Container$
|
|
3651
|
+
return (jsx$1(Container$1t, __assign$1({}, rest, { id: "priceLabel" }, { children: 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, { theme: theme, originalPriceUnderlined: originalPriceUnderlined, testId: testId, originalPrice: originalPrice }, void 0))] }, void 0) }), void 0));
|
|
3652
3652
|
};
|
|
3653
3653
|
|
|
3654
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3654
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2r || (templateObject_1$2r = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3655
3655
|
var PriceLabel = function (_a) {
|
|
3656
3656
|
var _b;
|
|
3657
3657
|
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"]);
|
|
@@ -3679,15 +3679,15 @@ var PriceLabel = function (_a) {
|
|
|
3679
3679
|
};
|
|
3680
3680
|
var OriginalPrice = function () { return (jsx$1(Price$1, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3681
3681
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3682
|
-
return (jsxs$1(Container$
|
|
3682
|
+
return (jsxs$1(Container$1u, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, { children: [jsx$1(Price$1, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3683
3683
|
marginTop: '-5px',
|
|
3684
3684
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price$1, __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$1, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3685
3685
|
marginTop: '-6px',
|
|
3686
3686
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3687
3687
|
};
|
|
3688
|
-
var templateObject_1$
|
|
3688
|
+
var templateObject_1$2r;
|
|
3689
3689
|
|
|
3690
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3690
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3691
3691
|
var PriceLabelV2 = function (_a) {
|
|
3692
3692
|
var _b;
|
|
3693
3693
|
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"]);
|
|
@@ -3718,13 +3718,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
3718
3718
|
var finalPriceString = finalPriceArray[0]
|
|
3719
3719
|
? finalPriceArray[0]
|
|
3720
3720
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3721
|
-
return (jsxs$1(Container$
|
|
3721
|
+
return (jsxs$1(Container$1u, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price$1, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3722
3722
|
};
|
|
3723
|
-
var templateObject_1$
|
|
3723
|
+
var templateObject_1$2q;
|
|
3724
3724
|
|
|
3725
|
-
var ContainerWrapper$3 = newStyled.div(templateObject_1$
|
|
3726
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3727
|
-
var templateObject_1$
|
|
3725
|
+
var ContainerWrapper$3 = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __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"])));
|
|
3726
|
+
var ImgWrapper = newStyled.div(templateObject_2$1K || (templateObject_2$1K = __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"])));
|
|
3727
|
+
var templateObject_1$2p, templateObject_2$1K;
|
|
3728
3728
|
|
|
3729
3729
|
var ClubPriceMemberLabel = function (_a) {
|
|
3730
3730
|
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"]);
|
|
@@ -3733,13 +3733,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3733
3733
|
return (jsx$1("div", { children: isClub ? (jsxs$1(ContainerWrapper$3, __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));
|
|
3734
3734
|
};
|
|
3735
3735
|
|
|
3736
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3736
|
+
var HorizontalDivider = newStyled.div(templateObject_1$2o || (templateObject_1$2o = __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) {
|
|
3737
3737
|
var width = _a.width;
|
|
3738
3738
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3739
3739
|
});
|
|
3740
|
-
var templateObject_1$
|
|
3740
|
+
var templateObject_1$2o;
|
|
3741
3741
|
|
|
3742
|
-
var Container$
|
|
3742
|
+
var Container$1s = newStyled.div(templateObject_1$2n || (templateObject_1$2n = __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) {
|
|
3743
3743
|
var height = _a.height;
|
|
3744
3744
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3745
3745
|
}, function (_a) {
|
|
@@ -3764,11 +3764,11 @@ var Container$1r = newStyled.div(templateObject_1$2m || (templateObject_1$2m = _
|
|
|
3764
3764
|
var SkeletonBox = function (_a) {
|
|
3765
3765
|
var width = _a.width, height = _a.height;
|
|
3766
3766
|
var theme = useTheme();
|
|
3767
|
-
return jsx$1(Container$
|
|
3767
|
+
return jsx$1(Container$1s, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3768
3768
|
};
|
|
3769
|
-
var templateObject_1$
|
|
3769
|
+
var templateObject_1$2n;
|
|
3770
3770
|
|
|
3771
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3771
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2m || (templateObject_1$2m = __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) {
|
|
3772
3772
|
var width = _a.width;
|
|
3773
3773
|
return width;
|
|
3774
3774
|
}, function (_a) {
|
|
@@ -3784,7 +3784,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2l || (templateObject_1$2l
|
|
|
3784
3784
|
var opacity = _a.opacity;
|
|
3785
3785
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3786
3786
|
});
|
|
3787
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3787
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1J || (templateObject_2$1J = __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) {
|
|
3788
3788
|
var width = _a.width;
|
|
3789
3789
|
return width;
|
|
3790
3790
|
}, function (_a) {
|
|
@@ -3797,7 +3797,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1I || (templateObject_2$
|
|
|
3797
3797
|
var opacity = _a.opacity;
|
|
3798
3798
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3799
3799
|
});
|
|
3800
|
-
var templateObject_1$
|
|
3800
|
+
var templateObject_1$2m, templateObject_2$1J;
|
|
3801
3801
|
|
|
3802
3802
|
/* eslint-disable no-undef */
|
|
3803
3803
|
var cache = new Map();
|
|
@@ -3973,7 +3973,7 @@ var buildImageUrl = function (_a) {
|
|
|
3973
3973
|
}
|
|
3974
3974
|
};
|
|
3975
3975
|
|
|
3976
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3976
|
+
var Img$1 = newStyled.img(templateObject_1$2l || (templateObject_1$2l = __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; });
|
|
3977
3977
|
var Image$3 = function (_a) {
|
|
3978
3978
|
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"]);
|
|
3979
3979
|
var config = useTheme().config;
|
|
@@ -3982,15 +3982,15 @@ var Image$3 = function (_a) {
|
|
|
3982
3982
|
: src;
|
|
3983
3983
|
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));
|
|
3984
3984
|
};
|
|
3985
|
-
var templateObject_1$
|
|
3985
|
+
var templateObject_1$2l;
|
|
3986
3986
|
|
|
3987
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3988
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3989
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3987
|
+
var LabelWrapper = newStyled.label(templateObject_1$2k || (templateObject_1$2k = __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"])));
|
|
3988
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1I || (templateObject_2$1I = __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"])));
|
|
3989
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1m || (templateObject_3$1m = __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) {
|
|
3990
3990
|
var $color = _a.$color;
|
|
3991
3991
|
return $color;
|
|
3992
3992
|
});
|
|
3993
|
-
var templateObject_1$
|
|
3993
|
+
var templateObject_1$2k, templateObject_2$1I, templateObject_3$1m;
|
|
3994
3994
|
|
|
3995
3995
|
var ToggleComponent = function (_a) {
|
|
3996
3996
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c, rest = __rest(_a, ["onToggle", "isChecked", "color"]);
|
|
@@ -4872,10 +4872,10 @@ function jsxs(type, props, key) {
|
|
|
4872
4872
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4873
4873
|
// `variants` styles that are consistent through all themes.
|
|
4874
4874
|
var TAGS = {
|
|
4875
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4876
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4877
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4878
|
-
display1: newStyled.h1(templateObject_4$
|
|
4875
|
+
hero1: newStyled.h1(templateObject_1$2j || (templateObject_1$2j = __makeTemplateObject([""], [""]))),
|
|
4876
|
+
hero2: newStyled.h2(templateObject_2$1H || (templateObject_2$1H = __makeTemplateObject([""], [""]))),
|
|
4877
|
+
hero3: newStyled.h3(templateObject_3$1l || (templateObject_3$1l = __makeTemplateObject([""], [""]))),
|
|
4878
|
+
display1: newStyled.h1(templateObject_4$14 || (templateObject_4$14 = __makeTemplateObject([""], [""]))),
|
|
4879
4879
|
display2: newStyled.h2(templateObject_5$Q || (templateObject_5$Q = __makeTemplateObject([""], [""]))),
|
|
4880
4880
|
display3: newStyled.h3(templateObject_6$I || (templateObject_6$I = __makeTemplateObject([""], [""]))),
|
|
4881
4881
|
heading1: newStyled.h1(templateObject_7$z || (templateObject_7$z = __makeTemplateObject([""], [""]))),
|
|
@@ -5012,17 +5012,17 @@ var DEFAULTS = {
|
|
|
5012
5012
|
size: 'regular',
|
|
5013
5013
|
},
|
|
5014
5014
|
};
|
|
5015
|
-
var templateObject_1$
|
|
5015
|
+
var templateObject_1$2j, templateObject_2$1H, templateObject_3$1l, templateObject_4$14, templateObject_5$Q, templateObject_6$I, templateObject_7$z, templateObject_8$s, templateObject_9$f, templateObject_10$e, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
5016
5016
|
|
|
5017
|
-
var Container$
|
|
5018
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
5019
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
5020
|
-
var Label$7 = newStyled.div(templateObject_4$
|
|
5017
|
+
var Container$1r = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __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"])));
|
|
5018
|
+
var Card$4 = newStyled.div(templateObject_2$1G || (templateObject_2$1G = __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"])));
|
|
5019
|
+
var Tag$2 = newStyled.div(templateObject_3$1k || (templateObject_3$1k = __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"])));
|
|
5020
|
+
var Label$7 = newStyled.div(templateObject_4$13 || (templateObject_4$13 = __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"])));
|
|
5021
5021
|
var Check$1 = newStyled.div(templateObject_5$P || (templateObject_5$P = __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"])));
|
|
5022
5022
|
var DiscountContainer$1 = newStyled.div(templateObject_6$H || (templateObject_6$H = __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"])));
|
|
5023
5023
|
var PackSelectorV2 = function (_a) {
|
|
5024
5024
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
5025
|
-
return (jsx$1(Container$
|
|
5025
|
+
return (jsx$1(Container$1r, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
5026
5026
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
5027
5027
|
}) }), void 0));
|
|
5028
5028
|
};
|
|
@@ -5044,27 +5044,27 @@ var PackCard$1 = function (_a) {
|
|
|
5044
5044
|
currency: currencyCode || 'USD',
|
|
5045
5045
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5046
5046
|
};
|
|
5047
|
-
var templateObject_1$
|
|
5047
|
+
var templateObject_1$2i, templateObject_2$1G, templateObject_3$1k, templateObject_4$13, templateObject_5$P, templateObject_6$H;
|
|
5048
5048
|
|
|
5049
|
-
var Container$
|
|
5050
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
5049
|
+
var Container$1q = newStyled.div(templateObject_1$2h || (templateObject_1$2h = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5050
|
+
var DropContainer = newStyled.div(templateObject_2$1F || (templateObject_2$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5051
5051
|
var DropList = function (_a) {
|
|
5052
5052
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5053
|
-
return (jsx$1(Container$
|
|
5053
|
+
return (jsx$1(Container$1q, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5054
5054
|
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));
|
|
5055
5055
|
}) }, void 0));
|
|
5056
5056
|
};
|
|
5057
|
-
var templateObject_1$
|
|
5057
|
+
var templateObject_1$2h, templateObject_2$1F;
|
|
5058
5058
|
|
|
5059
5059
|
var DROPS_TOTAL = 5;
|
|
5060
|
-
var Container$
|
|
5061
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5062
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
5060
|
+
var Container$1p = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5061
|
+
var Title$b = newStyled.p(templateObject_2$1E || (templateObject_2$1E = __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"])));
|
|
5062
|
+
var Description$3 = newStyled.p(templateObject_3$1j || (templateObject_3$1j = __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"])));
|
|
5063
5063
|
var AbsorbencyLevel = function (_a) {
|
|
5064
5064
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5065
|
-
return (jsxs$1(Container$
|
|
5065
|
+
return (jsxs$1(Container$1p, { 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));
|
|
5066
5066
|
};
|
|
5067
|
-
var templateObject_1$
|
|
5067
|
+
var templateObject_1$2g, templateObject_2$1E, templateObject_3$1j;
|
|
5068
5068
|
|
|
5069
5069
|
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(`
|
|
5070
5070
|
`),"","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(`
|
|
@@ -5140,7 +5140,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5140
5140
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5141
5141
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5142
5142
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5143
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5143
|
+
var StyledContent$1 = newStyled.button(templateObject_1$2f || (templateObject_1$2f = __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"])));
|
|
5144
5144
|
var Accordion$1 = function (_a) {
|
|
5145
5145
|
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;
|
|
5146
5146
|
var theme = useTheme();
|
|
@@ -5164,9 +5164,9 @@ var Accordion$1 = function (_a) {
|
|
|
5164
5164
|
} }, { 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));
|
|
5165
5165
|
} }), void 0));
|
|
5166
5166
|
};
|
|
5167
|
-
var templateObject_1$
|
|
5167
|
+
var templateObject_1$2f;
|
|
5168
5168
|
|
|
5169
|
-
var Container$
|
|
5169
|
+
var Container$1o = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5170
5170
|
var AccordionOptions = function (_a) {
|
|
5171
5171
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5172
5172
|
var _b = useState({
|
|
@@ -5179,7 +5179,7 @@ var AccordionOptions = function (_a) {
|
|
|
5179
5179
|
}
|
|
5180
5180
|
return false;
|
|
5181
5181
|
};
|
|
5182
|
-
return (jsx$1(Container$
|
|
5182
|
+
return (jsx$1(Container$1o, { children: accordions.map(function (accordion, index) {
|
|
5183
5183
|
var forceOpenValue = getForceOpen(index);
|
|
5184
5184
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5185
5185
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5190,7 +5190,7 @@ var AccordionOptions = function (_a) {
|
|
|
5190
5190
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5191
5191
|
}) }, void 0));
|
|
5192
5192
|
};
|
|
5193
|
-
var templateObject_1$
|
|
5193
|
+
var templateObject_1$2e;
|
|
5194
5194
|
|
|
5195
5195
|
/**
|
|
5196
5196
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5326,27 +5326,27 @@ var isValidDate = function (value) {
|
|
|
5326
5326
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5327
5327
|
};
|
|
5328
5328
|
|
|
5329
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5330
|
-
var FlexContainer$5 = newStyled.div(templateObject_2$
|
|
5331
|
-
var templateObject_1$
|
|
5329
|
+
var Bold = newStyled.span(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5330
|
+
var FlexContainer$5 = newStyled.div(templateObject_2$1D || (templateObject_2$1D = __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"])));
|
|
5331
|
+
var templateObject_1$2d, templateObject_2$1D;
|
|
5332
5332
|
|
|
5333
|
-
var Container$
|
|
5333
|
+
var Container$1n = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __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) {
|
|
5334
5334
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5335
5335
|
return width;
|
|
5336
5336
|
}, function (_a) {
|
|
5337
5337
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5338
5338
|
return height;
|
|
5339
5339
|
});
|
|
5340
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5341
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5342
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5340
|
+
var FlexCentered = newStyled.div(templateObject_2$1C || (templateObject_2$1C = __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"])));
|
|
5341
|
+
var LeftSide = newStyled.div(templateObject_3$1i || (templateObject_3$1i = __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"])));
|
|
5342
|
+
var RightSide = newStyled.div(templateObject_4$12 || (templateObject_4$12 = __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"])));
|
|
5343
5343
|
var FlexStart = newStyled.div(templateObject_5$O || (templateObject_5$O = __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"])));
|
|
5344
|
-
var templateObject_1$
|
|
5344
|
+
var templateObject_1$2c, templateObject_2$1C, templateObject_3$1i, templateObject_4$12, templateObject_5$O;
|
|
5345
5345
|
|
|
5346
5346
|
var CouponCard = function (_a) {
|
|
5347
5347
|
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;
|
|
5348
5348
|
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5349
|
-
return (jsxs$1(Container$
|
|
5349
|
+
return (jsxs$1(Container$1n, __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 () {
|
|
5350
5350
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5351
5351
|
setShowCoupon(function (prev) { return !prev; });
|
|
5352
5352
|
} }, 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: {
|
|
@@ -5494,14 +5494,14 @@ var sizeOptions = [
|
|
|
5494
5494
|
},
|
|
5495
5495
|
];
|
|
5496
5496
|
|
|
5497
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5498
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5497
|
+
var ErrorText = newStyled.h3(templateObject_1$2b || (templateObject_1$2b = __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; });
|
|
5498
|
+
var ErrorContainer = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __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"])));
|
|
5499
5499
|
var Error$1 = function (_a) {
|
|
5500
5500
|
var error = _a.error;
|
|
5501
5501
|
var theme = useTheme();
|
|
5502
5502
|
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));
|
|
5503
5503
|
};
|
|
5504
|
-
var templateObject_1$
|
|
5504
|
+
var templateObject_1$2b, templateObject_2$1B;
|
|
5505
5505
|
|
|
5506
5506
|
var BaseSelectButton = function (_a) {
|
|
5507
5507
|
var children = _a.children, as = _a.as;
|
|
@@ -5518,7 +5518,7 @@ function BaseSelectOption(_a) {
|
|
|
5518
5518
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5519
5519
|
}
|
|
5520
5520
|
|
|
5521
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5521
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5522
5522
|
function BaseSelect(_a) {
|
|
5523
5523
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5524
5524
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5528,7 +5528,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5528
5528
|
Options: BaseSelectOptions,
|
|
5529
5529
|
Option: BaseSelectOption,
|
|
5530
5530
|
});
|
|
5531
|
-
var templateObject_1$
|
|
5531
|
+
var templateObject_1$2a;
|
|
5532
5532
|
|
|
5533
5533
|
var CustomButton = newStyled.button(function (_a) {
|
|
5534
5534
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5567,7 +5567,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5567
5567
|
});
|
|
5568
5568
|
});
|
|
5569
5569
|
// TODO Remove this when we find the real solution
|
|
5570
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5570
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5571
5571
|
var open = _a.open;
|
|
5572
5572
|
return open &&
|
|
5573
5573
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5587,7 +5587,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5587
5587
|
} }), void 0));
|
|
5588
5588
|
};
|
|
5589
5589
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5590
|
-
var templateObject_1$
|
|
5590
|
+
var templateObject_1$29;
|
|
5591
5591
|
|
|
5592
5592
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5593
5593
|
var theme = _a.theme;
|
|
@@ -5754,7 +5754,7 @@ var CustomCheckboxStyles = {
|
|
|
5754
5754
|
},
|
|
5755
5755
|
};
|
|
5756
5756
|
|
|
5757
|
-
var Container$
|
|
5757
|
+
var Container$1m = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __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"])));
|
|
5758
5758
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5759
5759
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5760
5760
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5765,7 +5765,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5765
5765
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5766
5766
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5767
5767
|
]; });
|
|
5768
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5768
|
+
var Input$5 = newStyled.input(templateObject_2$1A || (templateObject_2$1A = __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) {
|
|
5769
5769
|
var disabled = _a.disabled;
|
|
5770
5770
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5771
5771
|
});
|
|
@@ -5779,9 +5779,9 @@ var Checkbox = function (_a) {
|
|
|
5779
5779
|
}
|
|
5780
5780
|
onChange(e.target.checked);
|
|
5781
5781
|
};
|
|
5782
|
-
return (jsxs$1(Container$
|
|
5782
|
+
return (jsxs$1(Container$1m, { 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));
|
|
5783
5783
|
};
|
|
5784
|
-
var templateObject_1$
|
|
5784
|
+
var templateObject_1$28, templateObject_2$1A;
|
|
5785
5785
|
|
|
5786
5786
|
var CustomOption = newStyled.li(function (_a) {
|
|
5787
5787
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5830,9 +5830,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5830
5830
|
Option: BaseDropdownOption,
|
|
5831
5831
|
});
|
|
5832
5832
|
|
|
5833
|
-
var Container$
|
|
5834
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5835
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5833
|
+
var Container$1l = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject([""], [""])));
|
|
5834
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1z || (templateObject_2$1z = __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"])));
|
|
5835
|
+
var SelectedOption = newStyled.span(templateObject_3$1h || (templateObject_3$1h = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5836
5836
|
var fontWeight = _a.fontWeight;
|
|
5837
5837
|
return fontWeight || '';
|
|
5838
5838
|
});
|
|
@@ -5865,10 +5865,10 @@ function SimpleDropdown(_a) {
|
|
|
5865
5865
|
}
|
|
5866
5866
|
setSelectedValue(value);
|
|
5867
5867
|
}, [value, options, initialValue]);
|
|
5868
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5868
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1l : Fragment$1;
|
|
5869
5869
|
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));
|
|
5870
5870
|
}
|
|
5871
|
-
var templateObject_1$
|
|
5871
|
+
var templateObject_1$27, templateObject_2$1z, templateObject_3$1h;
|
|
5872
5872
|
|
|
5873
5873
|
/* base styles & size variants */
|
|
5874
5874
|
var CustomRadioStyles$2 = {
|
|
@@ -5933,9 +5933,9 @@ var ContainerStyles$2 = {
|
|
|
5933
5933
|
},
|
|
5934
5934
|
};
|
|
5935
5935
|
|
|
5936
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5937
|
-
var Container$
|
|
5938
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5936
|
+
var Wrapper$7 = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5937
|
+
var Container$1k = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5938
|
+
var Input$4 = newStyled.input(templateObject_2$1y || (templateObject_2$1y = __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) {
|
|
5939
5939
|
var disabled = _a.disabled;
|
|
5940
5940
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5941
5941
|
});
|
|
@@ -5943,14 +5943,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5943
5943
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5944
5944
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5945
5945
|
]; });
|
|
5946
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5946
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$1g || (templateObject_3$1g = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5947
5947
|
var theme = _a.theme;
|
|
5948
5948
|
return theme.component.radio.textSize;
|
|
5949
5949
|
}, function (_a) {
|
|
5950
5950
|
var theme = _a.theme;
|
|
5951
5951
|
return theme.component.radio.lineHeight;
|
|
5952
5952
|
});
|
|
5953
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5953
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$11 || (templateObject_4$11 = __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) {
|
|
5954
5954
|
var theme = _a.theme;
|
|
5955
5955
|
return theme.component.radio.textSize;
|
|
5956
5956
|
}, function (_a) {
|
|
@@ -5967,9 +5967,9 @@ var RadioInput = function (_a) {
|
|
|
5967
5967
|
var value = event.currentTarget.value;
|
|
5968
5968
|
onChange({ value: value, label: label });
|
|
5969
5969
|
};
|
|
5970
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5970
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$1k, __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));
|
|
5971
5971
|
};
|
|
5972
|
-
var templateObject_1$
|
|
5972
|
+
var templateObject_1$26, templateObject_2$1y, templateObject_3$1g, templateObject_4$11;
|
|
5973
5973
|
|
|
5974
5974
|
var useOnClickOutside = function (ref, handler) {
|
|
5975
5975
|
useEffect(function () {
|
|
@@ -6062,7 +6062,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6062
6062
|
}
|
|
6063
6063
|
};
|
|
6064
6064
|
|
|
6065
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
6065
|
+
var Wrapper$6 = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __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) {
|
|
6066
6066
|
var position = _a.position;
|
|
6067
6067
|
return getWrapperFlexDirection(position);
|
|
6068
6068
|
}, function (_a) {
|
|
@@ -6072,7 +6072,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __ma
|
|
|
6072
6072
|
var disableHover = _a.disableHover;
|
|
6073
6073
|
return (disableHover ? 0 : 1);
|
|
6074
6074
|
});
|
|
6075
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6075
|
+
var TooltipContainer = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __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) {
|
|
6076
6076
|
var position = _a.position;
|
|
6077
6077
|
return getContainerFlexDirection(position);
|
|
6078
6078
|
}, function (_a) {
|
|
@@ -6100,14 +6100,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1w || (templateObject_2$1w
|
|
|
6100
6100
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6101
6101
|
return actual === expected ? margin : '0';
|
|
6102
6102
|
};
|
|
6103
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
6103
|
+
var ContentWrapper = newStyled.div(templateObject_3$1f || (templateObject_3$1f = __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) {
|
|
6104
6104
|
var borderColor = _a.borderColor;
|
|
6105
6105
|
return borderColor;
|
|
6106
6106
|
}, function (_a) {
|
|
6107
6107
|
var backgroundColor = _a.backgroundColor;
|
|
6108
6108
|
return backgroundColor;
|
|
6109
6109
|
});
|
|
6110
|
-
var TooltipText = newStyled.div(templateObject_4
|
|
6110
|
+
var TooltipText = newStyled.div(templateObject_4$10 || (templateObject_4$10 = __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) {
|
|
6111
6111
|
var theme = _a.theme;
|
|
6112
6112
|
return theme.component.autoship.tooltip.text.alignment;
|
|
6113
6113
|
}, function (_a) {
|
|
@@ -6127,7 +6127,7 @@ var CloseToolTip = newStyled.button(templateObject_8$r || (templateObject_8$r =
|
|
|
6127
6127
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6128
6128
|
return right;
|
|
6129
6129
|
});
|
|
6130
|
-
var templateObject_1$
|
|
6130
|
+
var templateObject_1$25, templateObject_2$1x, templateObject_3$1f, templateObject_4$10, templateObject_5$N, templateObject_6$G, templateObject_7$y, templateObject_8$r;
|
|
6131
6131
|
|
|
6132
6132
|
var Tooltip = function (_a) {
|
|
6133
6133
|
var _b;
|
|
@@ -6170,8 +6170,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
6170
6170
|
};
|
|
6171
6171
|
};
|
|
6172
6172
|
|
|
6173
|
-
var FlexContainer$4 = newStyled.div(templateObject_1$
|
|
6174
|
-
var ContainerBase$5 = newStyled.div(templateObject_2$
|
|
6173
|
+
var FlexContainer$4 = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6174
|
+
var ContainerBase$5 = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __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) {
|
|
6175
6175
|
var selected = _a.selected, theme = _a.theme;
|
|
6176
6176
|
return selected
|
|
6177
6177
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6185,11 +6185,11 @@ var ContainerBase$5 = newStyled.div(templateObject_2$1v || (templateObject_2$1v
|
|
|
6185
6185
|
var theme = _a.theme;
|
|
6186
6186
|
return theme.colors.pallete.primary.color;
|
|
6187
6187
|
});
|
|
6188
|
-
var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$
|
|
6188
|
+
var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$1e || (templateObject_3$1e = __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) {
|
|
6189
6189
|
var onClick = _a.onClick;
|
|
6190
6190
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6191
6191
|
});
|
|
6192
|
-
var SubscriptionContainer$5 = newStyled(ContainerBase$5)(templateObject_4
|
|
6192
|
+
var SubscriptionContainer$5 = newStyled(ContainerBase$5)(templateObject_4$$ || (templateObject_4$$ = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6193
6193
|
var SubscriptionHeader$5 = newStyled.div(templateObject_5$M || (templateObject_5$M = __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) {
|
|
6194
6194
|
var theme = _a.theme;
|
|
6195
6195
|
return theme.colors.shades[200].color;
|
|
@@ -6207,8 +6207,8 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6207
6207
|
var selected = _a.selected, theme = _a.theme;
|
|
6208
6208
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6209
6209
|
});
|
|
6210
|
-
var Container$
|
|
6211
|
-
var templateObject_1$
|
|
6210
|
+
var Container$1j = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6211
|
+
var templateObject_1$24, templateObject_2$1w, templateObject_3$1e, templateObject_4$$, templateObject_5$M, templateObject_6$F, templateObject_7$x, templateObject_8$q, templateObject_9$e, templateObject_10$d, templateObject_11$9, templateObject_12$6, templateObject_13$5;
|
|
6212
6212
|
|
|
6213
6213
|
var radioIds$3 = {
|
|
6214
6214
|
oneTime: {
|
|
@@ -6258,17 +6258,17 @@ var Autoship = function (_a) {
|
|
|
6258
6258
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6259
6259
|
};
|
|
6260
6260
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6261
|
-
return (jsxs$1(Container$
|
|
6261
|
+
return (jsxs$1(Container$1j, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer$4, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$3.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$3.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$3.oneTime.id, id: radioIds$3.oneTime.id, value: radioIds$3.oneTime.id, checked: radioIds$3.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$4, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$3.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$5, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$3.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$5, __assign$1({ onClick: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$3.autoship.id, id: radioIds$3.autoship.id, value: radioIds$3.autoship.id, checked: radioIds$3.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$3.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$4, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$3.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$4, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$4, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$3.autoship.id === radioCheck.id
|
|
6262
6262
|
? benefitsColor.selected
|
|
6263
6263
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$4, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$3.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$4, { 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$4, { 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));
|
|
6264
6264
|
};
|
|
6265
6265
|
|
|
6266
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6266
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6267
6267
|
var theme = _a.theme;
|
|
6268
6268
|
return theme.name === 'TheSpaDr' &&
|
|
6269
6269
|
"\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 ";
|
|
6270
6270
|
});
|
|
6271
|
-
var DiscountTag$3 = newStyled.div(templateObject_2$
|
|
6271
|
+
var DiscountTag$3 = newStyled.div(templateObject_2$1v || (templateObject_2$1v = __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) {
|
|
6272
6272
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6273
6273
|
return isSelected
|
|
6274
6274
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6284,7 +6284,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6284
6284
|
}
|
|
6285
6285
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6286
6286
|
};
|
|
6287
|
-
var ContainerBase$4 = newStyled.div(templateObject_3$
|
|
6287
|
+
var ContainerBase$4 = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __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) {
|
|
6288
6288
|
var selected = _a.selected, theme = _a.theme;
|
|
6289
6289
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6290
6290
|
}, function (_a) {
|
|
@@ -6296,7 +6296,7 @@ var ContainerBase$4 = newStyled.div(templateObject_3$1c || (templateObject_3$1c
|
|
|
6296
6296
|
var theme = _a.theme;
|
|
6297
6297
|
return theme.colors.pallete.primary.color;
|
|
6298
6298
|
});
|
|
6299
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4$
|
|
6299
|
+
var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4$_ || (templateObject_4$_ = __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) {
|
|
6300
6300
|
var onClick = _a.onClick;
|
|
6301
6301
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6302
6302
|
});
|
|
@@ -6316,12 +6316,12 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_11$8 || (templateOb
|
|
|
6316
6316
|
var selected = _a.selected, theme = _a.theme;
|
|
6317
6317
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6318
6318
|
});
|
|
6319
|
-
var Container$
|
|
6319
|
+
var Container$1i = newStyled.div(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6320
6320
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6321
6321
|
var theme = _a.theme;
|
|
6322
6322
|
return theme.component.autoship.tooltip.margin;
|
|
6323
6323
|
});
|
|
6324
|
-
var templateObject_1$
|
|
6324
|
+
var templateObject_1$23, templateObject_2$1v, templateObject_3$1d, templateObject_4$_, templateObject_5$L, templateObject_6$E, templateObject_7$w, templateObject_8$p, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$4;
|
|
6325
6325
|
|
|
6326
6326
|
var radioIds$2 = {
|
|
6327
6327
|
oneTime: {
|
|
@@ -6381,7 +6381,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6381
6381
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6382
6382
|
};
|
|
6383
6383
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6384
|
-
return (jsxs$1(Container$
|
|
6384
|
+
return (jsxs$1(Container$1i, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$4, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag$3, __assign$1({ isSelected: radioIds$2.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$4, { children: [jsxs$1(FlexContainer$3, { 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, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$2.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$3, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer$3, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$3, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6385
6385
|
? benefitsColor.selected
|
|
6386
6386
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$3, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$3, __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$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 () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$2.oneTime.id) }, void 0), jsx$1(StyledPrice$3, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6387
6387
|
};
|
|
@@ -6400,13 +6400,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6400
6400
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6401
6401
|
_a$2);
|
|
6402
6402
|
|
|
6403
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6404
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6405
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6406
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6403
|
+
var CustomerDetails = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject([""], [""])));
|
|
6404
|
+
var CustomerInfo = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __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"])));
|
|
6405
|
+
var Name = newStyled.h4(templateObject_3$1c || (templateObject_3$1c = __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"])));
|
|
6406
|
+
var StarIconContainer = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __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"])));
|
|
6407
6407
|
var Description$2 = newStyled.p(templateObject_5$K || (templateObject_5$K = __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"])));
|
|
6408
6408
|
var ReviewDays = newStyled.span(templateObject_6$D || (templateObject_6$D = __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"])));
|
|
6409
|
-
var templateObject_1$
|
|
6409
|
+
var templateObject_1$22, templateObject_2$1u, templateObject_3$1c, templateObject_4$Z, templateObject_5$K, templateObject_6$D;
|
|
6410
6410
|
|
|
6411
6411
|
var NameWithStars = function (_a) {
|
|
6412
6412
|
var name = _a.name, size = _a.size;
|
|
@@ -6424,10 +6424,10 @@ var ResultFeedback = function (_a) {
|
|
|
6424
6424
|
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));
|
|
6425
6425
|
};
|
|
6426
6426
|
|
|
6427
|
-
var Container$
|
|
6428
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6429
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6430
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6427
|
+
var Container$1h = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __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; });
|
|
6428
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __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"])));
|
|
6429
|
+
var ImageCard = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __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; });
|
|
6430
|
+
var UserInfoText = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __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) {
|
|
6431
6431
|
var theme = _a.theme;
|
|
6432
6432
|
return theme.colors.pallete.secondary.color;
|
|
6433
6433
|
}, function (_a) {
|
|
@@ -6437,7 +6437,7 @@ var UserInfoText = newStyled.div(templateObject_4$X || (templateObject_4$X = __m
|
|
|
6437
6437
|
var theme = _a.theme, size = _a.size;
|
|
6438
6438
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6439
6439
|
});
|
|
6440
|
-
var templateObject_1$
|
|
6440
|
+
var templateObject_1$21, templateObject_2$1t, templateObject_3$1b, templateObject_4$Y;
|
|
6441
6441
|
|
|
6442
6442
|
/* base styles & size variants */
|
|
6443
6443
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6512,10 +6512,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6512
6512
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6513
6513
|
var infoText = buildInfoText(name, age, months);
|
|
6514
6514
|
var Component = componentByVariant[variant];
|
|
6515
|
-
return (jsxs$1(Container$
|
|
6515
|
+
return (jsxs$1(Container$1h, __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));
|
|
6516
6516
|
};
|
|
6517
6517
|
|
|
6518
|
-
var Section = newStyled.div(templateObject_1$
|
|
6518
|
+
var Section = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __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) {
|
|
6519
6519
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6520
6520
|
});
|
|
6521
6521
|
var CardHeader = function (_a) {
|
|
@@ -6526,16 +6526,16 @@ var CardFooter = function (_a) {
|
|
|
6526
6526
|
var children = _a.children;
|
|
6527
6527
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6528
6528
|
};
|
|
6529
|
-
var templateObject_1$
|
|
6529
|
+
var templateObject_1$20;
|
|
6530
6530
|
|
|
6531
|
-
var Body$1 = newStyled.div(templateObject_1$
|
|
6531
|
+
var Body$1 = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __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"])));
|
|
6532
6532
|
var CardBody$1 = function (_a) {
|
|
6533
6533
|
var children = _a.children;
|
|
6534
6534
|
return jsx$1(Body$1, { children: children }, void 0);
|
|
6535
6535
|
};
|
|
6536
|
-
var templateObject_1$
|
|
6536
|
+
var templateObject_1$1$;
|
|
6537
6537
|
|
|
6538
|
-
var Container$
|
|
6538
|
+
var Container$1g = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __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) {
|
|
6539
6539
|
var flex = _a.flex;
|
|
6540
6540
|
return flex &&
|
|
6541
6541
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6550,23 +6550,23 @@ var Container$1f = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = _
|
|
|
6550
6550
|
var Card$2 = function (_a) {
|
|
6551
6551
|
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;
|
|
6552
6552
|
var theme = useTheme();
|
|
6553
|
-
return (jsx$1(Container$
|
|
6553
|
+
return (jsx$1(Container$1g, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6554
6554
|
};
|
|
6555
6555
|
var Card$3 = Object.assign(Card$2, {
|
|
6556
6556
|
Header: CardHeader,
|
|
6557
6557
|
Footer: CardFooter,
|
|
6558
6558
|
Body: CardBody$1,
|
|
6559
6559
|
});
|
|
6560
|
-
var templateObject_1$
|
|
6560
|
+
var templateObject_1$1_;
|
|
6561
6561
|
|
|
6562
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6563
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6564
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6562
|
+
var StyledWrapper = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __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"])));
|
|
6563
|
+
var StyledContainer = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __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"])));
|
|
6564
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$1a || (templateObject_3$1a = __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) {
|
|
6565
6565
|
var color = _a.color;
|
|
6566
6566
|
return color;
|
|
6567
6567
|
});
|
|
6568
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6569
|
-
var templateObject_1$
|
|
6568
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$X || (templateObject_4$X = __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"])));
|
|
6569
|
+
var templateObject_1$1Z, templateObject_2$1s, templateObject_3$1a, templateObject_4$X;
|
|
6570
6570
|
|
|
6571
6571
|
var Minimalistic = function (_a) {
|
|
6572
6572
|
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;
|
|
@@ -6574,28 +6574,28 @@ var Minimalistic = function (_a) {
|
|
|
6574
6574
|
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));
|
|
6575
6575
|
};
|
|
6576
6576
|
|
|
6577
|
-
var Container$
|
|
6578
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6579
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6580
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6577
|
+
var Container$1f = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6578
|
+
var Title$9 = newStyled.h1(templateObject_2$1r || (templateObject_2$1r = __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; });
|
|
6579
|
+
var Details$1 = newStyled.span(templateObject_3$19 || (templateObject_3$19 = __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; });
|
|
6580
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$W || (templateObject_4$W = __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"])));
|
|
6581
6581
|
var Simple = function (_a) {
|
|
6582
6582
|
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;
|
|
6583
6583
|
var theme = useTheme();
|
|
6584
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
6584
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$1f, { 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));
|
|
6585
6585
|
};
|
|
6586
|
-
var templateObject_1$
|
|
6586
|
+
var templateObject_1$1Y, templateObject_2$1r, templateObject_3$19, templateObject_4$W;
|
|
6587
6587
|
|
|
6588
6588
|
var Bundle = {
|
|
6589
6589
|
Minimalistic: Minimalistic,
|
|
6590
6590
|
Simple: Simple,
|
|
6591
6591
|
};
|
|
6592
6592
|
|
|
6593
|
-
var Container$
|
|
6593
|
+
var Container$1e = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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) {
|
|
6594
6594
|
var displayBNPL = _a.displayBNPL;
|
|
6595
6595
|
return (displayBNPL ? 'flex' : 'none');
|
|
6596
6596
|
});
|
|
6597
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6598
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6597
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __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"])));
|
|
6598
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$18 || (templateObject_3$18 = __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"])));
|
|
6599
6599
|
var BuyNowPayLater = function (_a) {
|
|
6600
6600
|
var _b;
|
|
6601
6601
|
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;
|
|
@@ -6615,16 +6615,16 @@ var BuyNowPayLater = function (_a) {
|
|
|
6615
6615
|
else {
|
|
6616
6616
|
dynamicText = "or 4 interest-free payments of ";
|
|
6617
6617
|
}
|
|
6618
|
-
return (jsx$1(Container$
|
|
6618
|
+
return (jsx$1(Container$1e, __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: {
|
|
6619
6619
|
display: 'inline',
|
|
6620
6620
|
fontSize: fontSize,
|
|
6621
6621
|
paddingLeft: '0.25rem',
|
|
6622
6622
|
paddingRight: '0.25rem',
|
|
6623
6623
|
}, 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));
|
|
6624
6624
|
};
|
|
6625
|
-
var templateObject_1$
|
|
6625
|
+
var templateObject_1$1X, templateObject_2$1q, templateObject_3$18;
|
|
6626
6626
|
|
|
6627
|
-
var Text$6 = newStyled.h3(templateObject_1$
|
|
6627
|
+
var Text$6 = newStyled.h3(templateObject_1$1W || (templateObject_1$1W = __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) {
|
|
6628
6628
|
var backgroundColor = _a.backgroundColor;
|
|
6629
6629
|
return backgroundColor;
|
|
6630
6630
|
}, function (_a) {
|
|
@@ -6639,47 +6639,47 @@ var OfferBanner = function (_a) {
|
|
|
6639
6639
|
var theme = useTheme();
|
|
6640
6640
|
return (jsx$1(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6641
6641
|
};
|
|
6642
|
-
var templateObject_1$
|
|
6642
|
+
var templateObject_1$1W;
|
|
6643
6643
|
|
|
6644
|
-
var Container$
|
|
6644
|
+
var Container$1d = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __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"); });
|
|
6645
6645
|
var CloseButton$1 = function (_a) {
|
|
6646
6646
|
var onClick = _a.onClick, size = _a.size;
|
|
6647
6647
|
var theme = useTheme();
|
|
6648
|
-
return (jsx$1(Container$
|
|
6648
|
+
return (jsx$1(Container$1d, __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));
|
|
6649
6649
|
};
|
|
6650
|
-
var templateObject_1$
|
|
6650
|
+
var templateObject_1$1V;
|
|
6651
6651
|
|
|
6652
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6652
|
+
var Text$5 = newStyled.span(templateObject_1$1U || (templateObject_1$1U = __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; });
|
|
6653
6653
|
var Description$1 = function (_a) {
|
|
6654
6654
|
var text = _a.text;
|
|
6655
6655
|
var theme = useTheme();
|
|
6656
6656
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6657
6657
|
};
|
|
6658
|
-
var templateObject_1$
|
|
6658
|
+
var templateObject_1$1U;
|
|
6659
6659
|
|
|
6660
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6660
|
+
var P$4 = newStyled.p(templateObject_1$1T || (templateObject_1$1T = __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; });
|
|
6661
6661
|
var Promo = function (_a) {
|
|
6662
6662
|
var text = _a.text;
|
|
6663
6663
|
var theme = useTheme();
|
|
6664
6664
|
return (jsx$1(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6665
6665
|
};
|
|
6666
|
-
var templateObject_1$
|
|
6666
|
+
var templateObject_1$1T;
|
|
6667
6667
|
|
|
6668
|
-
var Text$4 = newStyled.span(templateObject_1$
|
|
6668
|
+
var Text$4 = newStyled.span(templateObject_1$1S || (templateObject_1$1S = __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; });
|
|
6669
6669
|
var Title$8 = function (_a) {
|
|
6670
6670
|
var title = _a.title;
|
|
6671
6671
|
var theme = useTheme();
|
|
6672
6672
|
return jsx$1(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6673
6673
|
};
|
|
6674
|
-
var templateObject_1$
|
|
6674
|
+
var templateObject_1$1S;
|
|
6675
6675
|
|
|
6676
|
-
var Container$
|
|
6677
|
-
var templateObject_1$
|
|
6676
|
+
var Container$1c = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"], ["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"])), function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6677
|
+
var templateObject_1$1R;
|
|
6678
6678
|
|
|
6679
6679
|
var TrashButton = function (_a) {
|
|
6680
6680
|
var onClick = _a.onClick, size = _a.size;
|
|
6681
6681
|
useTheme();
|
|
6682
|
-
return (jsx$1(Container$
|
|
6682
|
+
return (jsx$1(Container$1c, __assign$1({ onClick: onClick, "data-testid": "CartProductItemTrashBtn", size: size }, { children: jsx$1(Icon.Actions.Trash, { width: size, height: size, fill: "#292929" }, void 0) }), void 0));
|
|
6683
6683
|
};
|
|
6684
6684
|
|
|
6685
6685
|
var CartProductItem = {
|
|
@@ -6691,10 +6691,10 @@ var CartProductItem = {
|
|
|
6691
6691
|
TrashButton: TrashButton,
|
|
6692
6692
|
};
|
|
6693
6693
|
|
|
6694
|
-
var Container$
|
|
6695
|
-
var MobileContainer = newStyled(Container$
|
|
6696
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6697
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6694
|
+
var Container$1b = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __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"])));
|
|
6695
|
+
var MobileContainer = newStyled(Container$1b)(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6696
|
+
var DollarPart = newStyled.span(templateObject_3$17 || (templateObject_3$17 = __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"])));
|
|
6697
|
+
var ClubMembersText = newStyled.span(templateObject_4$V || (templateObject_4$V = __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"])));
|
|
6698
6698
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$J || (templateObject_5$J = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6699
6699
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$C || (templateObject_6$C = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6700
6700
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6702,9 +6702,9 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$o || (t
|
|
|
6702
6702
|
var ClubPriceLabel = function (_a) {
|
|
6703
6703
|
var clubPrice = _a.clubPrice;
|
|
6704
6704
|
var isMobile = useWindowDimensions().isMobile;
|
|
6705
|
-
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$
|
|
6705
|
+
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$1b, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6706
6706
|
};
|
|
6707
|
-
var templateObject_1$
|
|
6707
|
+
var templateObject_1$1Q, templateObject_2$1p, templateObject_3$17, templateObject_4$V, templateObject_5$J, templateObject_6$C, templateObject_7$v, templateObject_8$o;
|
|
6708
6708
|
|
|
6709
6709
|
var Spacing = function (_a) {
|
|
6710
6710
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6712,10 +6712,10 @@ var Spacing = function (_a) {
|
|
|
6712
6712
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6713
6713
|
};
|
|
6714
6714
|
|
|
6715
|
-
var Container$
|
|
6716
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6717
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6718
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6715
|
+
var Container$1a = newStyled('div')(templateObject_1$1P || (templateObject_1$1P = __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"])));
|
|
6716
|
+
var Content$2 = newStyled('div')(templateObject_2$1o || (templateObject_2$1o = __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"])));
|
|
6717
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$16 || (templateObject_3$16 = __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"])));
|
|
6718
|
+
var Bar$2 = newStyled('div')(templateObject_4$U || (templateObject_4$U = __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) {
|
|
6719
6719
|
var index = _a.index;
|
|
6720
6720
|
return "".concat(6 + 3 * index, "px");
|
|
6721
6721
|
}, function (_a) {
|
|
@@ -6724,12 +6724,12 @@ var Bar$2 = newStyled('div')(templateObject_4$T || (templateObject_4$T = __makeT
|
|
|
6724
6724
|
});
|
|
6725
6725
|
var StrengthBars = function (_a) {
|
|
6726
6726
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6727
|
-
return (jsxs$1(Container$
|
|
6727
|
+
return (jsxs$1(Container$1a, __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));
|
|
6728
6728
|
};
|
|
6729
|
-
var templateObject_1$
|
|
6729
|
+
var templateObject_1$1P, templateObject_2$1o, templateObject_3$16, templateObject_4$U;
|
|
6730
6730
|
|
|
6731
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6732
|
-
var templateObject_1$
|
|
6731
|
+
var Benefit$2 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
6732
|
+
var templateObject_1$1O;
|
|
6733
6733
|
|
|
6734
6734
|
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;}}";
|
|
6735
6735
|
|
|
@@ -6751,10 +6751,10 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6751
6751
|
|
|
6752
6752
|
var STARTS_NUMBER = 5;
|
|
6753
6753
|
|
|
6754
|
-
var Container$
|
|
6755
|
-
var templateObject_1$
|
|
6754
|
+
var Container$19 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6755
|
+
var templateObject_1$1N;
|
|
6756
6756
|
|
|
6757
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6757
|
+
var StarContainer = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6758
6758
|
var marginRight = _a.marginRight;
|
|
6759
6759
|
return marginRight;
|
|
6760
6760
|
});
|
|
@@ -6766,11 +6766,11 @@ var StarList = function (_a) {
|
|
|
6766
6766
|
width: theme.component.stars.element[size].width,
|
|
6767
6767
|
height: theme.component.stars.element[size].height,
|
|
6768
6768
|
};
|
|
6769
|
-
return (jsx$1(Container$
|
|
6769
|
+
return (jsx$1(Container$19, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6770
6770
|
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)));
|
|
6771
6771
|
}) }, void 0));
|
|
6772
6772
|
};
|
|
6773
|
-
var templateObject_1$
|
|
6773
|
+
var templateObject_1$1M;
|
|
6774
6774
|
|
|
6775
6775
|
/* base styles & size variants */
|
|
6776
6776
|
var LabelStyles = {
|
|
@@ -6818,7 +6818,7 @@ var LabelStyles = {
|
|
|
6818
6818
|
});
|
|
6819
6819
|
},
|
|
6820
6820
|
};
|
|
6821
|
-
var Container$
|
|
6821
|
+
var Container$18 = newStyled.a(templateObject_1$1L || (templateObject_1$1L = __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"])));
|
|
6822
6822
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6823
6823
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6824
6824
|
return [
|
|
@@ -6837,8 +6837,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6837
6837
|
}),
|
|
6838
6838
|
];
|
|
6839
6839
|
});
|
|
6840
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6841
|
-
var templateObject_1$
|
|
6840
|
+
var RatingLabel = newStyled.span(templateObject_2$1n || (templateObject_2$1n = __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; });
|
|
6841
|
+
var templateObject_1$1L, templateObject_2$1n;
|
|
6842
6842
|
|
|
6843
6843
|
var Rating = function (_a) {
|
|
6844
6844
|
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;
|
|
@@ -6859,19 +6859,19 @@ var Rating = function (_a) {
|
|
|
6859
6859
|
href: reviewsContainerId,
|
|
6860
6860
|
}
|
|
6861
6861
|
: {};
|
|
6862
|
-
return (jsxs$1(Container$
|
|
6862
|
+
return (jsxs$1(Container$18, __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));
|
|
6863
6863
|
};
|
|
6864
6864
|
|
|
6865
|
-
var ImageWrapper$4 = newStyled.div(templateObject_1$
|
|
6865
|
+
var ImageWrapper$4 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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) {
|
|
6866
6866
|
var width = _a.width;
|
|
6867
6867
|
return width !== null && width !== void 0 ? width : '30%';
|
|
6868
6868
|
});
|
|
6869
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6870
|
-
var RatingText = newStyled.span(templateObject_3$
|
|
6869
|
+
var RatingWrapper = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __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"])));
|
|
6870
|
+
var RatingText = newStyled.span(templateObject_3$15 || (templateObject_3$15 = __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) {
|
|
6871
6871
|
var fontSize = _a.fontSize;
|
|
6872
6872
|
return fontSize;
|
|
6873
6873
|
});
|
|
6874
|
-
var templateObject_1$
|
|
6874
|
+
var templateObject_1$1K, templateObject_2$1m, templateObject_3$15;
|
|
6875
6875
|
|
|
6876
6876
|
var OfferAtCartImage = function (_a) {
|
|
6877
6877
|
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width;
|
|
@@ -6918,9 +6918,9 @@ var getDropdownOptions = function (frequency) {
|
|
|
6918
6918
|
}); });
|
|
6919
6919
|
};
|
|
6920
6920
|
|
|
6921
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
6922
|
-
var BenefitText$2 = newStyled(Text$7)(templateObject_2$
|
|
6923
|
-
var templateObject_1$
|
|
6921
|
+
var Benefit$1 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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"])));
|
|
6922
|
+
var BenefitText$2 = newStyled(Text$7)(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6923
|
+
var templateObject_1$1J, templateObject_2$1l;
|
|
6924
6924
|
|
|
6925
6925
|
var BenefitsList = function (_a) {
|
|
6926
6926
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6931,23 +6931,23 @@ var BenefitsList = function (_a) {
|
|
|
6931
6931
|
}) }, void 0));
|
|
6932
6932
|
};
|
|
6933
6933
|
|
|
6934
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6934
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6935
6935
|
var timerColor = _a.timerColor;
|
|
6936
6936
|
return timerColor || '';
|
|
6937
6937
|
});
|
|
6938
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
6938
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __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) {
|
|
6939
6939
|
var timerColor = _a.timerColor;
|
|
6940
6940
|
return timerColor || '';
|
|
6941
6941
|
});
|
|
6942
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
6942
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$14 || (templateObject_3$14 = __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) {
|
|
6943
6943
|
var theme = _a.theme;
|
|
6944
6944
|
return theme.colors.shades.white.color;
|
|
6945
6945
|
}, function (_a) {
|
|
6946
6946
|
var theme = _a.theme;
|
|
6947
6947
|
return theme.colors.shades.white.color;
|
|
6948
6948
|
});
|
|
6949
|
-
var Unit = newStyled.p(templateObject_4$
|
|
6950
|
-
var templateObject_1$
|
|
6949
|
+
var Unit = newStyled.p(templateObject_4$T || (templateObject_4$T = __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"])));
|
|
6950
|
+
var templateObject_1$1I, templateObject_2$1k, templateObject_3$14, templateObject_4$T;
|
|
6951
6951
|
|
|
6952
6952
|
var HRS = 'HRS';
|
|
6953
6953
|
var MIN = 'MIN';
|
|
@@ -6988,7 +6988,7 @@ var Timer = function (_a) {
|
|
|
6988
6988
|
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));
|
|
6989
6989
|
};
|
|
6990
6990
|
|
|
6991
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
6991
|
+
var TimerContainer = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __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) {
|
|
6992
6992
|
var textPosition = _a.textPosition;
|
|
6993
6993
|
return textPosition;
|
|
6994
6994
|
}, function (_a) {
|
|
@@ -7001,7 +7001,7 @@ var TimerContainer = newStyled.div(templateObject_1$1G || (templateObject_1$1G =
|
|
|
7001
7001
|
var borderRadius = _a.borderRadius;
|
|
7002
7002
|
return borderRadius || '8px';
|
|
7003
7003
|
});
|
|
7004
|
-
var templateObject_1$
|
|
7004
|
+
var templateObject_1$1H;
|
|
7005
7005
|
|
|
7006
7006
|
var getDefaultCountdown = function () {
|
|
7007
7007
|
var tomorrowDate = new Date();
|
|
@@ -7017,7 +7017,7 @@ var HurryUp = function (_a) {
|
|
|
7017
7017
|
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));
|
|
7018
7018
|
};
|
|
7019
7019
|
|
|
7020
|
-
var Container$
|
|
7020
|
+
var Container$17 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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) {
|
|
7021
7021
|
var size = _a.size;
|
|
7022
7022
|
return (size ? size : '100%');
|
|
7023
7023
|
}, function (_a) {
|
|
@@ -7032,7 +7032,7 @@ var borderSize = {
|
|
|
7032
7032
|
large: '3px',
|
|
7033
7033
|
};
|
|
7034
7034
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
7035
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
7035
|
+
var StyledSpinner = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __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) {
|
|
7036
7036
|
var size = _a.size;
|
|
7037
7037
|
return borderSize[size];
|
|
7038
7038
|
}, function (_a) {
|
|
@@ -7045,29 +7045,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1i || (templateObject_2$1i =
|
|
|
7045
7045
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
7046
7046
|
return duration;
|
|
7047
7047
|
});
|
|
7048
|
-
var templateObject_1$
|
|
7048
|
+
var templateObject_1$1G, templateObject_2$1j;
|
|
7049
7049
|
|
|
7050
7050
|
var Spinner = function (_a) {
|
|
7051
7051
|
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;
|
|
7052
|
-
return (jsx$1(Container$
|
|
7052
|
+
return (jsx$1(Container$17, __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));
|
|
7053
7053
|
};
|
|
7054
7054
|
|
|
7055
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
7056
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
7057
|
-
var templateObject_1$
|
|
7055
|
+
var ProgressContainer = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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); });
|
|
7056
|
+
var ProgressFiller = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __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; });
|
|
7057
|
+
var templateObject_1$1F, templateObject_2$1i;
|
|
7058
7058
|
|
|
7059
7059
|
var ProgressBar$1 = function (_a) {
|
|
7060
7060
|
var progress = _a.progress, hide = _a.hide;
|
|
7061
7061
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
7062
7062
|
};
|
|
7063
7063
|
|
|
7064
|
-
var Container$
|
|
7065
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
7066
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
7067
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
7064
|
+
var Container$16 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
7065
|
+
var HTMLVideo = newStyled.video(templateObject_2$1h || (templateObject_2$1h = __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; });
|
|
7066
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$13 || (templateObject_3$13 = __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"])));
|
|
7067
|
+
var PlayContainer = newStyled.div(templateObject_4$S || (templateObject_4$S = __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"])));
|
|
7068
7068
|
var PauseContainer = newStyled.div(templateObject_5$I || (templateObject_5$I = __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"])));
|
|
7069
7069
|
var MuteButton = newStyled.button(templateObject_6$B || (templateObject_6$B = __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"])));
|
|
7070
|
-
var templateObject_1$
|
|
7070
|
+
var templateObject_1$1E, templateObject_2$1h, templateObject_3$13, templateObject_4$S, templateObject_5$I, templateObject_6$B;
|
|
7071
7071
|
|
|
7072
7072
|
var Video$1 = function (_a) {
|
|
7073
7073
|
var _b, _c, _d, _e;
|
|
@@ -7117,14 +7117,14 @@ var Video$1 = function (_a) {
|
|
|
7117
7117
|
setVideoProgress(videoRef.current.currentTime);
|
|
7118
7118
|
}
|
|
7119
7119
|
};
|
|
7120
|
-
return (jsxs$1(Container$
|
|
7120
|
+
return (jsxs$1(Container$16, __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));
|
|
7121
7121
|
};
|
|
7122
7122
|
|
|
7123
|
-
var LikeCount = newStyled.span(templateObject_1$
|
|
7123
|
+
var LikeCount = newStyled.span(templateObject_1$1D || (templateObject_1$1D = __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) {
|
|
7124
7124
|
var theme = _a.theme;
|
|
7125
7125
|
return theme.colors.shades.black.color;
|
|
7126
7126
|
});
|
|
7127
|
-
var LikeBtnContainer = newStyled.button(templateObject_2$
|
|
7127
|
+
var LikeBtnContainer = newStyled.button(templateObject_2$1g || (templateObject_2$1g = __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) {
|
|
7128
7128
|
var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
|
|
7129
7129
|
return position;
|
|
7130
7130
|
}, function (_a) {
|
|
@@ -7143,7 +7143,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1f || (templateObject_2
|
|
|
7143
7143
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
7144
7144
|
return boxSizing;
|
|
7145
7145
|
});
|
|
7146
|
-
var templateObject_1$
|
|
7146
|
+
var templateObject_1$1D, templateObject_2$1g;
|
|
7147
7147
|
|
|
7148
7148
|
var getStylesBySize$c = function (size) {
|
|
7149
7149
|
switch (size) {
|
|
@@ -7164,7 +7164,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7164
7164
|
};
|
|
7165
7165
|
}
|
|
7166
7166
|
};
|
|
7167
|
-
var Container$
|
|
7167
|
+
var Container$15 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __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) {
|
|
7168
7168
|
var backgroundColor = _a.backgroundColor;
|
|
7169
7169
|
return backgroundColor;
|
|
7170
7170
|
}, function (_a) {
|
|
@@ -7205,9 +7205,9 @@ var IconButton = function (_a) {
|
|
|
7205
7205
|
var _b, _c;
|
|
7206
7206
|
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;
|
|
7207
7207
|
var theme = useTheme();
|
|
7208
|
-
return (jsx$1(Container$
|
|
7208
|
+
return (jsx$1(Container$15, __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));
|
|
7209
7209
|
};
|
|
7210
|
-
var templateObject_1$
|
|
7210
|
+
var templateObject_1$1C;
|
|
7211
7211
|
|
|
7212
7212
|
var LikeButton = function (_a) {
|
|
7213
7213
|
var _b;
|
|
@@ -7220,10 +7220,10 @@ var LikeButton = function (_a) {
|
|
|
7220
7220
|
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));
|
|
7221
7221
|
};
|
|
7222
7222
|
|
|
7223
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
7224
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
7225
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
7226
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
7223
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1B || (templateObject_1$1B = __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"])));
|
|
7224
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1f || (templateObject_2$1f = __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"])));
|
|
7225
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7226
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7227
7227
|
var PriceWithTagContainer = newStyled.span(templateObject_5$H || (templateObject_5$H = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
7228
7228
|
var RegularPriceTag = function () {
|
|
7229
7229
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
@@ -7274,11 +7274,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
7274
7274
|
: ComponentSize.XSmall;
|
|
7275
7275
|
return (jsx$1(Price$1, __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));
|
|
7276
7276
|
};
|
|
7277
|
-
return (jsxs$1(Container$
|
|
7277
|
+
return (jsxs$1(Container$1u, __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$1, __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$1, __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$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
7278
7278
|
? finalPriceArray[0]
|
|
7279
7279
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price$1, __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$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7280
7280
|
};
|
|
7281
|
-
var templateObject_1$
|
|
7281
|
+
var templateObject_1$1B, templateObject_2$1f, templateObject_3$12, templateObject_4$R, templateObject_5$H;
|
|
7282
7282
|
|
|
7283
7283
|
var STYLES_BY_THEME = {
|
|
7284
7284
|
TheSpaDr: {
|
|
@@ -7351,10 +7351,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7351
7351
|
height: height,
|
|
7352
7352
|
});
|
|
7353
7353
|
});
|
|
7354
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
7355
|
-
var Container$
|
|
7356
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
7357
|
-
var Title$7 = newStyled.h2(templateObject_4$
|
|
7354
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1A || (templateObject_1$1A = __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"])));
|
|
7355
|
+
var Container$14 = newStyled.a(templateObject_2$1e || (templateObject_2$1e = __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"])));
|
|
7356
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$11 || (templateObject_3$11 = __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"])));
|
|
7357
|
+
var Title$7 = newStyled.h2(templateObject_4$Q || (templateObject_4$Q = __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) {
|
|
7358
7358
|
var theme = _a.theme;
|
|
7359
7359
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
7360
7360
|
}, function (_a) {
|
|
@@ -7415,7 +7415,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$A || (templateObject_6
|
|
|
7415
7415
|
});
|
|
7416
7416
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$u || (templateObject_7$u = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7417
7417
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$n || (templateObject_8$n = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7418
|
-
var templateObject_1$
|
|
7418
|
+
var templateObject_1$1A, templateObject_2$1e, templateObject_3$11, templateObject_4$Q, templateObject_5$G, templateObject_6$A, templateObject_7$u, templateObject_8$n;
|
|
7419
7419
|
|
|
7420
7420
|
var ProductItemMobile = function (_a) {
|
|
7421
7421
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7507,12 +7507,12 @@ var ProductItemMobile = function (_a) {
|
|
|
7507
7507
|
setIsLiked(function (prev) { return !prev; });
|
|
7508
7508
|
likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.onClick(e);
|
|
7509
7509
|
};
|
|
7510
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7510
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$14, __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: {
|
|
7511
7511
|
background: {
|
|
7512
7512
|
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,
|
|
7513
7513
|
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,
|
|
7514
7514
|
},
|
|
7515
|
-
} }, 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$
|
|
7515
|
+
} }, 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$14, __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$4, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
7516
7516
|
letterSpacing: '-0.05rem',
|
|
7517
7517
|
} }), 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) {
|
|
7518
7518
|
e.preventDefault();
|
|
@@ -7532,10 +7532,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7532
7532
|
height: height,
|
|
7533
7533
|
});
|
|
7534
7534
|
});
|
|
7535
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
7536
|
-
var Container$
|
|
7537
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3
|
|
7538
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
7535
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1z || (templateObject_1$1z = __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; });
|
|
7536
|
+
var Container$13 = newStyled.a(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
7537
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __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"])));
|
|
7538
|
+
var Title$6 = newStyled.p(templateObject_4$P || (templateObject_4$P = __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; });
|
|
7539
7539
|
var getStylesBySize$a = function (size) {
|
|
7540
7540
|
switch (size) {
|
|
7541
7541
|
case ComponentSize.Medium:
|
|
@@ -7614,26 +7614,26 @@ var ProductItemTK = function (_a) {
|
|
|
7614
7614
|
: undefined }, void 0));
|
|
7615
7615
|
};
|
|
7616
7616
|
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)); };
|
|
7617
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7617
|
+
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$13, __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$13, __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 ? (
|
|
7618
7618
|
// @ts-ignore
|
|
7619
7619
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
7620
7620
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
7621
7621
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7622
7622
|
} }, { 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));
|
|
7623
7623
|
};
|
|
7624
|
-
var templateObject_1$
|
|
7624
|
+
var templateObject_1$1z, templateObject_2$1d, templateObject_3$10, templateObject_4$P, templateObject_5$F, templateObject_6$z, templateObject_7$t, templateObject_8$m;
|
|
7625
7625
|
|
|
7626
|
-
var Container$
|
|
7626
|
+
var Container$12 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
7627
7627
|
function withProductGrid(ProductItemComponent, data) {
|
|
7628
7628
|
function WithProductGrid(props) {
|
|
7629
|
-
return (jsx$1(Container$
|
|
7629
|
+
return (jsx$1(Container$12, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
7630
7630
|
}
|
|
7631
7631
|
/* istanbul ignore next */
|
|
7632
7632
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
7633
7633
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7634
7634
|
return WithProductGrid;
|
|
7635
7635
|
}
|
|
7636
|
-
var templateObject_1$
|
|
7636
|
+
var templateObject_1$1y;
|
|
7637
7637
|
|
|
7638
7638
|
var Collection = {
|
|
7639
7639
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7641,10 +7641,10 @@ var Collection = {
|
|
|
7641
7641
|
ProductItemTK: ProductItemTK,
|
|
7642
7642
|
};
|
|
7643
7643
|
|
|
7644
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7645
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7646
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3
|
|
7647
|
-
var Span = newStyled.span(templateObject_4$
|
|
7644
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7645
|
+
newStyled(lt.Label)(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7646
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$$ || (templateObject_3$$ = __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"])));
|
|
7647
|
+
var Span = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7648
7648
|
var OptionsContainer = newStyled.div(templateObject_5$E || (templateObject_5$E = __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"])));
|
|
7649
7649
|
var Label$5 = function (_a) {
|
|
7650
7650
|
var label = _a.label, values = _a.values;
|
|
@@ -7663,7 +7663,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7663
7663
|
Option: Option,
|
|
7664
7664
|
OptionsContainer: OptionsContainer,
|
|
7665
7665
|
});
|
|
7666
|
-
var templateObject_1$
|
|
7666
|
+
var templateObject_1$1x, templateObject_2$1c, templateObject_3$$, templateObject_4$O, templateObject_5$E;
|
|
7667
7667
|
|
|
7668
7668
|
var OneColorSelector = function (_a) {
|
|
7669
7669
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7704,21 +7704,21 @@ var OutOfStock = function (_a) {
|
|
|
7704
7704
|
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));
|
|
7705
7705
|
};
|
|
7706
7706
|
|
|
7707
|
-
var Container$
|
|
7707
|
+
var Container$11 = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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) {
|
|
7708
7708
|
var borderColor = _a.borderColor;
|
|
7709
7709
|
return borderColor;
|
|
7710
7710
|
}, function (_a) {
|
|
7711
7711
|
var noStock = _a.noStock;
|
|
7712
7712
|
return (noStock ? '0.4' : '1');
|
|
7713
7713
|
});
|
|
7714
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7714
|
+
var Image$2 = newStyled.img(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7715
7715
|
var PatternSelector = function (_a) {
|
|
7716
7716
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7717
7717
|
var theme = useTheme();
|
|
7718
7718
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7719
|
-
return (jsx$1(Container$
|
|
7719
|
+
return (jsx$1(Container$11, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7720
7720
|
};
|
|
7721
|
-
var templateObject_1$
|
|
7721
|
+
var templateObject_1$1w, templateObject_2$1b;
|
|
7722
7722
|
|
|
7723
7723
|
var renderOptions$1 = function (options, showCross) {
|
|
7724
7724
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7746,10 +7746,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7746
7746
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7747
7747
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7748
7748
|
var showCloseIcon = (tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {}).showCloseIcon;
|
|
7749
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7749
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1v || (templateObject_1$1v = __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 "])));
|
|
7750
7750
|
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));
|
|
7751
7751
|
};
|
|
7752
|
-
var templateObject_1$
|
|
7752
|
+
var templateObject_1$1v;
|
|
7753
7753
|
|
|
7754
7754
|
var renderOptions = function (selectedColor, options) {
|
|
7755
7755
|
if (options == null || options.length === 0) {
|
|
@@ -7787,13 +7787,13 @@ var MultiColorPicker = function (_a) {
|
|
|
7787
7787
|
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));
|
|
7788
7788
|
};
|
|
7789
7789
|
|
|
7790
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7791
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7792
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7790
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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'); });
|
|
7791
|
+
var Col$1 = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7792
|
+
var Row$2 = newStyled.div(templateObject_3$_ || (templateObject_3$_ = __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) {
|
|
7793
7793
|
return props.rightToLeft &&
|
|
7794
7794
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7795
7795
|
});
|
|
7796
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7796
|
+
var H5 = newStyled.h5(templateObject_4$N || (templateObject_4$N = __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; });
|
|
7797
7797
|
var H3 = newStyled.h3(templateObject_5$D || (templateObject_5$D = __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; });
|
|
7798
7798
|
var FreeShipping = newStyled.span(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7799
7799
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -7801,7 +7801,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7801
7801
|
var theme = useTheme();
|
|
7802
7802
|
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));
|
|
7803
7803
|
};
|
|
7804
|
-
var templateObject_1$
|
|
7804
|
+
var templateObject_1$1u, templateObject_2$1a, templateObject_3$_, templateObject_4$N, templateObject_5$D, templateObject_6$y;
|
|
7805
7805
|
|
|
7806
7806
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7807
7807
|
__proto__: null,
|
|
@@ -7830,7 +7830,7 @@ var sizeMapper = (_a = {},
|
|
|
7830
7830
|
_a[ComponentSize.XSmall] = 'small',
|
|
7831
7831
|
_a[ComponentSize.XXSmall] = 'small',
|
|
7832
7832
|
_a);
|
|
7833
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7833
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n ", "\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 ", "\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7834
7834
|
var wide = _a.wide;
|
|
7835
7835
|
return (wide ? '100%' : 'fit-content');
|
|
7836
7836
|
}, function (_a) {
|
|
@@ -7855,11 +7855,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1s || (templateObj
|
|
|
7855
7855
|
var theme = _a.theme;
|
|
7856
7856
|
return theme.colors.text.disabled;
|
|
7857
7857
|
});
|
|
7858
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7858
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7859
7859
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7860
7860
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7861
7861
|
});
|
|
7862
|
-
var templateObject_1$
|
|
7862
|
+
var templateObject_1$1t, templateObject_2$19;
|
|
7863
7863
|
|
|
7864
7864
|
var BaseCTA = function (_a) {
|
|
7865
7865
|
var _b, _c, _d;
|
|
@@ -7950,26 +7950,26 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7950
7950
|
} }), void 0));
|
|
7951
7951
|
};
|
|
7952
7952
|
|
|
7953
|
-
var Container
|
|
7954
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
7955
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7956
|
-
var Details = newStyled.span(templateObject_4$
|
|
7953
|
+
var Container$10 = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
7954
|
+
var IconContainer$5 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __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"])));
|
|
7955
|
+
var Text$3 = newStyled.p(templateObject_3$Z || (templateObject_3$Z = __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; });
|
|
7956
|
+
var Details = newStyled.span(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7957
7957
|
var Note = function (_a) {
|
|
7958
7958
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7959
7959
|
var theme = useTheme();
|
|
7960
|
-
return (jsxs$1(Container
|
|
7960
|
+
return (jsxs$1(Container$10, __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));
|
|
7961
7961
|
};
|
|
7962
|
-
var templateObject_1$
|
|
7962
|
+
var templateObject_1$1s, templateObject_2$18, templateObject_3$Z, templateObject_4$M;
|
|
7963
7963
|
|
|
7964
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7964
|
+
var Title$5 = newStyled.h1(templateObject_1$1r || (templateObject_1$1r = __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) {
|
|
7965
7965
|
var theme = _a.theme;
|
|
7966
7966
|
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 ");
|
|
7967
7967
|
});
|
|
7968
|
-
var Line = newStyled.div(templateObject_2$
|
|
7969
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7968
|
+
var Line = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __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; });
|
|
7969
|
+
var Row$1 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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({
|
|
7970
7970
|
flexDirection: ['column', 'row'],
|
|
7971
7971
|
}));
|
|
7972
|
-
var Col = newStyled.div(templateObject_4$
|
|
7972
|
+
var Col = newStyled.div(templateObject_4$L || (templateObject_4$L = __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({
|
|
7973
7973
|
margin: ['0', '0 1.25rem'],
|
|
7974
7974
|
marginBottom: ['1.875rem', '0'],
|
|
7975
7975
|
alignItems: ['center', 'flex-start'],
|
|
@@ -8004,16 +8004,16 @@ var DeliveryDetails = function (_a) {
|
|
|
8004
8004
|
var theme = useTheme();
|
|
8005
8005
|
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));
|
|
8006
8006
|
};
|
|
8007
|
-
var templateObject_1$
|
|
8007
|
+
var templateObject_1$1r, templateObject_2$17, templateObject_3$Y, templateObject_4$L, templateObject_5$C, templateObject_6$x, templateObject_7$s, templateObject_8$l;
|
|
8008
8008
|
|
|
8009
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
8009
|
+
var Backdrop = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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) {
|
|
8010
8010
|
var top = _a.top;
|
|
8011
8011
|
return top;
|
|
8012
8012
|
}, function (_a) {
|
|
8013
8013
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
8014
8014
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
8015
8015
|
});
|
|
8016
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
8016
|
+
var Sidebar = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __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) {
|
|
8017
8017
|
var height = _a.height;
|
|
8018
8018
|
return height;
|
|
8019
8019
|
}, function (_a) {
|
|
@@ -8060,20 +8060,20 @@ var Drawer = function (_a) {
|
|
|
8060
8060
|
}, [isOpen, onClose, onOpen]);
|
|
8061
8061
|
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;
|
|
8062
8062
|
};
|
|
8063
|
-
var templateObject_1$
|
|
8063
|
+
var templateObject_1$1q, templateObject_2$16;
|
|
8064
8064
|
|
|
8065
8065
|
var TooltipArrow = function (_a) {
|
|
8066
8066
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
8067
8067
|
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));
|
|
8068
8068
|
};
|
|
8069
8069
|
|
|
8070
|
-
var List = newStyled.ul(templateObject_1$
|
|
8071
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
8072
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
8073
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
8070
|
+
var List = newStyled.ul(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
8071
|
+
var Item$2 = newStyled.li(templateObject_2$15 || (templateObject_2$15 = __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"])));
|
|
8072
|
+
var DropdownWrapper = newStyled.div(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
8073
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$K || (templateObject_4$K = __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"])));
|
|
8074
8074
|
var StyledDropdown = newStyled.ul(templateObject_5$B || (templateObject_5$B = __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; });
|
|
8075
8075
|
var DropdownItem = newStyled.li(templateObject_6$w || (templateObject_6$w = __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; });
|
|
8076
|
-
var templateObject_1$
|
|
8076
|
+
var templateObject_1$1p, templateObject_2$15, templateObject_3$X, templateObject_4$K, templateObject_5$B, templateObject_6$w;
|
|
8077
8077
|
|
|
8078
8078
|
var DropdownListIcons = function (_a) {
|
|
8079
8079
|
var items = _a.items;
|
|
@@ -8086,13 +8086,13 @@ var Dropdown = function (_a) {
|
|
|
8086
8086
|
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));
|
|
8087
8087
|
};
|
|
8088
8088
|
|
|
8089
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
8090
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
8091
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
8092
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
8089
|
+
var DropdownContainer = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
8090
|
+
var DropdownLabel = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
8091
|
+
var SizeLabel = newStyled.span(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8092
|
+
var DetailLabel = newStyled.span(templateObject_4$J || (templateObject_4$J = __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"])));
|
|
8093
8093
|
var DropdownOptions = newStyled.div(templateObject_5$A || (templateObject_5$A = __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"])));
|
|
8094
8094
|
var DropdownOption = newStyled.div(templateObject_6$v || (templateObject_6$v = __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"])));
|
|
8095
|
-
var templateObject_1$
|
|
8095
|
+
var templateObject_1$1o, templateObject_2$14, templateObject_3$W, templateObject_4$J, templateObject_5$A, templateObject_6$v;
|
|
8096
8096
|
|
|
8097
8097
|
var SizeDropdown = function (_a) {
|
|
8098
8098
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8115,14 +8115,14 @@ var SizeDropdown = function (_a) {
|
|
|
8115
8115
|
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));
|
|
8116
8116
|
};
|
|
8117
8117
|
|
|
8118
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
8119
|
-
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$
|
|
8120
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_3$
|
|
8118
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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; });
|
|
8119
|
+
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __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; });
|
|
8120
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_3$V || (templateObject_3$V = __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) {
|
|
8121
8121
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
8122
8122
|
}, function (props) {
|
|
8123
8123
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8124
8124
|
});
|
|
8125
|
-
var DialogDropdownListItem = newStyled.li(templateObject_4$
|
|
8125
|
+
var DialogDropdownListItem = newStyled.li(templateObject_4$I || (templateObject_4$I = __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"])));
|
|
8126
8126
|
var DialogDropdownLink = newStyled.a(templateObject_5$z || (templateObject_5$z = __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"])));
|
|
8127
8127
|
var DropdownDialog = function (_a) {
|
|
8128
8128
|
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;
|
|
@@ -8132,7 +8132,7 @@ var DropdownDialog = function (_a) {
|
|
|
8132
8132
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8133
8133
|
}) }), void 0) }), void 0));
|
|
8134
8134
|
};
|
|
8135
|
-
var templateObject_1$
|
|
8135
|
+
var templateObject_1$1n, templateObject_2$13, templateObject_3$V, templateObject_4$I, templateObject_5$z;
|
|
8136
8136
|
|
|
8137
8137
|
function FilteringDropdown(_a) {
|
|
8138
8138
|
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;
|
|
@@ -8165,29 +8165,29 @@ function FilteringDropdown(_a) {
|
|
|
8165
8165
|
}) }, void 0)] }), void 0));
|
|
8166
8166
|
}
|
|
8167
8167
|
|
|
8168
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
8169
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
8170
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
8171
|
-
var Container
|
|
8168
|
+
var Title$4 = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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; });
|
|
8169
|
+
var P$3 = newStyled.p(templateObject_2$12 || (templateObject_2$12 = __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; });
|
|
8170
|
+
var ArrowContainer = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
8171
|
+
var Container$$ = newStyled.div(templateObject_4$H || (templateObject_4$H = __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'); });
|
|
8172
8172
|
var Accordion = function (_a) {
|
|
8173
8173
|
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;
|
|
8174
8174
|
var theme = useTheme();
|
|
8175
8175
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8176
|
-
return (jsxs$1(Container
|
|
8176
|
+
return (jsxs$1(Container$$, __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));
|
|
8177
8177
|
};
|
|
8178
|
-
var templateObject_1$
|
|
8178
|
+
var templateObject_1$1m, templateObject_2$12, templateObject_3$U, templateObject_4$H;
|
|
8179
8179
|
|
|
8180
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
8181
|
-
var Header$3 = newStyled.div(templateObject_2$
|
|
8182
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
8183
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
8180
|
+
var SectionContent = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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; });
|
|
8181
|
+
var Header$3 = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
8182
|
+
var MobileHeader = newStyled.div(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
8183
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$G || (templateObject_4$G = __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"])));
|
|
8184
8184
|
var H4 = newStyled.h4(templateObject_5$y || (templateObject_5$y = __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; });
|
|
8185
8185
|
var FilterLink = newStyled.a(templateObject_6$u || (templateObject_6$u = __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; });
|
|
8186
8186
|
var OptionContainer = newStyled.div(templateObject_7$r || (templateObject_7$r = __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'); });
|
|
8187
8187
|
var ClearAll = newStyled.span(templateObject_8$k || (templateObject_8$k = __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; });
|
|
8188
8188
|
var MobileFooter = newStyled.div(templateObject_9$c || (templateObject_9$c = __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"])));
|
|
8189
8189
|
var MobileClearContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __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"])));
|
|
8190
|
-
var templateObject_1$
|
|
8190
|
+
var templateObject_1$1l, templateObject_2$11, templateObject_3$T, templateObject_4$G, templateObject_5$y, templateObject_6$u, templateObject_7$r, templateObject_8$k, templateObject_9$c, templateObject_10$b;
|
|
8191
8191
|
|
|
8192
8192
|
var getStylesBySize$9 = function (size, theme) {
|
|
8193
8193
|
switch (size) {
|
|
@@ -8252,9 +8252,9 @@ var SelectorSecondary = function (_a) {
|
|
|
8252
8252
|
} }), id: id }, void 0));
|
|
8253
8253
|
};
|
|
8254
8254
|
|
|
8255
|
-
var UL = newStyled.ul(templateObject_1$
|
|
8256
|
-
var LI = newStyled.li(templateObject_2
|
|
8257
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
8255
|
+
var UL = newStyled.ul(templateObject_1$1k || (templateObject_1$1k = __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"])));
|
|
8256
|
+
var LI = newStyled.li(templateObject_2$10 || (templateObject_2$10 = __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; });
|
|
8257
|
+
var CloseIconContainer = newStyled.div(templateObject_3$S || (templateObject_3$S = __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"])));
|
|
8258
8258
|
var Tags = function (_a) {
|
|
8259
8259
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
8260
8260
|
var theme = useTheme();
|
|
@@ -8262,7 +8262,7 @@ var Tags = function (_a) {
|
|
|
8262
8262
|
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));
|
|
8263
8263
|
}) }), void 0));
|
|
8264
8264
|
};
|
|
8265
|
-
var templateObject_1$
|
|
8265
|
+
var templateObject_1$1k, templateObject_2$10, templateObject_3$S;
|
|
8266
8266
|
|
|
8267
8267
|
var Filters = function (_a) {
|
|
8268
8268
|
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;
|
|
@@ -8398,8 +8398,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8398
8398
|
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));
|
|
8399
8399
|
};
|
|
8400
8400
|
|
|
8401
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
8402
|
-
var Container$
|
|
8401
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
8402
|
+
var Container$_ = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __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"])));
|
|
8403
8403
|
var FitGuarantee = function (_a) {
|
|
8404
8404
|
var _b;
|
|
8405
8405
|
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;
|
|
@@ -8410,17 +8410,17 @@ var FitGuarantee = function (_a) {
|
|
|
8410
8410
|
console.error('Icon', iconName, 'not found');
|
|
8411
8411
|
return null;
|
|
8412
8412
|
}
|
|
8413
|
-
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$
|
|
8413
|
+
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$_, __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$_, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
8414
8414
|
margin: '0.1rem 0',
|
|
8415
8415
|
width: '100%',
|
|
8416
8416
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
8417
8417
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8418
8418
|
} }, { 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));
|
|
8419
8419
|
};
|
|
8420
|
-
var templateObject_1$
|
|
8420
|
+
var templateObject_1$1j, templateObject_2$$;
|
|
8421
8421
|
|
|
8422
|
-
var Container$
|
|
8423
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
8422
|
+
var Container$Z = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __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"])));
|
|
8423
|
+
var P$2 = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __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; });
|
|
8424
8424
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8425
8425
|
border: 'none',
|
|
8426
8426
|
background: 'transparent',
|
|
@@ -8433,9 +8433,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
8433
8433
|
var FitPredictor = function (_a) {
|
|
8434
8434
|
var onClick = _a.onClick;
|
|
8435
8435
|
var theme = useTheme();
|
|
8436
|
-
return (jsxs(Container$
|
|
8436
|
+
return (jsxs(Container$Z, __assign$1({ theme: theme }, { children: [jsx(Container$Z, { 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));
|
|
8437
8437
|
};
|
|
8438
|
-
var templateObject_1$
|
|
8438
|
+
var templateObject_1$1i, templateObject_2$_;
|
|
8439
8439
|
|
|
8440
8440
|
var Button$8 = newStyled.button(function () { return ({
|
|
8441
8441
|
background: 'transparent',
|
|
@@ -12679,14 +12679,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12679
12679
|
return Slider;
|
|
12680
12680
|
}(React__default.Component);
|
|
12681
12681
|
|
|
12682
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12682
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1h || (templateObject_1$1h = __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) {
|
|
12683
12683
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12684
12684
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12685
12685
|
}, function (_a) {
|
|
12686
12686
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12687
12687
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12688
12688
|
});
|
|
12689
|
-
var templateObject_1$
|
|
12689
|
+
var templateObject_1$1h;
|
|
12690
12690
|
|
|
12691
12691
|
var getStylesBySize$8 = function (size) {
|
|
12692
12692
|
// rem units
|
|
@@ -12745,7 +12745,7 @@ var SliderNavigation = function (_a) {
|
|
|
12745
12745
|
} }, { 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));
|
|
12746
12746
|
};
|
|
12747
12747
|
|
|
12748
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12748
|
+
var Image$1 = newStyled.img(templateObject_1$1g || (templateObject_1$1g = __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) {
|
|
12749
12749
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12750
12750
|
return borderRadiusVariant &&
|
|
12751
12751
|
"\n border-radius: 20px;\n ";
|
|
@@ -12763,7 +12763,7 @@ var Image$1 = newStyled.img(templateObject_1$1f || (templateObject_1$1f = __make
|
|
|
12763
12763
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12764
12764
|
: 'inherit';
|
|
12765
12765
|
});
|
|
12766
|
-
var templateObject_1$
|
|
12766
|
+
var templateObject_1$1g;
|
|
12767
12767
|
|
|
12768
12768
|
var ImageSmallPreview = function (_a) {
|
|
12769
12769
|
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;
|
|
@@ -12771,9 +12771,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12771
12771
|
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));
|
|
12772
12772
|
};
|
|
12773
12773
|
|
|
12774
|
-
var horizontalStyles = css(templateObject_1$
|
|
12775
|
-
var verticalStyles = css(templateObject_2$
|
|
12776
|
-
var Container$
|
|
12774
|
+
var horizontalStyles = css(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
12775
|
+
var verticalStyles = css(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
12776
|
+
var Container$Y = newStyled.div(templateObject_3$R || (templateObject_3$R = __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) {
|
|
12777
12777
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12778
12778
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12779
12779
|
}, function (_a) {
|
|
@@ -12784,12 +12784,12 @@ var Container$X = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __ma
|
|
|
12784
12784
|
return hasOverflowArrows &&
|
|
12785
12785
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12786
12786
|
});
|
|
12787
|
-
var Button$7 = newStyled.button(templateObject_4$
|
|
12787
|
+
var Button$7 = newStyled.button(templateObject_4$F || (templateObject_4$F = __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"])));
|
|
12788
12788
|
var ArrowsContainer = newStyled.div(templateObject_5$x || (templateObject_5$x = __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"])));
|
|
12789
12789
|
var ArrowBaseStyles = newStyled.div(templateObject_6$t || (templateObject_6$t = __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"])));
|
|
12790
12790
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$q || (templateObject_7$q = __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"])));
|
|
12791
12791
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$j || (templateObject_8$j = __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"])));
|
|
12792
|
-
var templateObject_1$
|
|
12792
|
+
var templateObject_1$1f, templateObject_2$Z, templateObject_3$R, templateObject_4$F, templateObject_5$x, templateObject_6$t, templateObject_7$q, templateObject_8$j;
|
|
12793
12793
|
|
|
12794
12794
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12795
12795
|
var loading = 'eager';
|
|
@@ -12817,7 +12817,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12817
12817
|
var element = document.querySelector(".imageListContainer");
|
|
12818
12818
|
element.scrollBy(0, 200);
|
|
12819
12819
|
};
|
|
12820
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
12820
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$Y, __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: {
|
|
12821
12821
|
arrowWidth: 0.75,
|
|
12822
12822
|
arrowHeight: 1.25,
|
|
12823
12823
|
arrowPadding: 1.625,
|
|
@@ -14417,22 +14417,22 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14417
14417
|
afterZoomOut: PropTypes.func
|
|
14418
14418
|
} : {};
|
|
14419
14419
|
|
|
14420
|
-
var Container$
|
|
14420
|
+
var Container$X = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
14421
14421
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14422
14422
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14423
14423
|
});
|
|
14424
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
14424
|
+
var TopTagContainer$7 = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
14425
14425
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14426
14426
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
14427
14427
|
}, function (_a) {
|
|
14428
14428
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14429
14429
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
14430
14430
|
});
|
|
14431
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
14431
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
14432
14432
|
var isCTAHidden = _a.isCTAHidden;
|
|
14433
14433
|
return (isCTAHidden ? '60px' : '120px');
|
|
14434
14434
|
});
|
|
14435
|
-
var TopRightTagWrapper = newStyled.div(templateObject_4$
|
|
14435
|
+
var TopRightTagWrapper = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14436
14436
|
var TopRightTagContainer$2 = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14437
14437
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$s || (templateObject_6$s = __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"])));
|
|
14438
14438
|
var ImageStyled = newStyled(Image$3)(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
@@ -14443,14 +14443,14 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$i || (temp
|
|
|
14443
14443
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14444
14444
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14445
14445
|
});
|
|
14446
|
-
var templateObject_1$
|
|
14446
|
+
var templateObject_1$1e, templateObject_2$Y, templateObject_3$Q, templateObject_4$E, templateObject_5$w, templateObject_6$s, templateObject_7$p, templateObject_8$i;
|
|
14447
14447
|
|
|
14448
14448
|
var ImageProductSlide$1 = function (_a) {
|
|
14449
14449
|
var _b;
|
|
14450
14450
|
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;
|
|
14451
14451
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14452
14452
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
14453
|
-
return (jsxs$1(Container$
|
|
14453
|
+
return (jsxs$1(Container$X, __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: {
|
|
14454
14454
|
alt: content.alt,
|
|
14455
14455
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
14456
14456
|
loading: 'eager',
|
|
@@ -14458,8 +14458,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14458
14458
|
}, 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));
|
|
14459
14459
|
};
|
|
14460
14460
|
|
|
14461
|
-
var Container$
|
|
14462
|
-
var templateObject_1$
|
|
14461
|
+
var Container$W = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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"])));
|
|
14462
|
+
var templateObject_1$1d;
|
|
14463
14463
|
|
|
14464
14464
|
var getInitialIndex = function (images, selectedValue) {
|
|
14465
14465
|
if (selectedValue) {
|
|
@@ -14485,10 +14485,10 @@ var ProductGallery = function (_a) {
|
|
|
14485
14485
|
setActiveIndex(index);
|
|
14486
14486
|
};
|
|
14487
14487
|
var selectedImage = images[activeIndex];
|
|
14488
|
-
return (jsxs$1(Container$
|
|
14488
|
+
return (jsxs$1(Container$W, { 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));
|
|
14489
14489
|
};
|
|
14490
14490
|
|
|
14491
|
-
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$
|
|
14491
|
+
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$1c || (templateObject_1$1c = __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; });
|
|
14492
14492
|
var AmazonButton = function (_a) {
|
|
14493
14493
|
var onClick = _a.onClick;
|
|
14494
14494
|
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));
|
|
@@ -14497,9 +14497,9 @@ var PaypalButton = function (_a) {
|
|
|
14497
14497
|
var onClick = _a.onClick;
|
|
14498
14498
|
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));
|
|
14499
14499
|
};
|
|
14500
|
-
var templateObject_1$
|
|
14500
|
+
var templateObject_1$1c;
|
|
14501
14501
|
|
|
14502
|
-
var Container$
|
|
14502
|
+
var Container$V = newStyled.div(function (props) { return ({
|
|
14503
14503
|
height: 'auto',
|
|
14504
14504
|
textAlign: 'center',
|
|
14505
14505
|
justifyContent: 'center',
|
|
@@ -14549,12 +14549,12 @@ var IconsWithTitle = function (_a) {
|
|
|
14549
14549
|
textAlign: 'center',
|
|
14550
14550
|
lineHeight: '18px',
|
|
14551
14551
|
};
|
|
14552
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
14552
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$V, __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));
|
|
14553
14553
|
};
|
|
14554
14554
|
|
|
14555
|
-
var Container$
|
|
14556
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14557
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14555
|
+
var Container$U = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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'); });
|
|
14556
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$X || (templateObject_2$X = __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'); });
|
|
14557
|
+
var StyledTitle = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14558
14558
|
var titlePosition = _a.titlePosition;
|
|
14559
14559
|
return titlePosition == 'center' &&
|
|
14560
14560
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14562,15 +14562,15 @@ var StyledTitle = newStyled.div(templateObject_3$O || (templateObject_3$O = __ma
|
|
|
14562
14562
|
var ImageCardWithDescription = function (_a) {
|
|
14563
14563
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14564
14564
|
var isMobile = useWindowDimensions().isMobile;
|
|
14565
|
-
return (jsxs$1(Container$
|
|
14565
|
+
return (jsxs$1(Container$U, __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));
|
|
14566
14566
|
};
|
|
14567
|
-
var templateObject_1$
|
|
14567
|
+
var templateObject_1$1b, templateObject_2$X, templateObject_3$P;
|
|
14568
14568
|
|
|
14569
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14569
|
+
var Label$4 = newStyled.span(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
14570
14570
|
var color = _a.color;
|
|
14571
14571
|
return color;
|
|
14572
14572
|
});
|
|
14573
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14573
|
+
var MandatoryIcon = newStyled.span(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14574
14574
|
var color = _a.color;
|
|
14575
14575
|
return color;
|
|
14576
14576
|
});
|
|
@@ -14579,7 +14579,7 @@ var InputLabel = function (_a) {
|
|
|
14579
14579
|
var theme = useTheme();
|
|
14580
14580
|
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));
|
|
14581
14581
|
};
|
|
14582
|
-
var templateObject_1$
|
|
14582
|
+
var templateObject_1$1a, templateObject_2$W;
|
|
14583
14583
|
|
|
14584
14584
|
var containerByStatus = function (theme, status) {
|
|
14585
14585
|
if (status === InputValidationType.Valid)
|
|
@@ -14588,12 +14588,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14588
14588
|
return theme.colors.semantic.urgent.color;
|
|
14589
14589
|
return '';
|
|
14590
14590
|
};
|
|
14591
|
-
var Container$
|
|
14591
|
+
var Container$T = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14592
14592
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14593
14593
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14594
14594
|
});
|
|
14595
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14596
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14595
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$V || (templateObject_2$V = __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"])));
|
|
14596
|
+
var StyledInput = newStyled.input(templateObject_3$O || (templateObject_3$O = __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) {
|
|
14597
14597
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14598
14598
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14599
14599
|
}, function (_a) {
|
|
@@ -14648,7 +14648,7 @@ var StyledInput = newStyled.input(templateObject_3$N || (templateObject_3$N = __
|
|
|
14648
14648
|
return hasValue &&
|
|
14649
14649
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14650
14650
|
});
|
|
14651
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14651
|
+
var InputWrapper = newStyled.div(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14652
14652
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14653
14653
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14654
14654
|
});
|
|
@@ -14666,7 +14666,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$v || (templateObject_5
|
|
|
14666
14666
|
return theme.component.input.lineHeight;
|
|
14667
14667
|
});
|
|
14668
14668
|
var ClearInput = newStyled.div(templateObject_6$r || (templateObject_6$r = __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"])));
|
|
14669
|
-
var templateObject_1$
|
|
14669
|
+
var templateObject_1$19, templateObject_2$V, templateObject_3$O, templateObject_4$D, templateObject_5$v, templateObject_6$r;
|
|
14670
14670
|
|
|
14671
14671
|
var BaseInput = function (_a) {
|
|
14672
14672
|
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"]);
|
|
@@ -14690,7 +14690,7 @@ var BaseInput = function (_a) {
|
|
|
14690
14690
|
}, [status]);
|
|
14691
14691
|
var hasValue = Boolean(value);
|
|
14692
14692
|
var errorMessage = customErrorMessage || (status === InputValidationType.Error && required);
|
|
14693
|
-
return (jsxs$1(Container$
|
|
14693
|
+
return (jsxs$1(Container$T, __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) {
|
|
14694
14694
|
onChange(event.target.value, event);
|
|
14695
14695
|
}, 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 () {
|
|
14696
14696
|
onChange('', { target: { value: '' } });
|
|
@@ -14711,11 +14711,11 @@ var Button$6 = function (_a) {
|
|
|
14711
14711
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14712
14712
|
};
|
|
14713
14713
|
|
|
14714
|
-
var Container$
|
|
14714
|
+
var Container$S = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
14715
14715
|
var theme = _a.theme;
|
|
14716
14716
|
return theme.component.inputCustom.input.borderRadius;
|
|
14717
14717
|
});
|
|
14718
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14718
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$U || (templateObject_2$U = __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) {
|
|
14719
14719
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14720
14720
|
return defaultRounded
|
|
14721
14721
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14730,23 +14730,23 @@ var Custom = function (_a) {
|
|
|
14730
14730
|
text: text,
|
|
14731
14731
|
disabled: rest.disabled,
|
|
14732
14732
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14733
|
-
return (jsx$1(Container$
|
|
14733
|
+
return (jsx$1(Container$S, __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));
|
|
14734
14734
|
};
|
|
14735
|
-
var templateObject_1$
|
|
14735
|
+
var templateObject_1$18, templateObject_2$U;
|
|
14736
14736
|
|
|
14737
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14737
|
+
var SuccessContainer = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14738
14738
|
var size = _a.size;
|
|
14739
14739
|
return (size === 'small' ? '36px' : '');
|
|
14740
14740
|
});
|
|
14741
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14742
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14741
|
+
var SuccessMessage = newStyled.div(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
14742
|
+
var SuccessText = newStyled.span(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
14743
14743
|
var Success = function (_a) {
|
|
14744
14744
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14745
14745
|
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));
|
|
14746
14746
|
};
|
|
14747
|
-
var templateObject_1$
|
|
14747
|
+
var templateObject_1$17, templateObject_2$T, templateObject_3$N;
|
|
14748
14748
|
|
|
14749
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14749
|
+
var ButtonContainer = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
14750
14750
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14751
14751
|
return status === InputValidationType.Empty &&
|
|
14752
14752
|
type === 'primary' &&
|
|
@@ -14763,16 +14763,16 @@ var BasePlusButton = function (_a) {
|
|
|
14763
14763
|
}
|
|
14764
14764
|
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));
|
|
14765
14765
|
};
|
|
14766
|
-
var templateObject_1$
|
|
14766
|
+
var templateObject_1$16;
|
|
14767
14767
|
|
|
14768
|
-
var Container$
|
|
14769
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14768
|
+
var Container$R = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14769
|
+
var IconContainer$3 = newStyled.div(templateObject_2$S || (templateObject_2$S = __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"])));
|
|
14770
14770
|
var BasePlusIcon = function (_a) {
|
|
14771
14771
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14772
14772
|
var theme = useTheme();
|
|
14773
|
-
return (jsx$1(Container$
|
|
14773
|
+
return (jsx$1(Container$R, { 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));
|
|
14774
14774
|
};
|
|
14775
|
-
var templateObject_1$
|
|
14775
|
+
var templateObject_1$15, templateObject_2$S;
|
|
14776
14776
|
|
|
14777
14777
|
var Input$3 = {
|
|
14778
14778
|
Simple: BaseInput,
|
|
@@ -14912,14 +14912,14 @@ var Portal = function (_a) {
|
|
|
14912
14912
|
var visibleStyle = function (_a) {
|
|
14913
14913
|
var opened = _a.opened;
|
|
14914
14914
|
return opened
|
|
14915
|
-
? css(templateObject_1$
|
|
14915
|
+
? css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14916
14916
|
};
|
|
14917
14917
|
var transformStyle = function (_a) {
|
|
14918
14918
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14919
14919
|
return opened
|
|
14920
|
-
? css(templateObject_3$
|
|
14920
|
+
? css(templateObject_3$M || (templateObject_3$M = __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$C || (templateObject_4$C = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14921
14921
|
};
|
|
14922
|
-
var Container$
|
|
14922
|
+
var Container$Q = newStyled.div(templateObject_6$q || (templateObject_6$q = __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) {
|
|
14923
14923
|
var width = _a.width;
|
|
14924
14924
|
return width
|
|
14925
14925
|
? css(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
@@ -14936,7 +14936,7 @@ var Modal = function (_a) {
|
|
|
14936
14936
|
}
|
|
14937
14937
|
close();
|
|
14938
14938
|
};
|
|
14939
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14939
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$Q, __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 () {
|
|
14940
14940
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14941
14941
|
onDismiss();
|
|
14942
14942
|
} }, void 0)] }), void 0));
|
|
@@ -14967,7 +14967,7 @@ var useModal = function (id) {
|
|
|
14967
14967
|
close: close,
|
|
14968
14968
|
}); }, [close, open, opened]);
|
|
14969
14969
|
};
|
|
14970
|
-
var templateObject_1$
|
|
14970
|
+
var templateObject_1$14, templateObject_2$R, templateObject_3$M, templateObject_4$C, templateObject_5$u, templateObject_6$q, templateObject_7$o;
|
|
14971
14971
|
|
|
14972
14972
|
var htmlReactParser = {exports: {}};
|
|
14973
14973
|
|
|
@@ -18748,7 +18748,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18748
18748
|
HTMLReactParser$1.attributesToProps;
|
|
18749
18749
|
HTMLReactParser$1.Element;
|
|
18750
18750
|
|
|
18751
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
18751
|
+
var Bar$1 = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
18752
18752
|
var height = _a.height;
|
|
18753
18753
|
return height || '0.5rem';
|
|
18754
18754
|
}, function (_a) {
|
|
@@ -18787,7 +18787,7 @@ var BarContainer = newStyled.div({
|
|
|
18787
18787
|
padding: '0 16px',
|
|
18788
18788
|
position: 'relative',
|
|
18789
18789
|
});
|
|
18790
|
-
var Container$
|
|
18790
|
+
var Container$P = newStyled.div(function (_a) {
|
|
18791
18791
|
var backgroundColor = _a.backgroundColor;
|
|
18792
18792
|
return ({
|
|
18793
18793
|
width: '475px',
|
|
@@ -18800,7 +18800,7 @@ var Container$O = newStyled.div(function (_a) {
|
|
|
18800
18800
|
background: backgroundColor,
|
|
18801
18801
|
});
|
|
18802
18802
|
});
|
|
18803
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18803
|
+
var MessageContainer = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18804
18804
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18805
18805
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18806
18806
|
};
|
|
@@ -18829,33 +18829,33 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18829
18829
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18830
18830
|
return (jsx$1(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18831
18831
|
};
|
|
18832
|
-
return (jsxs$1(Container$
|
|
18832
|
+
return (jsxs$1(Container$P, __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));
|
|
18833
18833
|
};
|
|
18834
|
-
var templateObject_1$
|
|
18834
|
+
var templateObject_1$13, templateObject_2$Q;
|
|
18835
18835
|
|
|
18836
|
-
var Container$
|
|
18836
|
+
var Container$O = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
18837
18837
|
var theme = _a.theme;
|
|
18838
18838
|
return theme.component.orderBar.backgroundColor;
|
|
18839
18839
|
});
|
|
18840
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18840
|
+
var H1 = newStyled.h1(templateObject_2$P || (templateObject_2$P = __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; });
|
|
18841
18841
|
var OrderBar = function (_a) {
|
|
18842
18842
|
var message = _a.message, color = _a.color;
|
|
18843
18843
|
var theme = useTheme();
|
|
18844
|
-
return (jsxs$1(Container$
|
|
18844
|
+
return (jsxs$1(Container$O, __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));
|
|
18845
18845
|
};
|
|
18846
|
-
var templateObject_1$
|
|
18846
|
+
var templateObject_1$12, templateObject_2$P;
|
|
18847
18847
|
|
|
18848
|
-
var Container$
|
|
18849
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18850
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18851
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18848
|
+
var Container$N = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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"])));
|
|
18849
|
+
var Card$1 = newStyled.div(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
18850
|
+
var Tag$1 = newStyled.div(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
18851
|
+
var Label$3 = newStyled.div(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
18852
18852
|
var Check = newStyled.div(templateObject_5$t || (templateObject_5$t = __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"])));
|
|
18853
18853
|
var IconContainer$2 = newStyled.div(templateObject_6$p || (templateObject_6$p = __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"])));
|
|
18854
18854
|
var IconPlaceholder = newStyled.div(templateObject_7$n || (templateObject_7$n = __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"])));
|
|
18855
18855
|
var DiscountContainer = newStyled.div(templateObject_8$h || (templateObject_8$h = __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"])));
|
|
18856
18856
|
var PackSelector = function (_a) {
|
|
18857
18857
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18858
|
-
return (jsx$1(Container$
|
|
18858
|
+
return (jsx$1(Container$N, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18859
18859
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18860
18860
|
}) }), void 0));
|
|
18861
18861
|
};
|
|
@@ -18882,14 +18882,14 @@ var PackCard = function (_a) {
|
|
|
18882
18882
|
currency: currencyCode || 'USD',
|
|
18883
18883
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18884
18884
|
};
|
|
18885
|
-
var templateObject_1$
|
|
18885
|
+
var templateObject_1$11, templateObject_2$O, templateObject_3$L, templateObject_4$B, templateObject_5$t, templateObject_6$p, templateObject_7$n, templateObject_8$h;
|
|
18886
18886
|
|
|
18887
|
-
var Container$
|
|
18888
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18889
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18887
|
+
var Container$M = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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"])));
|
|
18888
|
+
var IconContainer$1 = newStyled.div(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
18889
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18890
18890
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18891
18891
|
}));
|
|
18892
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18892
|
+
var PageNumber = newStyled.span(templateObject_4$A || (templateObject_4$A = __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) {
|
|
18893
18893
|
var bold = _a.bold;
|
|
18894
18894
|
return (bold ? '700' : '500');
|
|
18895
18895
|
}, function (_a) {
|
|
@@ -18906,7 +18906,7 @@ var PageNumber = newStyled.span(templateObject_4$z || (templateObject_4$z = __ma
|
|
|
18906
18906
|
var background = _a.background;
|
|
18907
18907
|
return background || 'unset';
|
|
18908
18908
|
});
|
|
18909
|
-
var templateObject_1
|
|
18909
|
+
var templateObject_1$10, templateObject_2$N, templateObject_3$K, templateObject_4$A;
|
|
18910
18910
|
|
|
18911
18911
|
var Pagination = function (_a) {
|
|
18912
18912
|
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;
|
|
@@ -18952,7 +18952,7 @@ var Pagination = function (_a) {
|
|
|
18952
18952
|
}
|
|
18953
18953
|
return pages;
|
|
18954
18954
|
}, [from, page, showReducedPages, to]);
|
|
18955
|
-
return (jsxs$1(Container$
|
|
18955
|
+
return (jsxs$1(Container$M, __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));
|
|
18956
18956
|
};
|
|
18957
18957
|
|
|
18958
18958
|
var PaginatorBlog = function (_a) {
|
|
@@ -18966,12 +18966,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18966
18966
|
setPage(page);
|
|
18967
18967
|
onChange(page);
|
|
18968
18968
|
};
|
|
18969
|
-
return (jsxs$1(Container$
|
|
18969
|
+
return (jsxs$1(Container$M, __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
|
|
18970
18970
|
? theme.colors.shades['white'].color
|
|
18971
18971
|
: 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));
|
|
18972
18972
|
};
|
|
18973
18973
|
|
|
18974
|
-
var Container$
|
|
18974
|
+
var Container$L = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
18975
18975
|
var width = _a.width;
|
|
18976
18976
|
return width;
|
|
18977
18977
|
}, function (_a) {
|
|
@@ -18987,14 +18987,14 @@ var Container$K = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __ma
|
|
|
18987
18987
|
var PaymentMethod = function (_a) {
|
|
18988
18988
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18989
18989
|
var theme = useTheme();
|
|
18990
|
-
return (jsx$1(Container$
|
|
18990
|
+
return (jsx$1(Container$L, __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));
|
|
18991
18991
|
};
|
|
18992
|
-
var templateObject_1
|
|
18992
|
+
var templateObject_1$$;
|
|
18993
18993
|
|
|
18994
|
-
var Container$
|
|
18994
|
+
var Container$K = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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"])));
|
|
18995
18995
|
var IMAGE_WIDTH = '63px';
|
|
18996
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18997
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18996
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$M || (templateObject_2$M = __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);
|
|
18997
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$J || (templateObject_3$J = __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({
|
|
18998
18998
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18999
18999
|
}), IMAGE_WIDTH);
|
|
19000
19000
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -19017,7 +19017,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
19017
19017
|
margin: margin,
|
|
19018
19018
|
});
|
|
19019
19019
|
});
|
|
19020
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
19020
|
+
var PriceContainer = newStyled.div(templateObject_4$z || (templateObject_4$z = __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) {
|
|
19021
19021
|
var withTag = _a.withTag; _a.theme;
|
|
19022
19022
|
return withTag
|
|
19023
19023
|
? mediaQueries({
|
|
@@ -19036,9 +19036,9 @@ var SimpleOrderItem = function (_a) {
|
|
|
19036
19036
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19037
19037
|
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;
|
|
19038
19038
|
var theme = useTheme();
|
|
19039
|
-
return (jsxs$1(Container$
|
|
19039
|
+
return (jsxs$1(Container$K, __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));
|
|
19040
19040
|
};
|
|
19041
|
-
var templateObject_1$
|
|
19041
|
+
var templateObject_1$_, templateObject_2$M, templateObject_3$J, templateObject_4$z, templateObject_5$s, templateObject_6$o, templateObject_7$m;
|
|
19042
19042
|
|
|
19043
19043
|
var P$1 = newStyled.p(function (_a) {
|
|
19044
19044
|
var color = _a.color;
|
|
@@ -19052,7 +19052,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
19052
19052
|
margin: '0.938rem 4.188rem',
|
|
19053
19053
|
});
|
|
19054
19054
|
});
|
|
19055
|
-
var Bar = newStyled.div(templateObject_1$
|
|
19055
|
+
var Bar = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
19056
19056
|
var height = _a.height;
|
|
19057
19057
|
return height || '0.5rem';
|
|
19058
19058
|
}, function (_a) {
|
|
@@ -19081,7 +19081,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
19081
19081
|
position: 'absolute',
|
|
19082
19082
|
});
|
|
19083
19083
|
});
|
|
19084
|
-
var Container$
|
|
19084
|
+
var Container$J = newStyled.div(function (_a) {
|
|
19085
19085
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
19086
19086
|
return ({
|
|
19087
19087
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -19095,14 +19095,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
19095
19095
|
var ProgressBar = function (_a) {
|
|
19096
19096
|
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;
|
|
19097
19097
|
var theme = useTheme();
|
|
19098
|
-
return (jsxs$1(Container$
|
|
19098
|
+
return (jsxs$1(Container$J, __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));
|
|
19099
19099
|
};
|
|
19100
|
-
var templateObject_1$
|
|
19100
|
+
var templateObject_1$Z;
|
|
19101
19101
|
|
|
19102
|
-
var Container$
|
|
19103
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19104
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19105
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19102
|
+
var Container$I = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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; });
|
|
19103
|
+
var Item$1 = newStyled.span(templateObject_2$L || (templateObject_2$L = __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"])));
|
|
19104
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
19105
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$y || (templateObject_4$y = __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)'; });
|
|
19106
19106
|
var QuantityPicker = function (_a) {
|
|
19107
19107
|
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;
|
|
19108
19108
|
var theme = useTheme();
|
|
@@ -19125,9 +19125,9 @@ var QuantityPicker = function (_a) {
|
|
|
19125
19125
|
return clamp(value);
|
|
19126
19126
|
});
|
|
19127
19127
|
}, [value, clamp]);
|
|
19128
|
-
return (jsxs$1(Container$
|
|
19128
|
+
return (jsxs$1(Container$I, __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));
|
|
19129
19129
|
};
|
|
19130
|
-
var templateObject_1$
|
|
19130
|
+
var templateObject_1$Y, templateObject_2$L, templateObject_3$I, templateObject_4$y;
|
|
19131
19131
|
|
|
19132
19132
|
/* base styles & size variants */
|
|
19133
19133
|
var CustomRadioStyles$1 = {
|
|
@@ -19196,9 +19196,9 @@ var ContainerStyles$1 = {
|
|
|
19196
19196
|
},
|
|
19197
19197
|
};
|
|
19198
19198
|
|
|
19199
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19200
|
-
var Container$
|
|
19201
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19199
|
+
var Wrapper$3 = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19200
|
+
var Container$H = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19201
|
+
var Input$2 = newStyled.input(templateObject_2$K || (templateObject_2$K = __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) {
|
|
19202
19202
|
var disabled = _a.disabled;
|
|
19203
19203
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19204
19204
|
});
|
|
@@ -19206,7 +19206,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19206
19206
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19207
19207
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19208
19208
|
]; });
|
|
19209
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19209
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
19210
19210
|
var RadioPrimary = function (_a) {
|
|
19211
19211
|
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;
|
|
19212
19212
|
var theme = useTheme();
|
|
@@ -19214,9 +19214,9 @@ var RadioPrimary = function (_a) {
|
|
|
19214
19214
|
var value = event.currentTarget.value;
|
|
19215
19215
|
onChange({ value: value, label: label });
|
|
19216
19216
|
};
|
|
19217
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
19217
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$H, __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));
|
|
19218
19218
|
};
|
|
19219
|
-
var templateObject_1$
|
|
19219
|
+
var templateObject_1$X, templateObject_2$K, templateObject_3$H;
|
|
19220
19220
|
|
|
19221
19221
|
var RadioGroupInput = function (_a) {
|
|
19222
19222
|
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;
|
|
@@ -19295,9 +19295,9 @@ var ContainerStyles = {
|
|
|
19295
19295
|
},
|
|
19296
19296
|
};
|
|
19297
19297
|
|
|
19298
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19299
|
-
var Container$
|
|
19300
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19298
|
+
var Wrapper$2 = newStyled.div(templateObject_1$W || (templateObject_1$W = __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"])));
|
|
19299
|
+
var Container$G = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19300
|
+
var Input$1 = newStyled.input(templateObject_2$J || (templateObject_2$J = __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) {
|
|
19301
19301
|
var disabled = _a.disabled;
|
|
19302
19302
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19303
19303
|
});
|
|
@@ -19305,7 +19305,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19305
19305
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19306
19306
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19307
19307
|
]; });
|
|
19308
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19308
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19309
19309
|
var theme = _a.theme;
|
|
19310
19310
|
return theme.component.radio.textSize;
|
|
19311
19311
|
}, function (_a) {
|
|
@@ -19319,9 +19319,9 @@ var ClubRadioInput = function (_a) {
|
|
|
19319
19319
|
var value = event.currentTarget.value;
|
|
19320
19320
|
onChange({ value: value, label: label });
|
|
19321
19321
|
};
|
|
19322
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
19322
|
+
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$G, __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));
|
|
19323
19323
|
};
|
|
19324
|
-
var templateObject_1$
|
|
19324
|
+
var templateObject_1$W, templateObject_2$J, templateObject_3$G;
|
|
19325
19325
|
|
|
19326
19326
|
var ClubRadioGroupInput = function (_a) {
|
|
19327
19327
|
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;
|
|
@@ -19349,10 +19349,10 @@ function formatDate(date, format) {
|
|
|
19349
19349
|
}
|
|
19350
19350
|
}
|
|
19351
19351
|
|
|
19352
|
-
var Container$
|
|
19353
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19354
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19355
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19352
|
+
var Container$F = newStyled.div(templateObject_1$V || (templateObject_1$V = __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"])));
|
|
19353
|
+
var Content$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
19354
|
+
var StarsContent = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19355
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
19356
19356
|
var DateText$1 = newStyled.span(templateObject_5$r || (templateObject_5$r = __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"])));
|
|
19357
19357
|
var ReviewerName$1 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
19358
19358
|
var VerifiedText = newStyled.h1(templateObject_7$l || (templateObject_7$l = __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"])));
|
|
@@ -19387,17 +19387,17 @@ var Review$1 = function (_a) {
|
|
|
19387
19387
|
}
|
|
19388
19388
|
}
|
|
19389
19389
|
}, [opened]);
|
|
19390
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
19390
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$F, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19391
19391
|
(!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));
|
|
19392
19392
|
};
|
|
19393
|
-
var templateObject_1$
|
|
19393
|
+
var templateObject_1$V, templateObject_2$I, templateObject_3$F, templateObject_4$x, templateObject_5$r, templateObject_6$n, templateObject_7$l, templateObject_8$g, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$3, 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;
|
|
19394
19394
|
|
|
19395
19395
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19396
19396
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19397
|
-
var Container$
|
|
19398
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19399
|
-
var Content = newStyled.div(templateObject_3$
|
|
19400
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19397
|
+
var Container$E = newStyled.div(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
19398
|
+
var Heading = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
19399
|
+
var Content = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19400
|
+
var ReviewContainer = newStyled.div(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19401
19401
|
var DateText = newStyled.span(templateObject_5$q || (templateObject_5$q = __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"])));
|
|
19402
19402
|
var VariantText = newStyled.div(templateObject_6$m || (templateObject_6$m = __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"])));
|
|
19403
19403
|
var ReviewerName = newStyled.h2(templateObject_7$k || (templateObject_7$k = __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"])));
|
|
@@ -19436,7 +19436,7 @@ var Review = function (_a) {
|
|
|
19436
19436
|
});
|
|
19437
19437
|
};
|
|
19438
19438
|
}, [randomId]);
|
|
19439
|
-
return (jsxs$1(Container$
|
|
19439
|
+
return (jsxs$1(Container$E, { 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: {
|
|
19440
19440
|
__html: showMoreMobile
|
|
19441
19441
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19442
19442
|
: description,
|
|
@@ -19446,12 +19446,12 @@ var Review = function (_a) {
|
|
|
19446
19446
|
: description,
|
|
19447
19447
|
} }, 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));
|
|
19448
19448
|
};
|
|
19449
|
-
var templateObject_1$
|
|
19449
|
+
var templateObject_1$U, templateObject_2$H, templateObject_3$E, templateObject_4$w, templateObject_5$q, templateObject_6$m, templateObject_7$k, templateObject_8$f, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$2, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19450
19450
|
|
|
19451
|
-
var Container$
|
|
19452
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19453
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19454
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19451
|
+
var Container$D = newStyled.div(templateObject_1$T || (templateObject_1$T = __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"])));
|
|
19452
|
+
var ReviewsContainer = newStyled.div(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
19453
|
+
var ReviewsCount = newStyled.div(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
19454
|
+
var ReviewsStars = newStyled.div(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
19455
19455
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$p || (templateObject_5$p = __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"])));
|
|
19456
19456
|
var ReviewsImages = newStyled.div(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
19457
19457
|
var SummaryItem = newStyled.div(templateObject_7$j || (templateObject_7$j = __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) {
|
|
@@ -19462,25 +19462,25 @@ var ReviewsHeader = function (_a) {
|
|
|
19462
19462
|
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;
|
|
19463
19463
|
var starsNumber = 5;
|
|
19464
19464
|
var theme = useTheme();
|
|
19465
|
-
return (jsxs$1(Container$
|
|
19465
|
+
return (jsxs$1(Container$D, { 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));
|
|
19466
19466
|
};
|
|
19467
|
-
var templateObject_1$
|
|
19467
|
+
var templateObject_1$T, templateObject_2$G, templateObject_3$D, templateObject_4$v, templateObject_5$p, templateObject_6$l, templateObject_7$j;
|
|
19468
19468
|
|
|
19469
|
-
var Container$
|
|
19470
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
19469
|
+
var Container$C = newStyled.div(templateObject_1$S || (templateObject_1$S = __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"])));
|
|
19470
|
+
var Text$1 = newStyled.p(templateObject_2$F || (templateObject_2$F = __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; });
|
|
19471
19471
|
var ScrollToTop = function (_a) {
|
|
19472
19472
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19473
19473
|
var theme = useTheme();
|
|
19474
19474
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19475
|
-
return (jsxs$1(Container$
|
|
19475
|
+
return (jsxs$1(Container$C, __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));
|
|
19476
19476
|
};
|
|
19477
|
-
var templateObject_1$
|
|
19477
|
+
var templateObject_1$S, templateObject_2$F;
|
|
19478
19478
|
|
|
19479
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19479
|
+
var Button$5 = newStyled.button(templateObject_1$R || (templateObject_1$R = __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({
|
|
19480
19480
|
right: ['1rem', '7.75rem'],
|
|
19481
19481
|
top: ['0.75rem', '0.75rem'],
|
|
19482
19482
|
}));
|
|
19483
|
-
var templateObject_1$
|
|
19483
|
+
var templateObject_1$R;
|
|
19484
19484
|
|
|
19485
19485
|
var ClearButton = function (_a) {
|
|
19486
19486
|
var onClick = _a.onClick;
|
|
@@ -19488,7 +19488,7 @@ var ClearButton = function (_a) {
|
|
|
19488
19488
|
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));
|
|
19489
19489
|
};
|
|
19490
19490
|
|
|
19491
|
-
var Container$
|
|
19491
|
+
var Container$B = newStyled.div({
|
|
19492
19492
|
display: 'flex',
|
|
19493
19493
|
justifyContent: 'center',
|
|
19494
19494
|
padding: '1rem',
|
|
@@ -19496,10 +19496,10 @@ var Container$A = newStyled.div({
|
|
|
19496
19496
|
|
|
19497
19497
|
var Footer = function (_a) {
|
|
19498
19498
|
var text = _a.text, onClick = _a.onClick;
|
|
19499
|
-
return (jsx$1(Container$
|
|
19499
|
+
return (jsx$1(Container$B, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19500
19500
|
};
|
|
19501
19501
|
|
|
19502
|
-
var Container$
|
|
19502
|
+
var Container$A = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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({
|
|
19503
19503
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19504
19504
|
}));
|
|
19505
19505
|
var Description = newStyled.div({
|
|
@@ -19513,20 +19513,20 @@ var Description = newStyled.div({
|
|
|
19513
19513
|
textAlign: 'start',
|
|
19514
19514
|
},
|
|
19515
19515
|
});
|
|
19516
|
-
var templateObject_1$
|
|
19516
|
+
var templateObject_1$Q;
|
|
19517
19517
|
|
|
19518
19518
|
var ProductItem = function (_a) {
|
|
19519
19519
|
var _b;
|
|
19520
19520
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19521
19521
|
var theme = useTheme();
|
|
19522
|
-
return (jsxs$1(Container$
|
|
19522
|
+
return (jsxs$1(Container$A, __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));
|
|
19523
19523
|
};
|
|
19524
19524
|
|
|
19525
19525
|
var OptionsList = newStyled.ul({
|
|
19526
19526
|
margin: '0px',
|
|
19527
19527
|
padding: '0px',
|
|
19528
19528
|
});
|
|
19529
|
-
var OptionItem = newStyled.li(templateObject_1$
|
|
19529
|
+
var OptionItem = newStyled.li(templateObject_1$P || (templateObject_1$P = __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({
|
|
19530
19530
|
padding: [0, '0rem 1rem'],
|
|
19531
19531
|
borderRadius: [0, '0.5rem'],
|
|
19532
19532
|
}));
|
|
@@ -19538,20 +19538,20 @@ var Anchor = newStyled.a({
|
|
|
19538
19538
|
padding: 0,
|
|
19539
19539
|
textDecoration: 'none',
|
|
19540
19540
|
});
|
|
19541
|
-
var Container$
|
|
19541
|
+
var Container$z = newStyled.div(templateObject_2$E || (templateObject_2$E = __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({
|
|
19542
19542
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19543
19543
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19544
19544
|
borderRadius: ['0', '0.5rem'],
|
|
19545
19545
|
}));
|
|
19546
|
-
var Header$2 = newStyled.div(templateObject_3$
|
|
19546
|
+
var Header$2 = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mediaQueries({
|
|
19547
19547
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19548
19548
|
}));
|
|
19549
|
-
var templateObject_1$
|
|
19549
|
+
var templateObject_1$P, templateObject_2$E, templateObject_3$C;
|
|
19550
19550
|
|
|
19551
19551
|
var ResultsPanel = function (_a) {
|
|
19552
19552
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19553
19553
|
var theme = useTheme();
|
|
19554
|
-
return (jsxs$1(Container$
|
|
19554
|
+
return (jsxs$1(Container$z, __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) {
|
|
19555
19555
|
var optionUrl = _a.optionUrl, price = _a.price, src = _a.src, title = _a.title;
|
|
19556
19556
|
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));
|
|
19557
19557
|
}) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
@@ -19565,8 +19565,8 @@ var SearchIconContainer = newStyled.div({
|
|
|
19565
19565
|
background: 'white',
|
|
19566
19566
|
alignSelf: 'center',
|
|
19567
19567
|
});
|
|
19568
|
-
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19569
|
-
var templateObject_1$
|
|
19568
|
+
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
19569
|
+
var templateObject_1$O;
|
|
19570
19570
|
|
|
19571
19571
|
var SearchControl = function (_a) {
|
|
19572
19572
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
@@ -19612,7 +19612,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19612
19612
|
},
|
|
19613
19613
|
},
|
|
19614
19614
|
}); });
|
|
19615
|
-
var Container$
|
|
19615
|
+
var Container$y = newStyled.div({
|
|
19616
19616
|
position: 'relative',
|
|
19617
19617
|
display: 'flex',
|
|
19618
19618
|
});
|
|
@@ -19667,7 +19667,7 @@ var SearchBar = function (_a) {
|
|
|
19667
19667
|
if (e.cancelable) {
|
|
19668
19668
|
e.preventDefault();
|
|
19669
19669
|
}
|
|
19670
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
19670
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$y, __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) {
|
|
19671
19671
|
if (e.key === 'Enter') {
|
|
19672
19672
|
if (e.cancelable) {
|
|
19673
19673
|
e.preventDefault();
|
|
@@ -19678,21 +19678,21 @@ var SearchBar = function (_a) {
|
|
|
19678
19678
|
} }, 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));
|
|
19679
19679
|
};
|
|
19680
19680
|
|
|
19681
|
-
var Container$
|
|
19682
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19683
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19684
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19681
|
+
var Container$x = newStyled.div(templateObject_1$N || (templateObject_1$N = __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"])));
|
|
19682
|
+
var BackArrow = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19683
|
+
var BoldSpan = newStyled.span(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
19684
|
+
var NormalSpan = newStyled.span(templateObject_4$u || (templateObject_4$u = __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"])));
|
|
19685
19685
|
var SearchNavigationParents = newStyled.div(templateObject_5$o || (templateObject_5$o = __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"])));
|
|
19686
|
-
var templateObject_1$
|
|
19686
|
+
var templateObject_1$N, templateObject_2$D, templateObject_3$B, templateObject_4$u, templateObject_5$o;
|
|
19687
19687
|
|
|
19688
19688
|
var SearchNavigation = function (_a) {
|
|
19689
19689
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19690
|
-
return (jsxs$1(Container$
|
|
19690
|
+
return (jsxs$1(Container$x, { 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) {
|
|
19691
19691
|
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));
|
|
19692
19692
|
}) }, void 0)] }, void 0));
|
|
19693
19693
|
};
|
|
19694
19694
|
|
|
19695
|
-
var Container$
|
|
19695
|
+
var Container$w = newStyled.div(templateObject_1$M || (templateObject_1$M = __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) {
|
|
19696
19696
|
var alignCenter = _a.alignCenter;
|
|
19697
19697
|
return alignCenter &&
|
|
19698
19698
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19702,26 +19702,26 @@ var Container$v = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
19702
19702
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19703
19703
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19704
19704
|
});
|
|
19705
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19706
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19705
|
+
var TitleText = newStyled.div(templateObject_2$C || (templateObject_2$C = __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"])));
|
|
19706
|
+
var BannerText = newStyled.div(templateObject_3$A || (templateObject_3$A = __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"])));
|
|
19707
19707
|
var ShortBanner = function (_a) {
|
|
19708
19708
|
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;
|
|
19709
19709
|
var theme = useTheme();
|
|
19710
|
-
return (jsxs$1(Container$
|
|
19710
|
+
return (jsxs$1(Container$w, __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));
|
|
19711
19711
|
};
|
|
19712
|
-
var templateObject_1$
|
|
19712
|
+
var templateObject_1$M, templateObject_2$C, templateObject_3$A;
|
|
19713
19713
|
|
|
19714
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19715
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19716
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19717
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19714
|
+
var TableElement$3 = newStyled.table(templateObject_1$L || (templateObject_1$L = __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; });
|
|
19715
|
+
var TableCell$3 = newStyled.td(templateObject_2$B || (templateObject_2$B = __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; });
|
|
19716
|
+
var TableHead$3 = newStyled.th(templateObject_3$z || (templateObject_3$z = __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; });
|
|
19717
|
+
var Label$2 = newStyled('div')(templateObject_4$t || (templateObject_4$t = __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"])));
|
|
19718
19718
|
var TopLabel$1 = newStyled(Label$2)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19719
19719
|
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19720
|
-
var Container$
|
|
19720
|
+
var Container$v = newStyled('div')(templateObject_7$i || (templateObject_7$i = __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"])));
|
|
19721
19721
|
var LabelText$1 = newStyled('span')(templateObject_8$e || (templateObject_8$e = __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"])));
|
|
19722
19722
|
var Column$2 = newStyled('div')(templateObject_9$9 || (templateObject_9$9 = __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"])));
|
|
19723
19723
|
var TableRow$3 = newStyled.tr(templateObject_10$8 || (templateObject_10$8 = __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; });
|
|
19724
|
-
var templateObject_1$
|
|
19724
|
+
var templateObject_1$L, templateObject_2$B, templateObject_3$z, templateObject_4$t, templateObject_5$n, templateObject_6$k, templateObject_7$i, templateObject_8$e, templateObject_9$9, templateObject_10$8;
|
|
19725
19725
|
|
|
19726
19726
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19727
19727
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19757,21 +19757,21 @@ var SizeChartTable = function (_a) {
|
|
|
19757
19757
|
var theme = useTheme();
|
|
19758
19758
|
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];
|
|
19759
19759
|
var isMultilabel = xLabel && yLabel;
|
|
19760
|
-
return (jsxs$1(Container$
|
|
19760
|
+
return (jsxs$1(Container$v, { 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: {
|
|
19761
19761
|
backgroundColor: getCellColor$2(index, cell),
|
|
19762
19762
|
}, 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));
|
|
19763
19763
|
};
|
|
19764
19764
|
|
|
19765
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19766
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19767
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19768
|
-
var TableRow$2 = newStyled.tr(templateObject_4$
|
|
19765
|
+
var TableElement$2 = newStyled.table(templateObject_1$K || (templateObject_1$K = __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; });
|
|
19766
|
+
var TableCell$2 = newStyled.td(templateObject_2$A || (templateObject_2$A = __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; });
|
|
19767
|
+
var TableHead$2 = newStyled.th(templateObject_3$y || (templateObject_3$y = __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; });
|
|
19768
|
+
var TableRow$2 = newStyled.tr(templateObject_4$s || (templateObject_4$s = __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; });
|
|
19769
19769
|
var SizeTable = function (_a) {
|
|
19770
19770
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19771
19771
|
var theme = useTheme();
|
|
19772
19772
|
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));
|
|
19773
19773
|
};
|
|
19774
|
-
var templateObject_1$
|
|
19774
|
+
var templateObject_1$K, templateObject_2$A, templateObject_3$y, templateObject_4$s;
|
|
19775
19775
|
|
|
19776
19776
|
var getStylesBySize$7 = function (size) {
|
|
19777
19777
|
switch (size) {
|
|
@@ -19798,7 +19798,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19798
19798
|
} });
|
|
19799
19799
|
};
|
|
19800
19800
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19801
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19801
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$J || (templateObject_1$J = __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));
|
|
19802
19802
|
};
|
|
19803
19803
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19804
19804
|
if (disabled)
|
|
@@ -19814,23 +19814,23 @@ var TextButton = function (_a) {
|
|
|
19814
19814
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19815
19815
|
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));
|
|
19816
19816
|
};
|
|
19817
|
-
var templateObject_1$
|
|
19817
|
+
var templateObject_1$J;
|
|
19818
19818
|
|
|
19819
|
-
var Container$
|
|
19820
|
-
var P = newStyled.p(templateObject_2$
|
|
19821
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19819
|
+
var Container$u = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
19820
|
+
var P = newStyled.p(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n margin: 0 0 0 10px;\n"], ["\n margin: 0 0 0 10px;\n"])));
|
|
19821
|
+
var PercentageSpan = newStyled.span(templateObject_3$x || (templateObject_3$x = __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"])));
|
|
19822
19822
|
var SizeFitGuide = function (_a) {
|
|
19823
19823
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19824
|
-
return (jsxs$1(Container$
|
|
19824
|
+
return (jsxs$1(Container$u, { 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));
|
|
19825
19825
|
};
|
|
19826
|
-
var templateObject_1$
|
|
19826
|
+
var templateObject_1$I, templateObject_2$z, templateObject_3$x;
|
|
19827
19827
|
|
|
19828
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19828
|
+
var ButtonsContainer = newStyled.div(templateObject_1$H || (templateObject_1$H = __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) {
|
|
19829
19829
|
var inline = _a.inline;
|
|
19830
19830
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19831
19831
|
});
|
|
19832
|
-
var Row = newStyled.div(templateObject_2$
|
|
19833
|
-
var templateObject_1$
|
|
19832
|
+
var Row = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
19833
|
+
var templateObject_1$H, templateObject_2$y;
|
|
19834
19834
|
|
|
19835
19835
|
var SizeSelector = function (_a) {
|
|
19836
19836
|
var _b;
|
|
@@ -19852,7 +19852,7 @@ var SizeSelector = function (_a) {
|
|
|
19852
19852
|
}) }), void 0)] }), void 0));
|
|
19853
19853
|
};
|
|
19854
19854
|
|
|
19855
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19855
|
+
var TabContainer = newStyled.div(templateObject_1$G || (templateObject_1$G = __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) {
|
|
19856
19856
|
var titleSize = _a.titleSize;
|
|
19857
19857
|
return titleSize;
|
|
19858
19858
|
}, function (_a) {
|
|
@@ -19869,18 +19869,18 @@ var Tab = function (_a) {
|
|
|
19869
19869
|
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;
|
|
19870
19870
|
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));
|
|
19871
19871
|
};
|
|
19872
|
-
var templateObject_1$
|
|
19872
|
+
var templateObject_1$G;
|
|
19873
19873
|
|
|
19874
|
-
var Container$
|
|
19875
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19874
|
+
var Container$t = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19875
|
+
var TabList = newStyled.div(templateObject_2$x || (templateObject_2$x = __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) {
|
|
19876
19876
|
var backgroundColor = _a.backgroundColor;
|
|
19877
19877
|
return backgroundColor;
|
|
19878
19878
|
}, function (_a) {
|
|
19879
19879
|
var borderColor = _a.borderColor;
|
|
19880
19880
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19881
19881
|
});
|
|
19882
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19883
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19882
|
+
var TabContent = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19883
|
+
var TabSeparator = newStyled.div(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
19884
19884
|
var Tabs = function (_a) {
|
|
19885
19885
|
var _b;
|
|
19886
19886
|
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;
|
|
@@ -19889,16 +19889,16 @@ var Tabs = function (_a) {
|
|
|
19889
19889
|
return null;
|
|
19890
19890
|
}
|
|
19891
19891
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19892
|
-
return (jsxs$1(Container$
|
|
19892
|
+
return (jsxs$1(Container$t, __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));
|
|
19893
19893
|
};
|
|
19894
|
-
var templateObject_1$
|
|
19894
|
+
var templateObject_1$F, templateObject_2$x, templateObject_3$w, templateObject_4$r;
|
|
19895
19895
|
|
|
19896
|
-
var Container$
|
|
19896
|
+
var Container$s = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
19897
19897
|
var Tag = function (_a) {
|
|
19898
19898
|
var text = _a.text, className = _a.className;
|
|
19899
|
-
return jsx$1(Container$
|
|
19899
|
+
return jsx$1(Container$s, __assign$1({ className: className }, { children: text }), void 0);
|
|
19900
19900
|
};
|
|
19901
|
-
var templateObject_1$
|
|
19901
|
+
var templateObject_1$E;
|
|
19902
19902
|
|
|
19903
19903
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19904
19904
|
switch (size) {
|
|
@@ -20011,9 +20011,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
20011
20011
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
20012
20012
|
};
|
|
20013
20013
|
|
|
20014
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
20015
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
20016
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
20014
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$D || (templateObject_1$D = __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"])));
|
|
20015
|
+
var VideoOverlay$1 = newStyled.div(templateObject_2$w || (templateObject_2$w = __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"])));
|
|
20016
|
+
var FullscreenVideo = newStyled.div(templateObject_3$v || (templateObject_3$v = __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"])));
|
|
20017
20017
|
var ImageVideo = function (_a) {
|
|
20018
20018
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
20019
20019
|
var video = useRef(null);
|
|
@@ -20033,12 +20033,12 @@ var ImageVideo = function (_a) {
|
|
|
20033
20033
|
height: '100%',
|
|
20034
20034
|
} }, void 0)] }, void 0))] }, void 0));
|
|
20035
20035
|
};
|
|
20036
|
-
var templateObject_1$
|
|
20036
|
+
var templateObject_1$D, templateObject_2$w, templateObject_3$v;
|
|
20037
20037
|
|
|
20038
|
-
var ContainerDesktop = css(templateObject_1$
|
|
20039
|
-
var ContainerMobile = css(templateObject_2$
|
|
20040
|
-
var Container$
|
|
20041
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
20038
|
+
var ContainerDesktop = css(templateObject_1$C || (templateObject_1$C = __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"])));
|
|
20039
|
+
var ContainerMobile = css(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
20040
|
+
var Container$r = newStyled.div(templateObject_3$u || (templateObject_3$u = __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);
|
|
20041
|
+
var TextContainer = newStyled.div(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
20042
20042
|
var TextWithImage = function (_a) {
|
|
20043
20043
|
var _b, _c, _d, _e;
|
|
20044
20044
|
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"]);
|
|
@@ -20058,7 +20058,7 @@ var TextWithImage = function (_a) {
|
|
|
20058
20058
|
// @ts-ignore
|
|
20059
20059
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
20060
20060
|
};
|
|
20061
|
-
return (jsxs(Container$
|
|
20061
|
+
return (jsxs(Container$r, __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: {
|
|
20062
20062
|
backgroundColor: props.btnBGColor,
|
|
20063
20063
|
color: '#ffffff',
|
|
20064
20064
|
border: props.btnBGColor,
|
|
@@ -20068,18 +20068,18 @@ var TextWithImage = function (_a) {
|
|
|
20068
20068
|
},
|
|
20069
20069
|
} }, 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));
|
|
20070
20070
|
};
|
|
20071
|
-
var templateObject_1$
|
|
20071
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$u, templateObject_4$q;
|
|
20072
20072
|
|
|
20073
20073
|
var slideInAnimation = function (distanceFromTop) {
|
|
20074
20074
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20075
|
-
return keyframes(templateObject_1$
|
|
20075
|
+
return keyframes(templateObject_1$B || (templateObject_1$B = __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);
|
|
20076
20076
|
};
|
|
20077
20077
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20078
20078
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20079
|
-
return keyframes(templateObject_2$
|
|
20079
|
+
return keyframes(templateObject_2$u || (templateObject_2$u = __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);
|
|
20080
20080
|
};
|
|
20081
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20082
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20081
|
+
var ToastContainer = newStyled.div(templateObject_3$t || (templateObject_3$t = __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"])));
|
|
20082
|
+
var ToastContent = newStyled.div(templateObject_4$p || (templateObject_4$p = __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) {
|
|
20083
20083
|
var distanceFromTop = _a.distanceFromTop;
|
|
20084
20084
|
return distanceFromTop || '124px';
|
|
20085
20085
|
}, function (_a) {
|
|
@@ -20097,7 +20097,7 @@ var ToastText = newStyled.p(templateObject_5$m || (templateObject_5$m = __makeTe
|
|
|
20097
20097
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20098
20098
|
});
|
|
20099
20099
|
var CloseIcon = newStyled.div(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20100
|
-
var templateObject_1$
|
|
20100
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$t, templateObject_4$p, templateObject_5$m, templateObject_6$j;
|
|
20101
20101
|
|
|
20102
20102
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20103
20103
|
var _b;
|
|
@@ -20119,9 +20119,9 @@ var Toast = React__default.forwardRef(function (_a, ref) {
|
|
|
20119
20119
|
});
|
|
20120
20120
|
Toast.displayName = 'Toast';
|
|
20121
20121
|
|
|
20122
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20123
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20124
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20122
|
+
var Wrapper$1 = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
20123
|
+
var GrandTotal = newStyled.h1(templateObject_2$t || (templateObject_2$t = __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; });
|
|
20124
|
+
var Currency = newStyled.span(templateObject_3$s || (templateObject_3$s = __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) {
|
|
20125
20125
|
var theme = _a.theme;
|
|
20126
20126
|
return theme.component.total.basicTotal.currency.color;
|
|
20127
20127
|
}, function (_a) {
|
|
@@ -20134,11 +20134,11 @@ var Currency = newStyled.span(templateObject_3$r || (templateObject_3$r = __make
|
|
|
20134
20134
|
var theme = _a.theme;
|
|
20135
20135
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20136
20136
|
});
|
|
20137
|
-
var Container$
|
|
20137
|
+
var Container$q = newStyled.div(templateObject_4$o || (templateObject_4$o = __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) {
|
|
20138
20138
|
var highlightColor = _a.highlightColor;
|
|
20139
20139
|
return highlightColor;
|
|
20140
20140
|
});
|
|
20141
|
-
var TotalContainer = newStyled(Container$
|
|
20141
|
+
var TotalContainer = newStyled(Container$q)(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20142
20142
|
var showTotalLabel = _a.showTotalLabel;
|
|
20143
20143
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20144
20144
|
});
|
|
@@ -20148,27 +20148,27 @@ var DiscountAmount = newStyled.h3(templateObject_7$h || (templateObject_7$h = __
|
|
|
20148
20148
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20149
20149
|
});
|
|
20150
20150
|
var TotalLabel = newStyled(Text$7)(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20151
|
-
var templateObject_1$
|
|
20151
|
+
var templateObject_1$A, templateObject_2$t, templateObject_3$s, templateObject_4$o, templateObject_5$l, templateObject_6$i, templateObject_7$h, templateObject_8$d;
|
|
20152
20152
|
|
|
20153
20153
|
var Total = function (_a) {
|
|
20154
20154
|
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;
|
|
20155
20155
|
var theme = useTheme();
|
|
20156
|
-
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$
|
|
20156
|
+
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$q, __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));
|
|
20157
20157
|
};
|
|
20158
20158
|
|
|
20159
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20159
|
+
var Wrapper = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20160
20160
|
var color = _a.color;
|
|
20161
20161
|
return color;
|
|
20162
20162
|
});
|
|
20163
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20164
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20163
|
+
var ItemContainer = newStyled.div(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
20164
|
+
var Item = newStyled.h4(templateObject_3$r || (templateObject_3$r = __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) {
|
|
20165
20165
|
var theme = _a.theme;
|
|
20166
20166
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20167
20167
|
}, function (_a) {
|
|
20168
20168
|
var theme = _a.theme;
|
|
20169
20169
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20170
20170
|
});
|
|
20171
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20171
|
+
var CouponItem = newStyled(Item)(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20172
20172
|
var color = _a.color;
|
|
20173
20173
|
return color;
|
|
20174
20174
|
});
|
|
@@ -20181,17 +20181,17 @@ var Subtotal = function (_a) {
|
|
|
20181
20181
|
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));
|
|
20182
20182
|
})] }), void 0));
|
|
20183
20183
|
};
|
|
20184
|
-
var templateObject_1$
|
|
20184
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$r, templateObject_4$n;
|
|
20185
20185
|
|
|
20186
20186
|
var Totals = {
|
|
20187
20187
|
Total: Total,
|
|
20188
20188
|
Subtotal: Subtotal,
|
|
20189
20189
|
};
|
|
20190
20190
|
|
|
20191
|
-
var Container$
|
|
20192
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20193
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20194
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20191
|
+
var Container$p = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20192
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20193
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$q || (templateObject_3$q = __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; });
|
|
20194
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$m || (templateObject_4$m = __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'); });
|
|
20195
20195
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$k || (templateObject_5$k = __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"])));
|
|
20196
20196
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$h || (templateObject_6$h = __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) {
|
|
20197
20197
|
return props.finishedTrack
|
|
@@ -20229,7 +20229,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20229
20229
|
}
|
|
20230
20230
|
return '30px';
|
|
20231
20231
|
};
|
|
20232
|
-
return (jsxs$1(Container$
|
|
20232
|
+
return (jsxs$1(Container$p, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20233
20233
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20234
20234
|
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
|
|
20235
20235
|
? activeCheckpointColor
|
|
@@ -20240,12 +20240,12 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20240
20240
|
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));
|
|
20241
20241
|
})] }), void 0));
|
|
20242
20242
|
};
|
|
20243
|
-
var templateObject_1$
|
|
20243
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$q, templateObject_4$m, templateObject_5$k, templateObject_6$h, templateObject_7$g, templateObject_8$c, templateObject_9$8, templateObject_10$7, templateObject_11$5;
|
|
20244
20244
|
|
|
20245
|
-
var Container$
|
|
20246
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20247
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20248
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20245
|
+
var Container$o = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20246
|
+
var CheckpointContainer = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20247
|
+
var CheckpointDate = newStyled.div(templateObject_3$p || (templateObject_3$p = __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; });
|
|
20248
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$l || (templateObject_4$l = __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'); });
|
|
20249
20249
|
var CheckpointStatus = newStyled.p(templateObject_5$j || (templateObject_5$j = __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'); });
|
|
20250
20250
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$g || (templateObject_6$g = __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) {
|
|
20251
20251
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
@@ -20271,7 +20271,7 @@ var TrackingProgress = function (_a) {
|
|
|
20271
20271
|
}
|
|
20272
20272
|
return '30px';
|
|
20273
20273
|
};
|
|
20274
|
-
return (jsxs$1(Container$
|
|
20274
|
+
return (jsxs$1(Container$o, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20275
20275
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20276
20276
|
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
|
|
20277
20277
|
? theme.colors.semantic.informative.color
|
|
@@ -20280,19 +20280,19 @@ var TrackingProgress = function (_a) {
|
|
|
20280
20280
|
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));
|
|
20281
20281
|
})] }), void 0));
|
|
20282
20282
|
};
|
|
20283
|
-
var templateObject_1$
|
|
20283
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$p, templateObject_4$l, templateObject_5$j, templateObject_6$g, templateObject_7$f, templateObject_8$b;
|
|
20284
20284
|
|
|
20285
|
-
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20285
|
+
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$w || (templateObject_1$w = __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) {
|
|
20286
20286
|
var checked = _a.checked;
|
|
20287
20287
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20288
20288
|
});
|
|
20289
|
-
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$
|
|
20290
|
-
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$
|
|
20291
|
-
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$
|
|
20289
|
+
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
20290
|
+
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __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"])));
|
|
20291
|
+
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
20292
20292
|
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20293
20293
|
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$f || (templateObject_6$f = __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"])));
|
|
20294
20294
|
var CheckboxInput = newStyled.input(templateObject_7$e || (templateObject_7$e = __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"])));
|
|
20295
|
-
var templateObject_1$
|
|
20295
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$k, templateObject_5$i, templateObject_6$f, templateObject_7$e;
|
|
20296
20296
|
|
|
20297
20297
|
function AutoshipOfferCard(_a) {
|
|
20298
20298
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20316,18 +20316,18 @@ function AutoshipOfferCard(_a) {
|
|
|
20316
20316
|
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));
|
|
20317
20317
|
}
|
|
20318
20318
|
|
|
20319
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
20319
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$v || (templateObject_1$v = __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) {
|
|
20320
20320
|
var checked = _a.checked;
|
|
20321
20321
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20322
20322
|
});
|
|
20323
|
-
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$
|
|
20324
|
-
var AutoShipBodyWrapper = newStyled.div(templateObject_3$
|
|
20325
|
-
var AutoShipBodyTitle = newStyled.div(templateObject_4$
|
|
20323
|
+
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$o || (templateObject_2$o = __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"])));
|
|
20324
|
+
var AutoShipBodyWrapper = newStyled.div(templateObject_3$n || (templateObject_3$n = __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"])));
|
|
20325
|
+
var AutoShipBodyTitle = newStyled.div(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
20326
20326
|
var AutoShipBodyListItem = newStyled.div(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20327
20327
|
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$e || (templateObject_6$e = __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"])));
|
|
20328
20328
|
newStyled.input(templateObject_7$d || (templateObject_7$d = __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"])));
|
|
20329
20329
|
var ButtonRemoveWrapper = newStyled.div(templateObject_8$a || (templateObject_8$a = __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"])));
|
|
20330
|
-
var templateObject_1$
|
|
20330
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$j, templateObject_5$h, templateObject_6$e, templateObject_7$d, templateObject_8$a;
|
|
20331
20331
|
|
|
20332
20332
|
function AutoshipOfferCardCta(_a) {
|
|
20333
20333
|
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;
|
|
@@ -20345,18 +20345,18 @@ function AutoshipOfferCardCta(_a) {
|
|
|
20345
20345
|
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));
|
|
20346
20346
|
}
|
|
20347
20347
|
|
|
20348
|
-
var ContainerBase$3 = newStyled.div(templateObject_1$
|
|
20349
|
-
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_2$
|
|
20350
|
-
var SubscriptionHeader$3 = newStyled.div(templateObject_3$
|
|
20351
|
-
newStyled.div(templateObject_4$
|
|
20348
|
+
var ContainerBase$3 = newStyled.div(templateObject_1$u || (templateObject_1$u = __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"])));
|
|
20349
|
+
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
20350
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
20351
|
+
newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20352
20352
|
newStyled.div(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
20353
20353
|
newStyled(Text$7)(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20354
|
-
var Container$
|
|
20354
|
+
var Container$n = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20355
20355
|
var Benefits$1 = newStyled.div(templateObject_8$9 || (templateObject_8$9 = __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) {
|
|
20356
20356
|
var height = _a.height;
|
|
20357
20357
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20358
20358
|
});
|
|
20359
|
-
var templateObject_1$
|
|
20359
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$m, templateObject_4$i, templateObject_5$g, templateObject_6$d, templateObject_7$c, templateObject_8$9;
|
|
20360
20360
|
|
|
20361
20361
|
var renderCopy = function (copy) {
|
|
20362
20362
|
if (typeof copy === 'string') {
|
|
@@ -20367,7 +20367,7 @@ var renderCopy = function (copy) {
|
|
|
20367
20367
|
var AutoshipPdpCard = function (_a) {
|
|
20368
20368
|
var _b, _c;
|
|
20369
20369
|
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;
|
|
20370
|
-
return (jsxs$1(Container$
|
|
20370
|
+
return (jsxs$1(Container$n, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$3, __assign$1({ "data-testid": "subscription-container" }, { children: [jsxs$1(SubscriptionHeader$3, { children: [jsx$1(Text$7, { variant: "label", dangerouslySetInnerHTML: { __html: title !== null && title !== void 0 ? title : '' } }, void 0), jsx$1(ButtonPrimary, { wide: true, text: (_b = renderCopy(ctaText)) !== null && _b !== void 0 ? _b : 'Yes, I want this offer', size: ComponentSize.Small, onClick: function () {
|
|
20371
20371
|
handleSavings();
|
|
20372
20372
|
} }, 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: (_c = renderCopy(ctaTextNoSavings)) !== null && _c !== void 0 ? _c : 'Continue without more savings - ', size: ComponentSize.Small, onClick: function () {
|
|
20373
20373
|
handleWithoutSavings();
|
|
@@ -20396,15 +20396,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
20396
20396
|
justifyContent: 'center',
|
|
20397
20397
|
gap: '10px',
|
|
20398
20398
|
});
|
|
20399
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
20399
|
+
var StyledContent = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\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 display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\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 display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
20400
20400
|
var bgColor = _a.bgColor;
|
|
20401
20401
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
20402
20402
|
}, function (_a) {
|
|
20403
20403
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
20404
20404
|
return width;
|
|
20405
20405
|
});
|
|
20406
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
20407
|
-
var templateObject_1$
|
|
20406
|
+
var StyledController = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\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 user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\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 user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
20407
|
+
var templateObject_1$t, templateObject_2$m;
|
|
20408
20408
|
|
|
20409
20409
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
20410
20410
|
var background = _a.background, width = _a.width;
|
|
@@ -20445,14 +20445,14 @@ var BasicAccordion = function (_a) {
|
|
|
20445
20445
|
} }), void 0));
|
|
20446
20446
|
};
|
|
20447
20447
|
|
|
20448
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
20449
|
-
var ImageWrapper = newStyled.div(templateObject_2$
|
|
20450
|
-
var ImageComponent = newStyled(Image$3)(templateObject_3$
|
|
20451
|
-
var RightComponentWrapper = newStyled.div(templateObject_4$
|
|
20448
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"], ["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"])));
|
|
20449
|
+
var ImageWrapper = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"])));
|
|
20450
|
+
var ImageComponent = newStyled(Image$3)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"])));
|
|
20451
|
+
var RightComponentWrapper = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"])));
|
|
20452
20452
|
var TitleWrapper$1 = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
20453
20453
|
var SubTitleWrapper = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"])));
|
|
20454
20454
|
var ButtonsWrapper = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20455
|
-
var templateObject_1$
|
|
20455
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$l, templateObject_4$h, templateObject_5$f, templateObject_6$c, templateObject_7$b;
|
|
20456
20456
|
|
|
20457
20457
|
function CartItemCard(_a) {
|
|
20458
20458
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20498,9 +20498,9 @@ var Shades200Color$1 = '#bbbbbb';
|
|
|
20498
20498
|
var Shades700Color$1 = '#292929';
|
|
20499
20499
|
var PrimaryColor$1 = '#f7a08b';
|
|
20500
20500
|
var ClubBorderColor$1 = '#882a2b';
|
|
20501
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
20502
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
20503
|
-
var ContainerBase$2 = newStyled.div(templateObject_3$
|
|
20501
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20502
|
+
var DiscountTag$2 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient$1);
|
|
20503
|
+
var ContainerBase$2 = newStyled.div(templateObject_3$k || (templateObject_3$k = __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) {
|
|
20504
20504
|
var selected = _a.selected;
|
|
20505
20505
|
return selected ? "1.5px solid ".concat(ClubBorderColor$1) : "1px solid ".concat(Shades200Color$1);
|
|
20506
20506
|
}, function (_a) {
|
|
@@ -20509,7 +20509,7 @@ var ContainerBase$2 = newStyled.div(templateObject_3$j || (templateObject_3$j =
|
|
|
20509
20509
|
? "& label {\n font-weight: 700;\n }"
|
|
20510
20510
|
: '';
|
|
20511
20511
|
}, PrimaryColor$1);
|
|
20512
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
20512
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
20513
20513
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20514
20514
|
return (isNoMember && selected ? Shades700Color$1 : '');
|
|
20515
20515
|
}, function (_a) {
|
|
@@ -20540,8 +20540,8 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_10$6 || (templateOb
|
|
|
20540
20540
|
? ClubBorderColor$1
|
|
20541
20541
|
: Shades200Color$1;
|
|
20542
20542
|
});
|
|
20543
|
-
var Container$
|
|
20544
|
-
var templateObject_1$
|
|
20543
|
+
var Container$m = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20544
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$k, templateObject_4$g, templateObject_5$e, templateObject_6$b, templateObject_7$a, templateObject_8$8, templateObject_9$7, templateObject_10$6, templateObject_11$4;
|
|
20545
20545
|
|
|
20546
20546
|
var ClubOfferSelector = function (_a) {
|
|
20547
20547
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20580,7 +20580,7 @@ var ClubOfferSelector = function (_a) {
|
|
|
20580
20580
|
onChange(__assign$1({}, dataObj));
|
|
20581
20581
|
};
|
|
20582
20582
|
var isSelected = radioIds$1.clubOfferSelector.id === radioCheck.id;
|
|
20583
|
-
return (jsxs$1(Container$
|
|
20583
|
+
return (jsxs$1(Container$m, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$2, __assign$1({ onClick: function () { return handleChange(radioIds$1.clubOfferSelector, 'radio'); }, "data-testid": "subscription-purchase-block", selected: isSelected }, { children: [jsx$1(DiscountTag$2, __assign$1({ isSelected: isSelected }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(clubOfferPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(clubOfferSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$2, __assign$1({ isSelected: isSelected }, { children: [jsx$1(FlexContainer$2, { children: jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$1.clubOfferSelector.id, id: radioIds$1.clubOfferSelector.id, value: radioIds$1.clubOfferSelector.id, checked: isSelected, size: ComponentSize.Medium, style: {
|
|
20584
20584
|
marginRight: '10px',
|
|
20585
20585
|
}, labelStyle: {
|
|
20586
20586
|
color: ClubBorderColor$1,
|
|
@@ -20601,9 +20601,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20601
20601
|
var Shades700Color = '#292929';
|
|
20602
20602
|
var PrimaryColor = '#f7a08b';
|
|
20603
20603
|
var ClubBorderColor = '#882a2b';
|
|
20604
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
20605
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
20606
|
-
var ContainerBase$1 = newStyled.div(templateObject_3$
|
|
20604
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20605
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient);
|
|
20606
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __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) {
|
|
20607
20607
|
var selected = _a.selected;
|
|
20608
20608
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20609
20609
|
}, function (_a) {
|
|
@@ -20612,7 +20612,7 @@ var ContainerBase$1 = newStyled.div(templateObject_3$i || (templateObject_3$i =
|
|
|
20612
20612
|
? "& label {\n font-weight: 700;\n }"
|
|
20613
20613
|
: '';
|
|
20614
20614
|
}, PrimaryColor);
|
|
20615
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
20615
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
20616
20616
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20617
20617
|
return (isNoMember && selected ? Shades700Color : '');
|
|
20618
20618
|
}, function (_a) {
|
|
@@ -20643,9 +20643,9 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$5 || (templateOb
|
|
|
20643
20643
|
? ClubBorderColor
|
|
20644
20644
|
: Shades200Color;
|
|
20645
20645
|
});
|
|
20646
|
-
var Container$
|
|
20646
|
+
var Container$l = newStyled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20647
20647
|
var TermsText = newStyled(Text$7)(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20648
|
-
var templateObject_1$
|
|
20648
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$j, templateObject_4$f, templateObject_5$d, templateObject_6$a, templateObject_7$9, templateObject_8$7, templateObject_9$6, templateObject_10$5, templateObject_11$3, templateObject_12$2;
|
|
20649
20649
|
|
|
20650
20650
|
var ClubOfferSelector2 = function (_a) {
|
|
20651
20651
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs, termsTextLink = _a.termsTextLink;
|
|
@@ -20684,32 +20684,32 @@ var ClubOfferSelector2 = function (_a) {
|
|
|
20684
20684
|
onChange(__assign$1({}, dataObj));
|
|
20685
20685
|
};
|
|
20686
20686
|
var isSelected = radioIds.clubOfferSelector2.id === radioCheck.id;
|
|
20687
|
-
return (jsxs$1(Container$
|
|
20687
|
+
return (jsxs$1(Container$l, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$1, __assign$1({ onClick: function () { return handleChange(radioIds.clubOfferSelector2, 'radio'); }, "data-testid": "subscription-purchase-block", selected: isSelected }, { children: [jsx$1(DiscountTag$1, __assign$1({ isSelected: isSelected }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(clubOfferPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(clubOfferSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$1, __assign$1({ isSelected: isSelected }, { children: [jsx$1(FlexContainer$1, { children: jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.clubOfferSelector2.id, id: radioIds.clubOfferSelector2.id, value: radioIds.clubOfferSelector2.id, checked: isSelected, size: ComponentSize.Medium, style: {
|
|
20688
20688
|
marginRight: '10px',
|
|
20689
20689
|
}, labelStyle: {
|
|
20690
20690
|
color: ClubBorderColor,
|
|
20691
20691
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector2.id) }, void 0) }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer$1, { children: jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: updatedClubOfferBenefits[0] } }, void 0) }, void 0))] }), void 0), isSelected && (jsxs$1(TermsText, __assign$1({ variant: "body" }, { children: [updatedClubOfferBenefits[1], jsxs$1("span", { children: ["Terms ", jsx$1("a", __assign$1({ href: termsTextLink }, { children: "here" }), void 0), "."] }, void 0)] }), void 0)), jsxs$1(SinglePurchaseContainer$1, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice$1, { isNoMember: true, testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20692
20692
|
};
|
|
20693
20693
|
|
|
20694
|
-
var ContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20694
|
+
var ContainerWrapper$1 = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
20695
20695
|
var $checked = _a.$checked;
|
|
20696
20696
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20697
20697
|
}, function (_a) {
|
|
20698
20698
|
var $checked = _a.$checked;
|
|
20699
20699
|
return ($checked ? '#FFE1B8' : '#E5E5E5');
|
|
20700
20700
|
});
|
|
20701
|
-
var CardHeaderWrapper = newStyled.div(templateObject_2$
|
|
20702
|
-
var CardBody = newStyled.div(templateObject_3$
|
|
20703
|
-
var ClubCopyWrapper = newStyled.div(templateObject_4$
|
|
20701
|
+
var CardHeaderWrapper = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
20702
|
+
var CardBody = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20703
|
+
var ClubCopyWrapper = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20704
20704
|
var ClubCopyTextWrapper = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20705
|
-
var templateObject_1$
|
|
20705
|
+
var templateObject_1$p, templateObject_2$i, templateObject_3$i, templateObject_4$e, templateObject_5$c;
|
|
20706
20706
|
|
|
20707
20707
|
function Card(_a) {
|
|
20708
20708
|
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _c = _a.termsText, termsText = _c === void 0 ? 'Terms here.' : _c;
|
|
20709
20709
|
return (jsxs$1(ContainerWrapper$1, __assign$1({ "$checked": isChecked, style: style }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [icon, jsx$1(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsx$1("div", { children: children }, void 0)] }, void 0), !isChecked && (jsxs$1(CardBody, __assign$1({ id: "joinClubCardBody" }, { children: [bodyCopy, ' ', jsx$1("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: termsText }), void 0)] }), void 0))] }), void 0));
|
|
20710
20710
|
}
|
|
20711
20711
|
|
|
20712
|
-
var StyledButton = newStyled.button(templateObject_1$
|
|
20712
|
+
var StyledButton = newStyled.button(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n padding: 10px 20px;\n border-radius: 8px;\n background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n color: var(--neutrals-white-ffffff, #fff);\n text-align: center;\n font-family: 'Avenir Next';\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 18px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n ", ";\n"], ["\n padding: 10px 20px;\n border-radius: 8px;\n background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n color: var(--neutrals-white-ffffff, #fff);\n text-align: center;\n font-family: 'Avenir Next';\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 18px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n ", ";\n"])), function (_a) {
|
|
20713
20713
|
var customStyle = _a.customStyle;
|
|
20714
20714
|
return customStyle && __assign$1({}, customStyle);
|
|
20715
20715
|
});
|
|
@@ -20722,15 +20722,15 @@ var JoinClubCard = function (_a) {
|
|
|
20722
20722
|
};
|
|
20723
20723
|
return (jsx$1(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style, termsText: termsText }, { children: showButton ? (jsx$1(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked }, void 0)) }), void 0));
|
|
20724
20724
|
};
|
|
20725
|
-
var templateObject_1$
|
|
20725
|
+
var templateObject_1$o;
|
|
20726
20726
|
|
|
20727
|
-
var Container$
|
|
20728
|
-
var Body = newStyled.div(templateObject_2$
|
|
20727
|
+
var Container$k = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"])));
|
|
20728
|
+
var Body = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"], ["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"])), function (_a) {
|
|
20729
20729
|
var height = _a.height;
|
|
20730
20730
|
return height;
|
|
20731
20731
|
});
|
|
20732
|
-
var RightContent = newStyled.div(templateObject_3$
|
|
20733
|
-
var Benefits = newStyled.div(templateObject_4$
|
|
20732
|
+
var RightContent = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n width: 100%;\n"])));
|
|
20733
|
+
var Benefits = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"])), function (_a) {
|
|
20734
20734
|
var height = _a.height;
|
|
20735
20735
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20736
20736
|
}, function (_a) {
|
|
@@ -20738,7 +20738,7 @@ var Benefits = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeT
|
|
|
20738
20738
|
return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades['10'].color;
|
|
20739
20739
|
});
|
|
20740
20740
|
var Actions = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n"])));
|
|
20741
|
-
var templateObject_1$
|
|
20741
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$h, templateObject_4$d, templateObject_5$b;
|
|
20742
20742
|
|
|
20743
20743
|
var getTitleProps = function (_a) {
|
|
20744
20744
|
var titleContent = _a.content, bold = _a.bold;
|
|
@@ -20777,7 +20777,7 @@ var OfferAtCart = function (props) {
|
|
|
20777
20777
|
setSelectedSize(sizeOption);
|
|
20778
20778
|
} }, void 0)), jsx$1(ButtonSecondary, { wide: true, text: ctaText, size: ComponentSize.Small, onClick: handleOnClick }, void 0)] }, void 0));
|
|
20779
20779
|
var ErrorMessage = (jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: theme.colors.semantic.urgent.color }, { children: "Please select a size first" }), void 0));
|
|
20780
|
-
return (jsxs$1(Container$
|
|
20780
|
+
return (jsxs$1(Container$k, __assign$1({ className: className }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [image && (jsx$1(OfferAtCartImage, { isMobile: isMobile, src: image.src, alt: image.alt, rating: rating }, void 0)), jsxs$1(RightContent, { children: [jsx$1(Benefits, __assign$1({ id: "benefits" }, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0), !isMobile && ActionsSection, !isMobile && showErrorMessage && ErrorMessage] }, void 0)] }), void 0), isMobile && ActionsSection, isMobile && showErrorMessage && ErrorMessage, bottomCopy && jsx$1("span", { dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }), void 0));
|
|
20781
20781
|
};
|
|
20782
20782
|
|
|
20783
20783
|
var renderBottomCopy = function (text) {
|
|
@@ -20792,15 +20792,15 @@ var VariantType;
|
|
|
20792
20792
|
VariantType["V1"] = "v1";
|
|
20793
20793
|
VariantType["V2"] = "v2";
|
|
20794
20794
|
})(VariantType || (VariantType = {}));
|
|
20795
|
-
var ContainerV2 = newStyled.div(templateObject_1$
|
|
20795
|
+
var ContainerV2 = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: ", ";\n"])), function (_a) {
|
|
20796
20796
|
var variant = _a.variant;
|
|
20797
20797
|
return (variant === VariantType.V2 ? '#F7F7F7' : 'white');
|
|
20798
20798
|
});
|
|
20799
|
-
var ActionsV2 = newStyled.div(templateObject_2$
|
|
20800
|
-
var SizeCardItem = newStyled.div(templateObject_3$
|
|
20801
|
-
var SizeCardWrapper = newStyled.div(templateObject_4$
|
|
20799
|
+
var ActionsV2 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"])));
|
|
20800
|
+
var SizeCardItem = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"], ["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"])));
|
|
20801
|
+
var SizeCardWrapper = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"], ["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"])));
|
|
20802
20802
|
var BottomCopyWrapper$1 = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"])));
|
|
20803
|
-
var templateObject_1$
|
|
20803
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$g, templateObject_4$c, templateObject_5$a;
|
|
20804
20804
|
|
|
20805
20805
|
var SizeOptions = function (_a) {
|
|
20806
20806
|
var onAddToCart = _a.onAddToCart, sizeOptions = _a.sizeOptions;
|
|
@@ -20820,6 +20820,18 @@ var OfferAtCartV2 = function (_a) {
|
|
|
20820
20820
|
return (jsxs$1(ContainerV2, __assign$1({ className: className, variant: bottomCopy ? VariantType.V2 : VariantType.V1 }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body, { children: [src && alt && (jsx$1(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating, width: isMobile ? '90px' : '122px' }, void 0)), jsx$1(RightContent, { children: jsx$1(Benefits, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }, void 0) }, void 0)] }, void 0), jsx$1("div", { children: !isMobile && ActionsSection }, void 0), isMobile && ActionsSection, bottomCopy && jsx$1(BottomCopyWrapper$1, { children: renderBottomCopy(bottomCopy) }, void 0)] }), void 0));
|
|
20821
20821
|
};
|
|
20822
20822
|
|
|
20823
|
+
var Container$j = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n width: 100%;\n padding: ", ";\n gap: 14px;\n background-color: #f6f0e7;\n align-items: center;\n"], ["\n display: flex;\n width: 100%;\n padding: ", ";\n gap: 14px;\n background-color: #f6f0e7;\n align-items: center;\n"])), function (props) { return (props.isMobile ? '10px' : '20px'); });
|
|
20824
|
+
var QuatityLabel = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n background: #d4605b;\n border-radius: 50%;\n width: 33px;\n height: 33px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 33px;\n"], ["\n background: #d4605b;\n border-radius: 50%;\n width: 33px;\n height: 33px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 33px;\n"])));
|
|
20825
|
+
var TextSmallLineHeight = newStyled(Text$7)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n line-height: 17px;\n"], ["\n line-height: 17px;\n"])));
|
|
20826
|
+
var ButtonSecondaryNoWrap = newStyled(ButtonSecondary)(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n padding: ", ";\n white-space: nowrap;\n"], ["\n padding: ", ";\n white-space: nowrap;\n"])), function (props) { return (props.size === ComponentSize.XSmall ? '8px' : '16px 32px'); });
|
|
20827
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$f, templateObject_4$b;
|
|
20828
|
+
|
|
20829
|
+
var OfferAtCartV3 = function (_a) {
|
|
20830
|
+
var className = _a.className, _b = _a.quantity, quantity = _b === void 0 ? '2X' : _b, titleContent = _a.title.content, onAddToCart = _a.onAddToCart, ctaText = _a.ctaText;
|
|
20831
|
+
var isMobile = useDeviceType() === 'mobile';
|
|
20832
|
+
return (jsxs$1(Container$j, __assign$1({ isMobile: isMobile, className: className }, { children: [jsx$1(QuatityLabel, { children: quantity }, void 0), jsx$1(TextSmallLineHeight, __assign$1({ variant: "body", weight: "bold", size: isMobile ? 'small' : 'regular' }, { children: titleContent }), void 0), jsx$1(ButtonSecondaryNoWrap, { onClick: onAddToCart, size: isMobile ? ComponentSize.XSmall : ComponentSize.Large, text: ctaText }, void 0)] }), void 0));
|
|
20833
|
+
};
|
|
20834
|
+
|
|
20823
20835
|
var ImageContainer$1 = newStyled.div(function (_a) {
|
|
20824
20836
|
var width = _a.width, height = _a.height;
|
|
20825
20837
|
return ({
|
|
@@ -22468,5 +22480,5 @@ function TwoCtasAtCart(_a) {
|
|
|
22468
22480
|
return (jsxs$1(Container, __assign$1({ id: "twoCtasAtCart" }, { children: [jsx$1(TitleWrapper, __assign$1({ id: "twoCtasAtCartTitle" }, { children: title }), void 0), jsx$1(ButtonPrimary, { onClick: saveMoreButtonAction, text: saveMoreButtonLabel, wide: true }, void 0), jsxs$1(BodyContainer, { children: [jsx$1(GridContainer, __assign$1({ style: { marginTop: '8px' } }, { children: descriptions.map(function (description, index) { return (jsx$1(DescriptionItem, { text: description.text, smallerText: description.smallerText, iconName: description === null || description === void 0 ? void 0 : description.iconName, type: description === null || description === void 0 ? void 0 : description.type, link: description === null || description === void 0 ? void 0 : description.link }, "".concat(description.text, "-").concat(index))); }) }), void 0), bottomCopy && jsx$1(BottomCopyWrapper, { dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }, void 0), jsx$1(OutLineButtonContainer, { children: version === BottomButtonVersionsTypes.link ? (jsx$1(SaveLessLinkButton, __assign$1({ href: "#", onClick: saveLessButtonAction }, { children: saveLessButtonLabel }), void 0)) : (jsx$1(BtnOutlineWrapper, { wide: true, onClick: saveLessButtonAction, text: saveLessButtonLabel }, void 0)) }, void 0)] }), void 0));
|
|
22469
22481
|
}
|
|
22470
22482
|
|
|
22471
|
-
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, ClubOfferSelector2, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$4 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, GreetingsCard, 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, PriceLabelV5, 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, TwoCtasAtCart, 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 };
|
|
22483
|
+
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, ClubOfferSelector2, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerWithTooltip, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$4 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, GreetingsCard, 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, OfferAtCartV3, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, PriceLabelV5, 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, TwoCtasAtCart, 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 };
|
|
22472
22484
|
//# sourceMappingURL=index.esm.js.map
|