@trafilea/afrodita-components 6.36.2 → 6.36.4
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.css +1 -2
- package/build/index.esm.css +1 -2
- package/build/index.esm.js +709 -648
- package/build/index.esm.js.map +1 -1
- package/build/index.js +709 -648
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3207,7 +3207,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3207
3207
|
};
|
|
3208
3208
|
}
|
|
3209
3209
|
};
|
|
3210
|
-
var Container$
|
|
3210
|
+
var Container$1q = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __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) {
|
|
3211
3211
|
var backgroundColor = _a.backgroundColor;
|
|
3212
3212
|
return backgroundColor;
|
|
3213
3213
|
}, function (_a) {
|
|
@@ -3229,7 +3229,7 @@ var Container$1n = newStyled.div(templateObject_1$2h || (templateObject_1$2h = _
|
|
|
3229
3229
|
var size = _a.size;
|
|
3230
3230
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3231
3231
|
});
|
|
3232
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3232
|
+
var H3$3 = newStyled.h3(templateObject_2$1E || (templateObject_2$1E = __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) {
|
|
3233
3233
|
var textColor = _a.textColor;
|
|
3234
3234
|
return textColor;
|
|
3235
3235
|
}, function (_a) {
|
|
@@ -3244,9 +3244,9 @@ var H3$3 = newStyled.h3(templateObject_2$1D || (templateObject_2$1D = __makeTemp
|
|
|
3244
3244
|
var ClubOfferTag = function (_a) {
|
|
3245
3245
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
3246
3246
|
var theme = useTheme();
|
|
3247
|
-
return (jsxRuntime.jsx(Container$
|
|
3247
|
+
return (jsxRuntime.jsx(Container$1q, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3248
3248
|
};
|
|
3249
|
-
var templateObject_1$
|
|
3249
|
+
var templateObject_1$2i, templateObject_2$1E;
|
|
3250
3250
|
|
|
3251
3251
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3252
3252
|
var _a, _b, _c;
|
|
@@ -3277,7 +3277,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3277
3277
|
};
|
|
3278
3278
|
}
|
|
3279
3279
|
};
|
|
3280
|
-
var Container$
|
|
3280
|
+
var Container$1p = newStyled.div(templateObject_1$2h || (templateObject_1$2h = __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) {
|
|
3281
3281
|
var backgroundColor = _a.backgroundColor;
|
|
3282
3282
|
return backgroundColor;
|
|
3283
3283
|
}, function (_a) {
|
|
@@ -3299,7 +3299,7 @@ var Container$1m = newStyled.div(templateObject_1$2g || (templateObject_1$2g = _
|
|
|
3299
3299
|
var size = _a.size;
|
|
3300
3300
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3301
3301
|
});
|
|
3302
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3302
|
+
var H3$2 = newStyled.h3(templateObject_2$1D || (templateObject_2$1D = __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) {
|
|
3303
3303
|
var textColor = _a.textColor;
|
|
3304
3304
|
return textColor;
|
|
3305
3305
|
}, function (_a) {
|
|
@@ -3314,9 +3314,9 @@ var H3$2 = newStyled.h3(templateObject_2$1C || (templateObject_2$1C = __makeTemp
|
|
|
3314
3314
|
var DiscountTag$3 = function (_a) {
|
|
3315
3315
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
3316
3316
|
var theme = useTheme();
|
|
3317
|
-
return (jsxRuntime.jsx(Container$
|
|
3317
|
+
return (jsxRuntime.jsx(Container$1p, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$2, __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));
|
|
3318
3318
|
};
|
|
3319
|
-
var templateObject_1$
|
|
3319
|
+
var templateObject_1$2h, templateObject_2$1D;
|
|
3320
3320
|
|
|
3321
3321
|
var Viewports = {
|
|
3322
3322
|
mobile: 'mobile',
|
|
@@ -3425,8 +3425,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3425
3425
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3426
3426
|
}
|
|
3427
3427
|
};
|
|
3428
|
-
var Container$
|
|
3429
|
-
var Price = newStyled.p(templateObject_2$
|
|
3428
|
+
var Container$1o = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3429
|
+
var Price = newStyled.p(templateObject_2$1C || (templateObject_2$1C = __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) {
|
|
3430
3430
|
var weight = _a.weight;
|
|
3431
3431
|
return (weight ? weight : '400');
|
|
3432
3432
|
}, function (_a) {
|
|
@@ -3450,7 +3450,7 @@ var Price = newStyled.p(templateObject_2$1B || (templateObject_2$1B = __makeTemp
|
|
|
3450
3450
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3451
3451
|
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3452
3452
|
});
|
|
3453
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3453
|
+
var TagContainer = newStyled.div(templateObject_3$1f || (templateObject_3$1f = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3454
3454
|
var _b;
|
|
3455
3455
|
var size = _a.size;
|
|
3456
3456
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3481,11 +3481,11 @@ var PriceLabel$1 = function (_a) {
|
|
|
3481
3481
|
: exports.ComponentSize.XSmall;
|
|
3482
3482
|
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3483
3483
|
};
|
|
3484
|
-
return (jsxRuntime.jsxs(Container$
|
|
3484
|
+
return (jsxRuntime.jsxs(Container$1o, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3485
3485
|
};
|
|
3486
|
-
var templateObject_1$
|
|
3486
|
+
var templateObject_1$2g, templateObject_2$1C, templateObject_3$1f;
|
|
3487
3487
|
|
|
3488
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3488
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3489
3489
|
var PriceLabelV2$1 = function (_a) {
|
|
3490
3490
|
var _b;
|
|
3491
3491
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3538,7 +3538,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3538
3538
|
var savetoString = saveto.toFixed(2);
|
|
3539
3539
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3540
3540
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3541
|
-
return (jsxRuntime.jsxs(Container$
|
|
3541
|
+
return (jsxRuntime.jsxs(Container$1o, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3542
3542
|
? finalPriceArray[0]
|
|
3543
3543
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3544
3544
|
marginTop: '-6px',
|
|
@@ -3554,11 +3554,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3554
3554
|
lineHeight: '22px',
|
|
3555
3555
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3556
3556
|
};
|
|
3557
|
-
var templateObject_1$
|
|
3557
|
+
var templateObject_1$2f;
|
|
3558
3558
|
|
|
3559
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3560
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3561
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3559
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3560
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3561
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1e || (templateObject_3$1e = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3562
3562
|
var PriceLabelV3 = function (_a) {
|
|
3563
3563
|
var _b;
|
|
3564
3564
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -3613,7 +3613,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3613
3613
|
return null;
|
|
3614
3614
|
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
3615
3615
|
};
|
|
3616
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$
|
|
3616
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$1o, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$1o, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer$2, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3617
3617
|
marginTop: '-5px',
|
|
3618
3618
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3619
3619
|
marginTop: '-6px',
|
|
@@ -3629,9 +3629,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3629
3629
|
lineHeight: '22px',
|
|
3630
3630
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3631
3631
|
};
|
|
3632
|
-
var templateObject_1$
|
|
3632
|
+
var templateObject_1$2e, templateObject_2$1B, templateObject_3$1e;
|
|
3633
3633
|
|
|
3634
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3634
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3635
3635
|
var PriceLabel = function (_a) {
|
|
3636
3636
|
var _b;
|
|
3637
3637
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3659,15 +3659,15 @@ var PriceLabel = function (_a) {
|
|
|
3659
3659
|
};
|
|
3660
3660
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3661
3661
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3662
|
-
return (jsxRuntime.jsxs(Container$
|
|
3662
|
+
return (jsxRuntime.jsxs(Container$1o, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
3663
3663
|
marginTop: '-5px',
|
|
3664
3664
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, "data-testid": "test-price-final-product-price'" }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3665
3665
|
marginTop: '-6px',
|
|
3666
3666
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3667
3667
|
};
|
|
3668
|
-
var templateObject_1$
|
|
3668
|
+
var templateObject_1$2d;
|
|
3669
3669
|
|
|
3670
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3670
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3671
3671
|
var PriceLabelV2 = function (_a) {
|
|
3672
3672
|
var _b;
|
|
3673
3673
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.isClubOffer, isClubOffer = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "isClubOffer"]);
|
|
@@ -3698,13 +3698,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
3698
3698
|
var finalPriceString = finalPriceArray[0]
|
|
3699
3699
|
? finalPriceArray[0]
|
|
3700
3700
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3701
|
-
return (jsxRuntime.jsxs(Container$
|
|
3701
|
+
return (jsxRuntime.jsxs(Container$1o, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3702
3702
|
};
|
|
3703
|
-
var templateObject_1$
|
|
3703
|
+
var templateObject_1$2c;
|
|
3704
3704
|
|
|
3705
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3706
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3707
|
-
var templateObject_1$
|
|
3705
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __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"])));
|
|
3706
|
+
var ImgWrapper = newStyled.div(templateObject_2$1A || (templateObject_2$1A = __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"])));
|
|
3707
|
+
var templateObject_1$2b, templateObject_2$1A;
|
|
3708
3708
|
|
|
3709
3709
|
var ClubPriceMemberLabel = function (_a) {
|
|
3710
3710
|
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"]);
|
|
@@ -3713,7 +3713,7 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3713
3713
|
return (jsxRuntime.jsx("div", { children: isClub ? (jsxRuntime.jsxs(ContainerWrapper$2, __assign$1({ id: "priceMemberLabelWrapper" }, { children: [PriceComponent, jsxRuntime.jsx(ImgWrapper, __assign$1({ id: "priceMemberLabelImgWrapper" }, { children: icon }), void 0)] }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: PriceComponent }, void 0)) }, void 0));
|
|
3714
3714
|
};
|
|
3715
3715
|
|
|
3716
|
-
var Container$
|
|
3716
|
+
var Container$1n = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __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) {
|
|
3717
3717
|
var height = _a.height;
|
|
3718
3718
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3719
3719
|
}, function (_a) {
|
|
@@ -3738,11 +3738,11 @@ var Container$1k = newStyled.div(templateObject_1$29 || (templateObject_1$29 = _
|
|
|
3738
3738
|
var SkeletonBox = function (_a) {
|
|
3739
3739
|
var width = _a.width, height = _a.height;
|
|
3740
3740
|
var theme = useTheme();
|
|
3741
|
-
return jsxRuntime.jsx(Container$
|
|
3741
|
+
return jsxRuntime.jsx(Container$1n, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3742
3742
|
};
|
|
3743
|
-
var templateObject_1$
|
|
3743
|
+
var templateObject_1$2a;
|
|
3744
3744
|
|
|
3745
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3745
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$29 || (templateObject_1$29 = __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) {
|
|
3746
3746
|
var width = _a.width;
|
|
3747
3747
|
return width;
|
|
3748
3748
|
}, function (_a) {
|
|
@@ -3758,7 +3758,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$28 || (templateObject_1$28
|
|
|
3758
3758
|
var opacity = _a.opacity;
|
|
3759
3759
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3760
3760
|
});
|
|
3761
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3761
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1z || (templateObject_2$1z = __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) {
|
|
3762
3762
|
var width = _a.width;
|
|
3763
3763
|
return width;
|
|
3764
3764
|
}, function (_a) {
|
|
@@ -3771,7 +3771,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1y || (templateObject_2$
|
|
|
3771
3771
|
var opacity = _a.opacity;
|
|
3772
3772
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3773
3773
|
});
|
|
3774
|
-
var templateObject_1$
|
|
3774
|
+
var templateObject_1$29, templateObject_2$1z;
|
|
3775
3775
|
|
|
3776
3776
|
/* eslint-disable no-undef */
|
|
3777
3777
|
var cache = new Map();
|
|
@@ -3947,7 +3947,7 @@ var buildImageUrl = function (_a) {
|
|
|
3947
3947
|
}
|
|
3948
3948
|
};
|
|
3949
3949
|
|
|
3950
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3950
|
+
var Img$1 = newStyled.img(templateObject_1$28 || (templateObject_1$28 = __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; });
|
|
3951
3951
|
var Image$3 = function (_a) {
|
|
3952
3952
|
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"]);
|
|
3953
3953
|
var config = useTheme().config;
|
|
@@ -3956,15 +3956,15 @@ var Image$3 = function (_a) {
|
|
|
3956
3956
|
: src;
|
|
3957
3957
|
return (jsxRuntime.jsx(Img$1, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3958
3958
|
};
|
|
3959
|
-
var templateObject_1$
|
|
3959
|
+
var templateObject_1$28;
|
|
3960
3960
|
|
|
3961
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3962
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3963
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3961
|
+
var LabelWrapper = newStyled.label(templateObject_1$27 || (templateObject_1$27 = __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"])));
|
|
3962
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __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"])));
|
|
3963
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1d || (templateObject_3$1d = __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) {
|
|
3964
3964
|
var $color = _a.$color;
|
|
3965
3965
|
return $color;
|
|
3966
3966
|
});
|
|
3967
|
-
var templateObject_1$
|
|
3967
|
+
var templateObject_1$27, templateObject_2$1y, templateObject_3$1d;
|
|
3968
3968
|
|
|
3969
3969
|
var ToggleComponent = function (_a) {
|
|
3970
3970
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c;
|
|
@@ -4798,10 +4798,10 @@ function jsxs(type, props, key) {
|
|
|
4798
4798
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4799
4799
|
// `variants` styles that are consistent through all themes.
|
|
4800
4800
|
var TAGS = {
|
|
4801
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4802
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4803
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4804
|
-
display1: newStyled.h1(templateObject_4$
|
|
4801
|
+
hero1: newStyled.h1(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject([""], [""]))),
|
|
4802
|
+
hero2: newStyled.h2(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject([""], [""]))),
|
|
4803
|
+
hero3: newStyled.h3(templateObject_3$1c || (templateObject_3$1c = __makeTemplateObject([""], [""]))),
|
|
4804
|
+
display1: newStyled.h1(templateObject_4$Z || (templateObject_4$Z = __makeTemplateObject([""], [""]))),
|
|
4805
4805
|
display2: newStyled.h2(templateObject_5$J || (templateObject_5$J = __makeTemplateObject([""], [""]))),
|
|
4806
4806
|
display3: newStyled.h3(templateObject_6$E || (templateObject_6$E = __makeTemplateObject([""], [""]))),
|
|
4807
4807
|
heading1: newStyled.h1(templateObject_7$v || (templateObject_7$v = __makeTemplateObject([""], [""]))),
|
|
@@ -4934,17 +4934,17 @@ var DEFAULTS = {
|
|
|
4934
4934
|
size: 'regular',
|
|
4935
4935
|
},
|
|
4936
4936
|
};
|
|
4937
|
-
var templateObject_1$
|
|
4937
|
+
var templateObject_1$26, templateObject_2$1x, templateObject_3$1c, templateObject_4$Z, templateObject_5$J, templateObject_6$E, templateObject_7$v, templateObject_8$n, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4938
4938
|
|
|
4939
|
-
var Container$
|
|
4940
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4941
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4942
|
-
var Label$7 = newStyled.div(templateObject_4$
|
|
4939
|
+
var Container$1m = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __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"])));
|
|
4940
|
+
var Card$4 = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __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"])));
|
|
4941
|
+
var Tag$2 = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __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"])));
|
|
4942
|
+
var Label$7 = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
4943
4943
|
var Check$1 = newStyled.div(templateObject_5$I || (templateObject_5$I = __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"])));
|
|
4944
4944
|
var DiscountContainer$1 = newStyled.div(templateObject_6$D || (templateObject_6$D = __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"])));
|
|
4945
4945
|
var PackSelectorV2 = function (_a) {
|
|
4946
4946
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4947
|
-
return (jsxRuntime.jsx(Container$
|
|
4947
|
+
return (jsxRuntime.jsx(Container$1m, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4948
4948
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4949
4949
|
}) }), void 0));
|
|
4950
4950
|
};
|
|
@@ -4966,27 +4966,27 @@ var PackCard$1 = function (_a) {
|
|
|
4966
4966
|
currency: currencyCode || 'USD',
|
|
4967
4967
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4968
4968
|
};
|
|
4969
|
-
var templateObject_1$
|
|
4969
|
+
var templateObject_1$25, templateObject_2$1w, templateObject_3$1b, templateObject_4$Y, templateObject_5$I, templateObject_6$D;
|
|
4970
4970
|
|
|
4971
|
-
var Container$
|
|
4972
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4971
|
+
var Container$1l = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4972
|
+
var DropContainer = newStyled.div(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4973
4973
|
var DropList = function (_a) {
|
|
4974
4974
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4975
|
-
return (jsxRuntime.jsx(Container$
|
|
4975
|
+
return (jsxRuntime.jsx(Container$1l, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4976
4976
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4977
4977
|
}) }, void 0));
|
|
4978
4978
|
};
|
|
4979
|
-
var templateObject_1$
|
|
4979
|
+
var templateObject_1$24, templateObject_2$1v;
|
|
4980
4980
|
|
|
4981
4981
|
var DROPS_TOTAL = 5;
|
|
4982
|
-
var Container$
|
|
4983
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4984
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4982
|
+
var Container$1k = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4983
|
+
var Title$b = newStyled.p(templateObject_2$1u || (templateObject_2$1u = __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"])));
|
|
4984
|
+
var Description$3 = newStyled.p(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-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"])));
|
|
4985
4985
|
var AbsorbencyLevel = function (_a) {
|
|
4986
4986
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4987
|
-
return (jsxRuntime.jsxs(Container$
|
|
4987
|
+
return (jsxRuntime.jsxs(Container$1k, { children: [jsxRuntime.jsx(Title$b, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4988
4988
|
};
|
|
4989
|
-
var templateObject_1$
|
|
4989
|
+
var templateObject_1$23, templateObject_2$1u, templateObject_3$1a;
|
|
4990
4990
|
|
|
4991
4991
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4992
4992
|
`),"","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(`
|
|
@@ -5062,7 +5062,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5062
5062
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5063
5063
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5064
5064
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5065
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5065
|
+
var StyledContent$1 = newStyled.button(templateObject_1$22 || (templateObject_1$22 = __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"])));
|
|
5066
5066
|
var Accordion$1 = function (_a) {
|
|
5067
5067
|
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;
|
|
5068
5068
|
var theme = useTheme();
|
|
@@ -5086,9 +5086,9 @@ var Accordion$1 = function (_a) {
|
|
|
5086
5086
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5087
5087
|
} }), void 0));
|
|
5088
5088
|
};
|
|
5089
|
-
var templateObject_1$
|
|
5089
|
+
var templateObject_1$22;
|
|
5090
5090
|
|
|
5091
|
-
var Container$
|
|
5091
|
+
var Container$1j = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5092
5092
|
var AccordionOptions = function (_a) {
|
|
5093
5093
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5094
5094
|
var _b = React$2.useState({
|
|
@@ -5101,7 +5101,7 @@ var AccordionOptions = function (_a) {
|
|
|
5101
5101
|
}
|
|
5102
5102
|
return false;
|
|
5103
5103
|
};
|
|
5104
|
-
return (jsxRuntime.jsx(Container$
|
|
5104
|
+
return (jsxRuntime.jsx(Container$1j, { children: accordions.map(function (accordion, index) {
|
|
5105
5105
|
var forceOpenValue = getForceOpen(index);
|
|
5106
5106
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5107
5107
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5112,7 +5112,7 @@ var AccordionOptions = function (_a) {
|
|
|
5112
5112
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5113
5113
|
}) }, void 0));
|
|
5114
5114
|
};
|
|
5115
|
-
var templateObject_1$
|
|
5115
|
+
var templateObject_1$21;
|
|
5116
5116
|
|
|
5117
5117
|
/**
|
|
5118
5118
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5248,27 +5248,27 @@ var isValidDate = function (value) {
|
|
|
5248
5248
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5249
5249
|
};
|
|
5250
5250
|
|
|
5251
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5252
|
-
var FlexContainer$4 = newStyled.div(templateObject_2$
|
|
5253
|
-
var templateObject_1$
|
|
5251
|
+
var Bold = newStyled.span(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5252
|
+
var FlexContainer$4 = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __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"])));
|
|
5253
|
+
var templateObject_1$20, templateObject_2$1t;
|
|
5254
5254
|
|
|
5255
|
-
var Container$
|
|
5255
|
+
var Container$1i = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __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) {
|
|
5256
5256
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5257
5257
|
return width;
|
|
5258
5258
|
}, function (_a) {
|
|
5259
5259
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5260
5260
|
return height;
|
|
5261
5261
|
});
|
|
5262
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5263
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5264
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5262
|
+
var FlexCentered = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __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"])));
|
|
5263
|
+
var LeftSide = newStyled.div(templateObject_3$19 || (templateObject_3$19 = __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"])));
|
|
5264
|
+
var RightSide = newStyled.div(templateObject_4$X || (templateObject_4$X = __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"])));
|
|
5265
5265
|
var FlexStart = newStyled.div(templateObject_5$H || (templateObject_5$H = __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"])));
|
|
5266
|
-
var templateObject_1$
|
|
5266
|
+
var templateObject_1$1$, templateObject_2$1s, templateObject_3$19, templateObject_4$X, templateObject_5$H;
|
|
5267
5267
|
|
|
5268
5268
|
var CouponCard = function (_a) {
|
|
5269
5269
|
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;
|
|
5270
5270
|
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5271
|
-
return (jsxRuntime.jsxs(Container$
|
|
5271
|
+
return (jsxRuntime.jsxs(Container$1i, __assign$1({ height: height, width: width }, { children: [jsxRuntime.jsx(LeftSide, { children: jsxRuntime.jsx(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxRuntime.jsxs(RightSide, { children: [jsxRuntime.jsxs(FlexStart, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsxRuntime.jsx(FlexCentered, { children: !showCoupon ? (jsxRuntime.jsx(ButtonPrimary, { type: "button", text: btnText, wide: true, size: exports.ComponentSize.Large, onClick: function () {
|
|
5272
5272
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5273
5273
|
setShowCoupon(function (prev) { return !prev; });
|
|
5274
5274
|
} }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: exports.ComponentSize.Small, icon: {
|
|
@@ -5319,14 +5319,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5319
5319
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5320
5320
|
};
|
|
5321
5321
|
|
|
5322
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5323
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5322
|
+
var ErrorText = newStyled.h3(templateObject_1$1_ || (templateObject_1$1_ = __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; });
|
|
5323
|
+
var ErrorContainer = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __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"])));
|
|
5324
5324
|
var Error$1 = function (_a) {
|
|
5325
5325
|
var error = _a.error;
|
|
5326
5326
|
var theme = useTheme();
|
|
5327
5327
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5328
5328
|
};
|
|
5329
|
-
var templateObject_1$
|
|
5329
|
+
var templateObject_1$1_, templateObject_2$1r;
|
|
5330
5330
|
|
|
5331
5331
|
var BaseSelectButton = function (_a) {
|
|
5332
5332
|
var children = _a.children, as = _a.as;
|
|
@@ -5343,7 +5343,7 @@ function BaseSelectOption(_a) {
|
|
|
5343
5343
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5344
5344
|
}
|
|
5345
5345
|
|
|
5346
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5346
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5347
5347
|
function BaseSelect(_a) {
|
|
5348
5348
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5349
5349
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5353,7 +5353,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5353
5353
|
Options: BaseSelectOptions,
|
|
5354
5354
|
Option: BaseSelectOption,
|
|
5355
5355
|
});
|
|
5356
|
-
var templateObject_1$
|
|
5356
|
+
var templateObject_1$1Z;
|
|
5357
5357
|
|
|
5358
5358
|
var CustomButton = newStyled.button(function (_a) {
|
|
5359
5359
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5392,7 +5392,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5392
5392
|
});
|
|
5393
5393
|
});
|
|
5394
5394
|
// TODO Remove this when we find the real solution
|
|
5395
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5395
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5396
5396
|
var open = _a.open;
|
|
5397
5397
|
return open &&
|
|
5398
5398
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5412,7 +5412,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5412
5412
|
} }), void 0));
|
|
5413
5413
|
};
|
|
5414
5414
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5415
|
-
var templateObject_1$
|
|
5415
|
+
var templateObject_1$1Y;
|
|
5416
5416
|
|
|
5417
5417
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5418
5418
|
var theme = _a.theme;
|
|
@@ -5579,7 +5579,7 @@ var CustomCheckboxStyles = {
|
|
|
5579
5579
|
},
|
|
5580
5580
|
};
|
|
5581
5581
|
|
|
5582
|
-
var Container$
|
|
5582
|
+
var Container$1h = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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"])));
|
|
5583
5583
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5584
5584
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5585
5585
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5590,7 +5590,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5590
5590
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5591
5591
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5592
5592
|
]; });
|
|
5593
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5593
|
+
var Input$5 = newStyled.input(templateObject_2$1q || (templateObject_2$1q = __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) {
|
|
5594
5594
|
var disabled = _a.disabled;
|
|
5595
5595
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5596
5596
|
});
|
|
@@ -5604,9 +5604,9 @@ var Checkbox = function (_a) {
|
|
|
5604
5604
|
}
|
|
5605
5605
|
onChange(e.target.checked);
|
|
5606
5606
|
};
|
|
5607
|
-
return (jsxRuntime.jsxs(Container$
|
|
5607
|
+
return (jsxRuntime.jsxs(Container$1h, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$6, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5608
5608
|
};
|
|
5609
|
-
var templateObject_1$
|
|
5609
|
+
var templateObject_1$1X, templateObject_2$1q;
|
|
5610
5610
|
|
|
5611
5611
|
var CustomOption = newStyled.li(function (_a) {
|
|
5612
5612
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5655,9 +5655,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5655
5655
|
Option: BaseDropdownOption,
|
|
5656
5656
|
});
|
|
5657
5657
|
|
|
5658
|
-
var Container$
|
|
5659
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5660
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5658
|
+
var Container$1g = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject([""], [""])));
|
|
5659
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1p || (templateObject_2$1p = __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"])));
|
|
5660
|
+
var SelectedOption = newStyled.span(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5661
5661
|
var fontWeight = _a.fontWeight;
|
|
5662
5662
|
return fontWeight || '';
|
|
5663
5663
|
});
|
|
@@ -5690,10 +5690,10 @@ function SimpleDropdown(_a) {
|
|
|
5690
5690
|
}
|
|
5691
5691
|
setSelectedValue(value);
|
|
5692
5692
|
}, [value, options, initialValue]);
|
|
5693
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5693
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1g : React$2.Fragment;
|
|
5694
5694
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5695
5695
|
}
|
|
5696
|
-
var templateObject_1$
|
|
5696
|
+
var templateObject_1$1W, templateObject_2$1p, templateObject_3$18;
|
|
5697
5697
|
|
|
5698
5698
|
/* base styles & size variants */
|
|
5699
5699
|
var CustomRadioStyles$2 = {
|
|
@@ -5758,9 +5758,9 @@ var ContainerStyles$2 = {
|
|
|
5758
5758
|
},
|
|
5759
5759
|
};
|
|
5760
5760
|
|
|
5761
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5762
|
-
var Container$
|
|
5763
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5761
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5762
|
+
var Container$1f = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5763
|
+
var Input$4 = newStyled.input(templateObject_2$1o || (templateObject_2$1o = __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) {
|
|
5764
5764
|
var disabled = _a.disabled;
|
|
5765
5765
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5766
5766
|
});
|
|
@@ -5768,14 +5768,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5768
5768
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5769
5769
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5770
5770
|
]; });
|
|
5771
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5771
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5772
5772
|
var theme = _a.theme;
|
|
5773
5773
|
return theme.component.radio.textSize;
|
|
5774
5774
|
}, function (_a) {
|
|
5775
5775
|
var theme = _a.theme;
|
|
5776
5776
|
return theme.component.radio.lineHeight;
|
|
5777
5777
|
});
|
|
5778
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5778
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$W || (templateObject_4$W = __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) {
|
|
5779
5779
|
var theme = _a.theme;
|
|
5780
5780
|
return theme.component.radio.textSize;
|
|
5781
5781
|
}, function (_a) {
|
|
@@ -5792,9 +5792,9 @@ var RadioInput = function (_a) {
|
|
|
5792
5792
|
var value = event.currentTarget.value;
|
|
5793
5793
|
onChange({ value: value, label: label });
|
|
5794
5794
|
};
|
|
5795
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5795
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$1f, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsxs(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5796
5796
|
};
|
|
5797
|
-
var templateObject_1$
|
|
5797
|
+
var templateObject_1$1V, templateObject_2$1o, templateObject_3$17, templateObject_4$W;
|
|
5798
5798
|
|
|
5799
5799
|
var useOnClickOutside = function (ref, handler) {
|
|
5800
5800
|
React$2.useEffect(function () {
|
|
@@ -5887,7 +5887,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5887
5887
|
}
|
|
5888
5888
|
};
|
|
5889
5889
|
|
|
5890
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5890
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __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) {
|
|
5891
5891
|
var position = _a.position;
|
|
5892
5892
|
return getWrapperFlexDirection(position);
|
|
5893
5893
|
}, function (_a) {
|
|
@@ -5897,7 +5897,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __ma
|
|
|
5897
5897
|
var disableHover = _a.disableHover;
|
|
5898
5898
|
return (disableHover ? 0 : 1);
|
|
5899
5899
|
});
|
|
5900
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5900
|
+
var TooltipContainer = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __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) {
|
|
5901
5901
|
var position = _a.position;
|
|
5902
5902
|
return getContainerFlexDirection(position);
|
|
5903
5903
|
}, function (_a) {
|
|
@@ -5925,14 +5925,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1m || (templateObject_2$1m
|
|
|
5925
5925
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5926
5926
|
return actual === expected ? margin : '0';
|
|
5927
5927
|
};
|
|
5928
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5928
|
+
var ContentWrapper = newStyled.div(templateObject_3$16 || (templateObject_3$16 = __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) {
|
|
5929
5929
|
var borderColor = _a.borderColor;
|
|
5930
5930
|
return borderColor;
|
|
5931
5931
|
}, function (_a) {
|
|
5932
5932
|
var backgroundColor = _a.backgroundColor;
|
|
5933
5933
|
return backgroundColor;
|
|
5934
5934
|
});
|
|
5935
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5935
|
+
var TooltipText = newStyled.div(templateObject_4$V || (templateObject_4$V = __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) {
|
|
5936
5936
|
var theme = _a.theme;
|
|
5937
5937
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5938
5938
|
}, function (_a) {
|
|
@@ -5952,7 +5952,7 @@ var CloseToolTip = newStyled.button(templateObject_8$m || (templateObject_8$m =
|
|
|
5952
5952
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5953
5953
|
return right;
|
|
5954
5954
|
});
|
|
5955
|
-
var templateObject_1$
|
|
5955
|
+
var templateObject_1$1U, templateObject_2$1n, templateObject_3$16, templateObject_4$V, templateObject_5$G, templateObject_6$C, templateObject_7$u, templateObject_8$m;
|
|
5956
5956
|
|
|
5957
5957
|
var Tooltip = function (_a) {
|
|
5958
5958
|
var _b;
|
|
@@ -5995,8 +5995,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5995
5995
|
};
|
|
5996
5996
|
};
|
|
5997
5997
|
|
|
5998
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
5999
|
-
var ContainerBase$3 = newStyled.div(templateObject_2$
|
|
5998
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5999
|
+
var ContainerBase$3 = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __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) {
|
|
6000
6000
|
var selected = _a.selected, theme = _a.theme;
|
|
6001
6001
|
return selected
|
|
6002
6002
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6010,11 +6010,11 @@ var ContainerBase$3 = newStyled.div(templateObject_2$1l || (templateObject_2$1l
|
|
|
6010
6010
|
var theme = _a.theme;
|
|
6011
6011
|
return theme.colors.pallete.primary.color;
|
|
6012
6012
|
});
|
|
6013
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$
|
|
6013
|
+
var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$15 || (templateObject_3$15 = __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) {
|
|
6014
6014
|
var onClick = _a.onClick;
|
|
6015
6015
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6016
6016
|
});
|
|
6017
|
-
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$
|
|
6017
|
+
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6018
6018
|
var SubscriptionHeader$3 = newStyled.div(templateObject_5$F || (templateObject_5$F = __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) {
|
|
6019
6019
|
var theme = _a.theme;
|
|
6020
6020
|
return theme.colors.shades[200].color;
|
|
@@ -6032,8 +6032,8 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6032
6032
|
var selected = _a.selected, theme = _a.theme;
|
|
6033
6033
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6034
6034
|
});
|
|
6035
|
-
var Container$
|
|
6036
|
-
var templateObject_1$
|
|
6035
|
+
var Container$1e = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6036
|
+
var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$F, templateObject_6$B, templateObject_7$t, templateObject_8$l, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6037
6037
|
|
|
6038
6038
|
var radioIds$2 = {
|
|
6039
6039
|
oneTime: {
|
|
@@ -6083,17 +6083,17 @@ var Autoship = function (_a) {
|
|
|
6083
6083
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6084
6084
|
};
|
|
6085
6085
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6086
|
-
return (jsxRuntime.jsxs(Container$
|
|
6086
|
+
return (jsxRuntime.jsxs(Container$1e, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SinglePurchaseContainer$3, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$2.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds$2.oneTime.id, id: radioIds$2.oneTime.id, value: radioIds$2.oneTime.id, checked: radioIds$2.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer$3, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader$3, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds$2.autoship.id, id: radioIds$2.autoship.id, value: radioIds$2.autoship.id, checked: radioIds$2.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer$3, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$3, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6087
6087
|
? benefitsColor.selected
|
|
6088
6088
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6089
6089
|
};
|
|
6090
6090
|
|
|
6091
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6091
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6092
6092
|
var theme = _a.theme;
|
|
6093
6093
|
return theme.name === 'TheSpaDr' &&
|
|
6094
6094
|
"\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 ";
|
|
6095
6095
|
});
|
|
6096
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
6096
|
+
var DiscountTag$2 = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __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) {
|
|
6097
6097
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6098
6098
|
return isSelected
|
|
6099
6099
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6109,7 +6109,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6109
6109
|
}
|
|
6110
6110
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6111
6111
|
};
|
|
6112
|
-
var ContainerBase$2 = newStyled.div(templateObject_3$
|
|
6112
|
+
var ContainerBase$2 = newStyled.div(templateObject_3$14 || (templateObject_3$14 = __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) {
|
|
6113
6113
|
var selected = _a.selected, theme = _a.theme;
|
|
6114
6114
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6115
6115
|
}, function (_a) {
|
|
@@ -6121,7 +6121,7 @@ var ContainerBase$2 = newStyled.div(templateObject_3$13 || (templateObject_3$13
|
|
|
6121
6121
|
var theme = _a.theme;
|
|
6122
6122
|
return theme.colors.pallete.primary.color;
|
|
6123
6123
|
});
|
|
6124
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
6124
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$T || (templateObject_4$T = __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) {
|
|
6125
6125
|
var onClick = _a.onClick;
|
|
6126
6126
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6127
6127
|
});
|
|
@@ -6141,12 +6141,12 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_11$6 || (templateOb
|
|
|
6141
6141
|
var selected = _a.selected, theme = _a.theme;
|
|
6142
6142
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6143
6143
|
});
|
|
6144
|
-
var Container$
|
|
6144
|
+
var Container$1d = newStyled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6145
6145
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6146
6146
|
var theme = _a.theme;
|
|
6147
6147
|
return theme.component.autoship.tooltip.margin;
|
|
6148
6148
|
});
|
|
6149
|
-
var templateObject_1$
|
|
6149
|
+
var templateObject_1$1S, templateObject_2$1l, templateObject_3$14, templateObject_4$T, templateObject_5$E, templateObject_6$A, templateObject_7$s, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6150
6150
|
|
|
6151
6151
|
var radioIds$1 = {
|
|
6152
6152
|
oneTime: {
|
|
@@ -6206,7 +6206,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6206
6206
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6207
6207
|
};
|
|
6208
6208
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6209
|
-
return (jsxRuntime.jsxs(Container$
|
|
6209
|
+
return (jsxRuntime.jsxs(Container$1d, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$2, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag$2, __assign$1({ isSelected: radioIds$1.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader$2, { children: [jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$1.autoship.id) }, void 0), jsxRuntime.jsx(TooltipWrapper$1, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsxRuntime.jsx(StyledPrice$2, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer$2, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$2, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
6210
6210
|
? benefitsColor.selected
|
|
6211
6211
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$2, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(FlexContainer$2, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer$2, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$2, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6212
6212
|
};
|
|
@@ -6224,13 +6224,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6224
6224
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6225
6225
|
_a$2);
|
|
6226
6226
|
|
|
6227
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6228
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6229
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6230
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6227
|
+
var CustomerDetails = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject([""], [""])));
|
|
6228
|
+
var CustomerInfo = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __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"])));
|
|
6229
|
+
var Name = newStyled.h4(templateObject_3$13 || (templateObject_3$13 = __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"])));
|
|
6230
|
+
var StarIconContainer = newStyled.div(templateObject_4$S || (templateObject_4$S = __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"])));
|
|
6231
6231
|
var Description$2 = newStyled.p(templateObject_5$D || (templateObject_5$D = __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"])));
|
|
6232
6232
|
var ReviewDays = newStyled.span(templateObject_6$z || (templateObject_6$z = __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"])));
|
|
6233
|
-
var templateObject_1$
|
|
6233
|
+
var templateObject_1$1R, templateObject_2$1k, templateObject_3$13, templateObject_4$S, templateObject_5$D, templateObject_6$z;
|
|
6234
6234
|
|
|
6235
6235
|
var NameWithStars = function (_a) {
|
|
6236
6236
|
var name = _a.name, size = _a.size;
|
|
@@ -6248,10 +6248,10 @@ var ResultFeedback = function (_a) {
|
|
|
6248
6248
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6249
6249
|
};
|
|
6250
6250
|
|
|
6251
|
-
var Container$
|
|
6252
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6253
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6254
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6251
|
+
var Container$1c = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __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; });
|
|
6252
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __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"])));
|
|
6253
|
+
var ImageCard = newStyled.div(templateObject_3$12 || (templateObject_3$12 = __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; });
|
|
6254
|
+
var UserInfoText = newStyled.div(templateObject_4$R || (templateObject_4$R = __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) {
|
|
6255
6255
|
var theme = _a.theme;
|
|
6256
6256
|
return theme.colors.pallete.secondary.color;
|
|
6257
6257
|
}, function (_a) {
|
|
@@ -6261,7 +6261,7 @@ var UserInfoText = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __m
|
|
|
6261
6261
|
var theme = _a.theme, size = _a.size;
|
|
6262
6262
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6263
6263
|
});
|
|
6264
|
-
var templateObject_1$
|
|
6264
|
+
var templateObject_1$1Q, templateObject_2$1j, templateObject_3$12, templateObject_4$R;
|
|
6265
6265
|
|
|
6266
6266
|
/* base styles & size variants */
|
|
6267
6267
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6336,10 +6336,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6336
6336
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6337
6337
|
var infoText = buildInfoText(name, age, months);
|
|
6338
6338
|
var Component = componentByVariant[variant];
|
|
6339
|
-
return (jsxRuntime.jsxs(Container$
|
|
6339
|
+
return (jsxRuntime.jsxs(Container$1c, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6340
6340
|
};
|
|
6341
6341
|
|
|
6342
|
-
var Section = newStyled.div(templateObject_1$
|
|
6342
|
+
var Section = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __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) {
|
|
6343
6343
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6344
6344
|
});
|
|
6345
6345
|
var CardHeader = function (_a) {
|
|
@@ -6350,16 +6350,16 @@ var CardFooter = function (_a) {
|
|
|
6350
6350
|
var children = _a.children;
|
|
6351
6351
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6352
6352
|
};
|
|
6353
|
-
var templateObject_1$
|
|
6353
|
+
var templateObject_1$1P;
|
|
6354
6354
|
|
|
6355
|
-
var Body = newStyled.div(templateObject_1$
|
|
6355
|
+
var Body = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __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"])));
|
|
6356
6356
|
var CardBody$1 = function (_a) {
|
|
6357
6357
|
var children = _a.children;
|
|
6358
6358
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6359
6359
|
};
|
|
6360
|
-
var templateObject_1$
|
|
6360
|
+
var templateObject_1$1O;
|
|
6361
6361
|
|
|
6362
|
-
var Container$
|
|
6362
|
+
var Container$1b = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __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) {
|
|
6363
6363
|
var flex = _a.flex;
|
|
6364
6364
|
return flex &&
|
|
6365
6365
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6374,23 +6374,23 @@ var Container$18 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = _
|
|
|
6374
6374
|
var Card$2 = function (_a) {
|
|
6375
6375
|
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;
|
|
6376
6376
|
var theme = useTheme();
|
|
6377
|
-
return (jsxRuntime.jsx(Container$
|
|
6377
|
+
return (jsxRuntime.jsx(Container$1b, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6378
6378
|
};
|
|
6379
6379
|
var Card$3 = Object.assign(Card$2, {
|
|
6380
6380
|
Header: CardHeader,
|
|
6381
6381
|
Footer: CardFooter,
|
|
6382
6382
|
Body: CardBody$1,
|
|
6383
6383
|
});
|
|
6384
|
-
var templateObject_1$
|
|
6384
|
+
var templateObject_1$1N;
|
|
6385
6385
|
|
|
6386
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6387
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6388
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6386
|
+
var StyledWrapper = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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"])));
|
|
6387
|
+
var StyledContainer = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __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"])));
|
|
6388
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$11 || (templateObject_3$11 = __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) {
|
|
6389
6389
|
var color = _a.color;
|
|
6390
6390
|
return color;
|
|
6391
6391
|
});
|
|
6392
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6393
|
-
var templateObject_1$
|
|
6392
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$Q || (templateObject_4$Q = __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"])));
|
|
6393
|
+
var templateObject_1$1M, templateObject_2$1i, templateObject_3$11, templateObject_4$Q;
|
|
6394
6394
|
|
|
6395
6395
|
var Minimalistic = function (_a) {
|
|
6396
6396
|
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;
|
|
@@ -6398,28 +6398,28 @@ var Minimalistic = function (_a) {
|
|
|
6398
6398
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6399
6399
|
};
|
|
6400
6400
|
|
|
6401
|
-
var Container$
|
|
6402
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6403
|
-
var Details$1 = newStyled.span(templateObject_3
|
|
6404
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6401
|
+
var Container$1a = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6402
|
+
var Title$9 = newStyled.h1(templateObject_2$1h || (templateObject_2$1h = __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; });
|
|
6403
|
+
var Details$1 = newStyled.span(templateObject_3$10 || (templateObject_3$10 = __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; });
|
|
6404
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$P || (templateObject_4$P = __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"])));
|
|
6405
6405
|
var Simple = function (_a) {
|
|
6406
6406
|
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;
|
|
6407
6407
|
var theme = useTheme();
|
|
6408
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
6408
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$1a, { children: [jsxRuntime.jsx(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6409
6409
|
};
|
|
6410
|
-
var templateObject_1$
|
|
6410
|
+
var templateObject_1$1L, templateObject_2$1h, templateObject_3$10, templateObject_4$P;
|
|
6411
6411
|
|
|
6412
6412
|
var Bundle = {
|
|
6413
6413
|
Minimalistic: Minimalistic,
|
|
6414
6414
|
Simple: Simple,
|
|
6415
6415
|
};
|
|
6416
6416
|
|
|
6417
|
-
var Container$
|
|
6417
|
+
var Container$19 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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) {
|
|
6418
6418
|
var displayBNPL = _a.displayBNPL;
|
|
6419
6419
|
return (displayBNPL ? 'flex' : 'none');
|
|
6420
6420
|
});
|
|
6421
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6422
|
-
var IconWrapper$1 = newStyled.div(templateObject_3
|
|
6421
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6422
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$$ || (templateObject_3$$ = __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"])));
|
|
6423
6423
|
var BuyNowPayLater = function (_a) {
|
|
6424
6424
|
var _b;
|
|
6425
6425
|
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;
|
|
@@ -6429,43 +6429,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
6429
6429
|
console.error('Icon', iconName, 'not found');
|
|
6430
6430
|
return null;
|
|
6431
6431
|
}
|
|
6432
|
-
return (jsxRuntime.jsx(Container$
|
|
6432
|
+
return (jsxRuntime.jsx(Container$19, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6433
6433
|
};
|
|
6434
|
-
var templateObject_1$
|
|
6434
|
+
var templateObject_1$1K, templateObject_2$1g, templateObject_3$$;
|
|
6435
6435
|
|
|
6436
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6436
|
+
var Text$6 = newStyled.span(templateObject_1$1J || (templateObject_1$1J = __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; });
|
|
6437
6437
|
var Title$8 = function (_a) {
|
|
6438
6438
|
var title = _a.title;
|
|
6439
6439
|
var theme = useTheme();
|
|
6440
6440
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6441
6441
|
};
|
|
6442
|
-
var templateObject_1$
|
|
6442
|
+
var templateObject_1$1J;
|
|
6443
6443
|
|
|
6444
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6444
|
+
var P$3 = newStyled.p(templateObject_1$1I || (templateObject_1$1I = __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; });
|
|
6445
6445
|
var Promo = function (_a) {
|
|
6446
6446
|
var text = _a.text;
|
|
6447
6447
|
var theme = useTheme();
|
|
6448
6448
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6449
6449
|
};
|
|
6450
|
-
var templateObject_1$
|
|
6450
|
+
var templateObject_1$1I;
|
|
6451
6451
|
|
|
6452
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6452
|
+
var Text$5 = newStyled.span(templateObject_1$1H || (templateObject_1$1H = __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; });
|
|
6453
6453
|
var Description$1 = function (_a) {
|
|
6454
6454
|
var text = _a.text;
|
|
6455
6455
|
var theme = useTheme();
|
|
6456
6456
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6457
6457
|
};
|
|
6458
|
-
var templateObject_1$
|
|
6458
|
+
var templateObject_1$1H;
|
|
6459
6459
|
|
|
6460
|
-
var Container$
|
|
6460
|
+
var Container$18 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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"); });
|
|
6461
6461
|
var CloseButton$1 = function (_a) {
|
|
6462
6462
|
var onClick = _a.onClick, size = _a.size;
|
|
6463
6463
|
var theme = useTheme();
|
|
6464
|
-
return (jsxRuntime.jsx(Container$
|
|
6464
|
+
return (jsxRuntime.jsx(Container$18, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6465
6465
|
};
|
|
6466
|
-
var templateObject_1$
|
|
6466
|
+
var templateObject_1$1G;
|
|
6467
6467
|
|
|
6468
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6468
|
+
var Text$4 = newStyled.h3(templateObject_1$1F || (templateObject_1$1F = __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) {
|
|
6469
6469
|
var backgroundColor = _a.backgroundColor;
|
|
6470
6470
|
return backgroundColor;
|
|
6471
6471
|
}, function (_a) {
|
|
@@ -6480,7 +6480,7 @@ var OfferBanner = function (_a) {
|
|
|
6480
6480
|
var theme = useTheme();
|
|
6481
6481
|
return (jsxRuntime.jsx(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6482
6482
|
};
|
|
6483
|
-
var templateObject_1$
|
|
6483
|
+
var templateObject_1$1F;
|
|
6484
6484
|
|
|
6485
6485
|
var CartProductItem = {
|
|
6486
6486
|
Title: Title$8,
|
|
@@ -6490,10 +6490,10 @@ var CartProductItem = {
|
|
|
6490
6490
|
CloseButton: CloseButton$1,
|
|
6491
6491
|
};
|
|
6492
6492
|
|
|
6493
|
-
var Container$
|
|
6494
|
-
var MobileContainer = newStyled(Container$
|
|
6495
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6496
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6493
|
+
var Container$17 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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"])));
|
|
6494
|
+
var MobileContainer = newStyled(Container$17)(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6495
|
+
var DollarPart = newStyled.span(templateObject_3$_ || (templateObject_3$_ = __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"])));
|
|
6496
|
+
var ClubMembersText = newStyled.span(templateObject_4$O || (templateObject_4$O = __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"])));
|
|
6497
6497
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6498
6498
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6499
6499
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6501,9 +6501,9 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$j || (t
|
|
|
6501
6501
|
var ClubPriceLabel = function (_a) {
|
|
6502
6502
|
var clubPrice = _a.clubPrice;
|
|
6503
6503
|
var isMobile = useWindowDimensions().isMobile;
|
|
6504
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$
|
|
6504
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$17, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6505
6505
|
};
|
|
6506
|
-
var templateObject_1$
|
|
6506
|
+
var templateObject_1$1E, templateObject_2$1f, templateObject_3$_, templateObject_4$O, templateObject_5$C, templateObject_6$y, templateObject_7$r, templateObject_8$j;
|
|
6507
6507
|
|
|
6508
6508
|
var Spacing = function (_a) {
|
|
6509
6509
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6511,10 +6511,10 @@ var Spacing = function (_a) {
|
|
|
6511
6511
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6512
6512
|
};
|
|
6513
6513
|
|
|
6514
|
-
var Container$
|
|
6515
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6516
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6517
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6514
|
+
var Container$16 = newStyled('div')(templateObject_1$1D || (templateObject_1$1D = __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"])));
|
|
6515
|
+
var Content$2 = newStyled('div')(templateObject_2$1e || (templateObject_2$1e = __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"])));
|
|
6516
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$Z || (templateObject_3$Z = __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"])));
|
|
6517
|
+
var Bar$2 = newStyled('div')(templateObject_4$N || (templateObject_4$N = __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) {
|
|
6518
6518
|
var index = _a.index;
|
|
6519
6519
|
return "".concat(6 + 3 * index, "px");
|
|
6520
6520
|
}, function (_a) {
|
|
@@ -6523,14 +6523,14 @@ var Bar$2 = newStyled('div')(templateObject_4$M || (templateObject_4$M = __makeT
|
|
|
6523
6523
|
});
|
|
6524
6524
|
var StrengthBars = function (_a) {
|
|
6525
6525
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6526
|
-
return (jsxRuntime.jsxs(Container$
|
|
6526
|
+
return (jsxRuntime.jsxs(Container$16, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6527
6527
|
};
|
|
6528
|
-
var templateObject_1$
|
|
6528
|
+
var templateObject_1$1D, templateObject_2$1e, templateObject_3$Z, templateObject_4$N;
|
|
6529
6529
|
|
|
6530
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6531
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6532
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6533
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6530
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1C || (templateObject_1$1C = __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"])));
|
|
6531
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
6532
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6533
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6534
6534
|
var PriceWithTagContainer = newStyled.span(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6535
6535
|
var RegularPriceTag = function () {
|
|
6536
6536
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
@@ -6580,18 +6580,18 @@ var PriceLabelV4 = function (_a) {
|
|
|
6580
6580
|
: exports.ComponentSize.XSmall;
|
|
6581
6581
|
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6582
6582
|
};
|
|
6583
|
-
return (jsxRuntime.jsxs(Container$
|
|
6583
|
+
return (jsxRuntime.jsxs(Container$1o, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsxs(PriceContainerV2, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6584
6584
|
? finalPriceArray[0]
|
|
6585
6585
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6586
6586
|
};
|
|
6587
|
-
var templateObject_1$
|
|
6587
|
+
var templateObject_1$1C, templateObject_2$1d, templateObject_3$Y, templateObject_4$M, templateObject_5$B;
|
|
6588
6588
|
|
|
6589
6589
|
var STARTS_NUMBER = 5;
|
|
6590
6590
|
|
|
6591
|
-
var Container$
|
|
6592
|
-
var templateObject_1$
|
|
6591
|
+
var Container$15 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6592
|
+
var templateObject_1$1B;
|
|
6593
6593
|
|
|
6594
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6594
|
+
var StarContainer = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6595
6595
|
var marginRight = _a.marginRight;
|
|
6596
6596
|
return marginRight;
|
|
6597
6597
|
});
|
|
@@ -6603,11 +6603,11 @@ var StarList = function (_a) {
|
|
|
6603
6603
|
width: theme.component.stars.element[size].width,
|
|
6604
6604
|
height: theme.component.stars.element[size].height,
|
|
6605
6605
|
};
|
|
6606
|
-
return (jsxRuntime.jsx(Container$
|
|
6606
|
+
return (jsxRuntime.jsx(Container$15, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6607
6607
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6608
6608
|
}) }, void 0));
|
|
6609
6609
|
};
|
|
6610
|
-
var templateObject_1$
|
|
6610
|
+
var templateObject_1$1A;
|
|
6611
6611
|
|
|
6612
6612
|
/* base styles & size variants */
|
|
6613
6613
|
var LabelStyles = {
|
|
@@ -6648,7 +6648,7 @@ var LabelStyles = {
|
|
|
6648
6648
|
});
|
|
6649
6649
|
},
|
|
6650
6650
|
};
|
|
6651
|
-
var Container$
|
|
6651
|
+
var Container$14 = newStyled.a(templateObject_1$1z || (templateObject_1$1z = __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"])));
|
|
6652
6652
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6653
6653
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6654
6654
|
return [
|
|
@@ -6667,8 +6667,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6667
6667
|
}),
|
|
6668
6668
|
];
|
|
6669
6669
|
});
|
|
6670
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6671
|
-
var templateObject_1$
|
|
6670
|
+
var RatingLabel = newStyled.span(templateObject_2$1c || (templateObject_2$1c = __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; });
|
|
6671
|
+
var templateObject_1$1z, templateObject_2$1c;
|
|
6672
6672
|
|
|
6673
6673
|
var Rating = function (_a) {
|
|
6674
6674
|
var _b = _a.size, size = _b === void 0 ? exports.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;
|
|
@@ -6689,7 +6689,7 @@ var Rating = function (_a) {
|
|
|
6689
6689
|
href: reviewsContainerId,
|
|
6690
6690
|
}
|
|
6691
6691
|
: {};
|
|
6692
|
-
return (jsxRuntime.jsxs(Container$
|
|
6692
|
+
return (jsxRuntime.jsxs(Container$14, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6693
6693
|
};
|
|
6694
6694
|
|
|
6695
6695
|
var STYLES_BY_THEME = {
|
|
@@ -6763,10 +6763,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6763
6763
|
height: height,
|
|
6764
6764
|
});
|
|
6765
6765
|
});
|
|
6766
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6767
|
-
var Container$
|
|
6768
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6769
|
-
var Title$7 = newStyled.p(templateObject_4$
|
|
6766
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
6767
|
+
var Container$13 = newStyled.a(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
6768
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
6769
|
+
var Title$7 = newStyled.p(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\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 ", "\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 text-align: center;\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) {
|
|
6770
6770
|
var theme = _a.theme;
|
|
6771
6771
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
6772
6772
|
}, function (_a) {
|
|
@@ -6827,7 +6827,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$x || (templateObject_6
|
|
|
6827
6827
|
});
|
|
6828
6828
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6829
6829
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
6830
|
-
var templateObject_1$
|
|
6830
|
+
var templateObject_1$1y, templateObject_2$1b, templateObject_3$X, templateObject_4$L, templateObject_5$A, templateObject_6$x, templateObject_7$q, templateObject_8$i;
|
|
6831
6831
|
|
|
6832
6832
|
var ProductItemMobile = function (_a) {
|
|
6833
6833
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
@@ -6889,7 +6889,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6889
6889
|
return jsx(Fragment, {}, void 0);
|
|
6890
6890
|
return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6891
6891
|
};
|
|
6892
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6892
|
+
return (jsxs(ProdCardContainer$4, __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 ? (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)), jsxs(Container$13, __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 }, { 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 ? (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: exports.ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$3, __assign$1({}, discountTag, { size: exports.ComponentSize.Medium, style: {
|
|
6893
6893
|
letterSpacing: '-0.05rem',
|
|
6894
6894
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6895
6895
|
};
|
|
@@ -6902,10 +6902,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6902
6902
|
height: height,
|
|
6903
6903
|
});
|
|
6904
6904
|
});
|
|
6905
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6906
|
-
var Container
|
|
6907
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6908
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
6905
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1x || (templateObject_1$1x = __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; });
|
|
6906
|
+
var Container$12 = newStyled.a(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n 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"])));
|
|
6907
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
6908
|
+
var Title$6 = newStyled.p(templateObject_4$K || (templateObject_4$K = __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; });
|
|
6909
6909
|
var getStylesBySize$b = function (size) {
|
|
6910
6910
|
switch (size) {
|
|
6911
6911
|
case exports.ComponentSize.Medium:
|
|
@@ -6984,26 +6984,26 @@ var ProductItemTK = function (_a) {
|
|
|
6984
6984
|
: undefined }, void 0));
|
|
6985
6985
|
};
|
|
6986
6986
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6987
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container
|
|
6987
|
+
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$12, __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%" }, 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 }, void 0)), imageHover ? (jsx(ImageHoverContainer$2, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", 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$12, __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 ? (
|
|
6988
6988
|
// @ts-ignore
|
|
6989
6989
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6990
6990
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6991
6991
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6992
6992
|
} }, { 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));
|
|
6993
6993
|
};
|
|
6994
|
-
var templateObject_1$
|
|
6994
|
+
var templateObject_1$1x, templateObject_2$1a, templateObject_3$W, templateObject_4$K, templateObject_5$z, templateObject_6$w, templateObject_7$p, templateObject_8$h;
|
|
6995
6995
|
|
|
6996
|
-
var Container$
|
|
6996
|
+
var Container$11 = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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"])));
|
|
6997
6997
|
function withProductGrid(ProductItemComponent, data) {
|
|
6998
6998
|
function WithProductGrid(props) {
|
|
6999
|
-
return (jsxRuntime.jsx(Container$
|
|
6999
|
+
return (jsxRuntime.jsx(Container$11, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
7000
7000
|
}
|
|
7001
7001
|
/* istanbul ignore next */
|
|
7002
7002
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
7003
7003
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7004
7004
|
return WithProductGrid;
|
|
7005
7005
|
}
|
|
7006
|
-
var templateObject_1$
|
|
7006
|
+
var templateObject_1$1w;
|
|
7007
7007
|
|
|
7008
7008
|
var Collection = {
|
|
7009
7009
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7011,10 +7011,10 @@ var Collection = {
|
|
|
7011
7011
|
ProductItemTK: ProductItemTK,
|
|
7012
7012
|
};
|
|
7013
7013
|
|
|
7014
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7015
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7016
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
7017
|
-
var Span = newStyled.span(templateObject_4$
|
|
7014
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7015
|
+
newStyled(lt.Label)(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7016
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$V || (templateObject_3$V = __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"])));
|
|
7017
|
+
var Span = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7018
7018
|
var OptionsContainer = newStyled.div(templateObject_5$y || (templateObject_5$y = __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"])));
|
|
7019
7019
|
var Label$5 = function (_a) {
|
|
7020
7020
|
var label = _a.label, values = _a.values;
|
|
@@ -7033,7 +7033,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7033
7033
|
Option: Option,
|
|
7034
7034
|
OptionsContainer: OptionsContainer,
|
|
7035
7035
|
});
|
|
7036
|
-
var templateObject_1$
|
|
7036
|
+
var templateObject_1$1v, templateObject_2$19, templateObject_3$V, templateObject_4$J, templateObject_5$y;
|
|
7037
7037
|
|
|
7038
7038
|
var OneColorSelector = function (_a) {
|
|
7039
7039
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7074,21 +7074,21 @@ var OutOfStock = function (_a) {
|
|
|
7074
7074
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7075
7075
|
};
|
|
7076
7076
|
|
|
7077
|
-
var Container$
|
|
7077
|
+
var Container$10 = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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) {
|
|
7078
7078
|
var borderColor = _a.borderColor;
|
|
7079
7079
|
return borderColor;
|
|
7080
7080
|
}, function (_a) {
|
|
7081
7081
|
var noStock = _a.noStock;
|
|
7082
7082
|
return (noStock ? '0.4' : '1');
|
|
7083
7083
|
});
|
|
7084
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7084
|
+
var Image$2 = newStyled.img(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7085
7085
|
var PatternSelector = function (_a) {
|
|
7086
7086
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7087
7087
|
var theme = useTheme();
|
|
7088
7088
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7089
|
-
return (jsxRuntime.jsx(Container$
|
|
7089
|
+
return (jsxRuntime.jsx(Container$10, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7090
7090
|
};
|
|
7091
|
-
var templateObject_1$
|
|
7091
|
+
var templateObject_1$1u, templateObject_2$18;
|
|
7092
7092
|
|
|
7093
7093
|
var renderOptions$1 = function (options, showCross) {
|
|
7094
7094
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7115,10 +7115,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7115
7115
|
var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross;
|
|
7116
7116
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7117
7117
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7118
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7118
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n max-width: 300px;\n\n .tooltip-container {\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 max-width: 300px;\n\n .tooltip-container {\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 "])));
|
|
7119
7119
|
return (jsxs(ColorPickerWrapper, __assign$1({ 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({ 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));
|
|
7120
7120
|
};
|
|
7121
|
-
var templateObject_1$
|
|
7121
|
+
var templateObject_1$1t;
|
|
7122
7122
|
|
|
7123
7123
|
var renderOptions = function (selectedColor, options) {
|
|
7124
7124
|
if (options == null || options.length === 0) {
|
|
@@ -7156,13 +7156,13 @@ var MultiColorPicker = function (_a) {
|
|
|
7156
7156
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7157
7157
|
};
|
|
7158
7158
|
|
|
7159
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7160
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7161
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7159
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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'); });
|
|
7160
|
+
var Col$1 = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7161
|
+
var Row$2 = newStyled.div(templateObject_3$U || (templateObject_3$U = __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) {
|
|
7162
7162
|
return props.rightToLeft &&
|
|
7163
7163
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7164
7164
|
});
|
|
7165
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7165
|
+
var H5 = newStyled.h5(templateObject_4$I || (templateObject_4$I = __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; });
|
|
7166
7166
|
var H3$1 = newStyled.h3(templateObject_5$x || (templateObject_5$x = __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; });
|
|
7167
7167
|
var FreeShipping = newStyled.span(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7168
7168
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -7170,7 +7170,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
7170
7170
|
var theme = useTheme();
|
|
7171
7171
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7172
7172
|
};
|
|
7173
|
-
var templateObject_1$
|
|
7173
|
+
var templateObject_1$1s, templateObject_2$17, templateObject_3$U, templateObject_4$I, templateObject_5$x, templateObject_6$v;
|
|
7174
7174
|
|
|
7175
7175
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7176
7176
|
__proto__: null,
|
|
@@ -7198,7 +7198,7 @@ var sizeMapper = (_a = {},
|
|
|
7198
7198
|
_a[exports.ComponentSize.Large] = 'large',
|
|
7199
7199
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7200
7200
|
_a);
|
|
7201
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7201
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7202
7202
|
var wide = _a.wide;
|
|
7203
7203
|
return (wide ? '100%' : 'fit-content');
|
|
7204
7204
|
}, function (_a) {
|
|
@@ -7220,11 +7220,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1q || (templateObj
|
|
|
7220
7220
|
var theme = _a.theme;
|
|
7221
7221
|
return theme.colors.text.disabled;
|
|
7222
7222
|
});
|
|
7223
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7223
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7224
7224
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7225
7225
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7226
7226
|
});
|
|
7227
|
-
var templateObject_1$
|
|
7227
|
+
var templateObject_1$1r, templateObject_2$16;
|
|
7228
7228
|
|
|
7229
7229
|
var BaseCTA = function (_a) {
|
|
7230
7230
|
var _b, _c, _d;
|
|
@@ -7311,26 +7311,26 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7311
7311
|
} }), void 0));
|
|
7312
7312
|
};
|
|
7313
7313
|
|
|
7314
|
-
var Container
|
|
7315
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
7316
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7317
|
-
var Details = newStyled.span(templateObject_4$
|
|
7314
|
+
var Container$$ = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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; });
|
|
7315
|
+
var IconContainer$5 = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __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"])));
|
|
7316
|
+
var Text$3 = newStyled.p(templateObject_3$T || (templateObject_3$T = __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; });
|
|
7317
|
+
var Details = newStyled.span(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7318
7318
|
var Note = function (_a) {
|
|
7319
7319
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7320
7320
|
var theme = useTheme();
|
|
7321
|
-
return (jsxRuntime.jsxs(Container
|
|
7321
|
+
return (jsxRuntime.jsxs(Container$$, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$5, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7322
7322
|
};
|
|
7323
|
-
var templateObject_1$
|
|
7323
|
+
var templateObject_1$1q, templateObject_2$15, templateObject_3$T, templateObject_4$H;
|
|
7324
7324
|
|
|
7325
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7325
|
+
var Title$5 = newStyled.h1(templateObject_1$1p || (templateObject_1$1p = __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) {
|
|
7326
7326
|
var theme = _a.theme;
|
|
7327
7327
|
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 ");
|
|
7328
7328
|
});
|
|
7329
|
-
var Line = newStyled.div(templateObject_2$
|
|
7330
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7329
|
+
var Line = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __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; });
|
|
7330
|
+
var Row$1 = newStyled.div(templateObject_3$S || (templateObject_3$S = __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({
|
|
7331
7331
|
flexDirection: ['column', 'row'],
|
|
7332
7332
|
}));
|
|
7333
|
-
var Col = newStyled.div(templateObject_4$
|
|
7333
|
+
var Col = newStyled.div(templateObject_4$G || (templateObject_4$G = __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({
|
|
7334
7334
|
margin: ['0', '0 1.25rem'],
|
|
7335
7335
|
marginBottom: ['1.875rem', '0'],
|
|
7336
7336
|
alignItems: ['center', 'flex-start'],
|
|
@@ -7365,16 +7365,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7365
7365
|
var theme = useTheme();
|
|
7366
7366
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7367
7367
|
};
|
|
7368
|
-
var templateObject_1$
|
|
7368
|
+
var templateObject_1$1p, templateObject_2$14, templateObject_3$S, templateObject_4$G, templateObject_5$w, templateObject_6$u, templateObject_7$o, templateObject_8$g;
|
|
7369
7369
|
|
|
7370
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7370
|
+
var Backdrop = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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) {
|
|
7371
7371
|
var top = _a.top;
|
|
7372
7372
|
return top;
|
|
7373
7373
|
}, function (_a) {
|
|
7374
7374
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7375
7375
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7376
7376
|
});
|
|
7377
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7377
|
+
var Sidebar = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __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) {
|
|
7378
7378
|
var height = _a.height;
|
|
7379
7379
|
return height;
|
|
7380
7380
|
}, function (_a) {
|
|
@@ -7421,20 +7421,20 @@ var Drawer = function (_a) {
|
|
|
7421
7421
|
}, [isOpen, onClose, onOpen]);
|
|
7422
7422
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(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;
|
|
7423
7423
|
};
|
|
7424
|
-
var templateObject_1$
|
|
7424
|
+
var templateObject_1$1o, templateObject_2$13;
|
|
7425
7425
|
|
|
7426
7426
|
var TooltipArrow = function (_a) {
|
|
7427
7427
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7428
7428
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("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));
|
|
7429
7429
|
};
|
|
7430
7430
|
|
|
7431
|
-
var List = newStyled.ul(templateObject_1$
|
|
7432
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7433
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7434
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7431
|
+
var List = newStyled.ul(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7432
|
+
var Item$2 = newStyled.li(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
7433
|
+
var DropdownWrapper = newStyled.div(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
7434
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$F || (templateObject_4$F = __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"])));
|
|
7435
7435
|
var StyledDropdown = newStyled.ul(templateObject_5$v || (templateObject_5$v = __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; });
|
|
7436
7436
|
var DropdownItem = newStyled.li(templateObject_6$t || (templateObject_6$t = __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; });
|
|
7437
|
-
var templateObject_1$
|
|
7437
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$v, templateObject_6$t;
|
|
7438
7438
|
|
|
7439
7439
|
var DropdownListIcons = function (_a) {
|
|
7440
7440
|
var items = _a.items;
|
|
@@ -7447,13 +7447,13 @@ var Dropdown = function (_a) {
|
|
|
7447
7447
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(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));
|
|
7448
7448
|
};
|
|
7449
7449
|
|
|
7450
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7451
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7452
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7453
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7450
|
+
var DropdownContainer = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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"])));
|
|
7451
|
+
var DropdownLabel = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
7452
|
+
var SizeLabel = newStyled.span(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7453
|
+
var DetailLabel = newStyled.span(templateObject_4$E || (templateObject_4$E = __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"])));
|
|
7454
7454
|
var DropdownOptions = newStyled.div(templateObject_5$u || (templateObject_5$u = __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"])));
|
|
7455
7455
|
var DropdownOption = newStyled.div(templateObject_6$s || (templateObject_6$s = __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"])));
|
|
7456
|
-
var templateObject_1$
|
|
7456
|
+
var templateObject_1$1m, templateObject_2$11, templateObject_3$Q, templateObject_4$E, templateObject_5$u, templateObject_6$s;
|
|
7457
7457
|
|
|
7458
7458
|
var SizeDropdown = function (_a) {
|
|
7459
7459
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7476,10 +7476,10 @@ var SizeDropdown = function (_a) {
|
|
|
7476
7476
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(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: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7477
7477
|
};
|
|
7478
7478
|
|
|
7479
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7480
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2
|
|
7481
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7482
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7479
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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; });
|
|
7480
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$10 || (templateObject_2$10 = __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: calc(", " + 15px);\n right: calc(", " - 23px);\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\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: calc(", " + 15px);\n right: calc(", " - 23px);\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\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7481
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$P || (templateObject_3$P = __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"])));
|
|
7482
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$D || (templateObject_4$D = __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"])));
|
|
7483
7483
|
var DropdownDialog = function (_a) {
|
|
7484
7484
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7485
7485
|
var theme = useTheme$1();
|
|
@@ -7488,7 +7488,7 @@ var DropdownDialog = function (_a) {
|
|
|
7488
7488
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7489
7489
|
}) }), void 0) }), void 0));
|
|
7490
7490
|
};
|
|
7491
|
-
var templateObject_1$
|
|
7491
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$P, templateObject_4$D;
|
|
7492
7492
|
|
|
7493
7493
|
function FilteringDropdown(_a) {
|
|
7494
7494
|
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;
|
|
@@ -7521,29 +7521,29 @@ function FilteringDropdown(_a) {
|
|
|
7521
7521
|
}) }, void 0)] }), void 0));
|
|
7522
7522
|
}
|
|
7523
7523
|
|
|
7524
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7525
|
-
var H3 = newStyled.h3(templateObject_2
|
|
7526
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7527
|
-
var Container$
|
|
7524
|
+
var Title$4 = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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; });
|
|
7525
|
+
var H3 = newStyled.h3(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
7526
|
+
var ArrowContainer = newStyled.div(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7527
|
+
var Container$_ = newStyled.div(templateObject_4$C || (templateObject_4$C = __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'); });
|
|
7528
7528
|
var Accordion = function (_a) {
|
|
7529
7529
|
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;
|
|
7530
7530
|
var theme = useTheme();
|
|
7531
7531
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7532
|
-
return (jsxRuntime.jsxs(Container$
|
|
7532
|
+
return (jsxRuntime.jsxs(Container$_, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7533
7533
|
};
|
|
7534
|
-
var templateObject_1$
|
|
7534
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
7535
7535
|
|
|
7536
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7537
|
-
var Header$3 = newStyled.div(templateObject_2$
|
|
7538
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7539
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7536
|
+
var SectionContent = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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; });
|
|
7537
|
+
var Header$3 = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __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"])));
|
|
7538
|
+
var MobileHeader = newStyled.div(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
7539
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
7540
7540
|
var H4 = newStyled.h4(templateObject_5$t || (templateObject_5$t = __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; });
|
|
7541
7541
|
var FilterLink = newStyled.a(templateObject_6$r || (templateObject_6$r = __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; });
|
|
7542
7542
|
var OptionContainer = newStyled.div(templateObject_7$n || (templateObject_7$n = __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'); });
|
|
7543
7543
|
var ClearAll = newStyled.span(templateObject_8$f || (templateObject_8$f = __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; });
|
|
7544
7544
|
var MobileFooter = newStyled.div(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7545
7545
|
var MobileClearContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
7546
|
-
var templateObject_1$
|
|
7546
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B, templateObject_5$t, templateObject_6$r, templateObject_7$n, templateObject_8$f, templateObject_9$a, templateObject_10$9;
|
|
7547
7547
|
|
|
7548
7548
|
var getStylesBySize$a = function (size, theme) {
|
|
7549
7549
|
switch (size) {
|
|
@@ -7608,9 +7608,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7608
7608
|
} }), id: id }, void 0));
|
|
7609
7609
|
};
|
|
7610
7610
|
|
|
7611
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7612
|
-
var LI = newStyled.li(templateObject_2$
|
|
7613
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7611
|
+
var UL = newStyled.ul(templateObject_1$1i || (templateObject_1$1i = __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"])));
|
|
7612
|
+
var LI = newStyled.li(templateObject_2$Z || (templateObject_2$Z = __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; });
|
|
7613
|
+
var CloseIconContainer = newStyled.div(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
7614
7614
|
var Tags = function (_a) {
|
|
7615
7615
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7616
7616
|
var theme = useTheme();
|
|
@@ -7618,7 +7618,7 @@ var Tags = function (_a) {
|
|
|
7618
7618
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7619
7619
|
}) }), void 0));
|
|
7620
7620
|
};
|
|
7621
|
-
var templateObject_1$
|
|
7621
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$M;
|
|
7622
7622
|
|
|
7623
7623
|
var Filters = function (_a) {
|
|
7624
7624
|
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;
|
|
@@ -7754,8 +7754,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7754
7754
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7755
7755
|
};
|
|
7756
7756
|
|
|
7757
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7758
|
-
var Container$
|
|
7757
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
7758
|
+
var Container$Z = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
7759
7759
|
var FitGuarantee = function (_a) {
|
|
7760
7760
|
var _b;
|
|
7761
7761
|
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;
|
|
@@ -7766,17 +7766,17 @@ var FitGuarantee = function (_a) {
|
|
|
7766
7766
|
console.error('Icon', iconName, 'not found');
|
|
7767
7767
|
return null;
|
|
7768
7768
|
}
|
|
7769
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$
|
|
7769
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$Z, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsxRuntime.jsx(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxRuntime.jsxs(Container$Z, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7770
7770
|
margin: '0.1rem 0',
|
|
7771
7771
|
width: '100%',
|
|
7772
7772
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7773
7773
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7774
7774
|
} }, { children: title }), void 0), jsxRuntime.jsx(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));
|
|
7775
7775
|
};
|
|
7776
|
-
var templateObject_1$
|
|
7776
|
+
var templateObject_1$1h, templateObject_2$Y;
|
|
7777
7777
|
|
|
7778
|
-
var Container$
|
|
7779
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7778
|
+
var Container$Y = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
7779
|
+
var P$2 = newStyled.p(templateObject_2$X || (templateObject_2$X = __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; });
|
|
7780
7780
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7781
7781
|
border: 'none',
|
|
7782
7782
|
background: 'transparent',
|
|
@@ -7789,11 +7789,11 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7789
7789
|
var FitPredictor = function (_a) {
|
|
7790
7790
|
var onClick = _a.onClick;
|
|
7791
7791
|
var theme = useTheme();
|
|
7792
|
-
return (jsxs(Container$
|
|
7792
|
+
return (jsxs(Container$Y, __assign$1({ theme: theme }, { children: [jsx(Container$Y, { 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));
|
|
7793
7793
|
};
|
|
7794
|
-
var templateObject_1$
|
|
7794
|
+
var templateObject_1$1g, templateObject_2$X;
|
|
7795
7795
|
|
|
7796
|
-
var Button$
|
|
7796
|
+
var Button$8 = newStyled.button(function () { return ({
|
|
7797
7797
|
background: 'transparent',
|
|
7798
7798
|
border: 'none',
|
|
7799
7799
|
cursor: 'pointer',
|
|
@@ -7805,7 +7805,7 @@ var Direction;
|
|
|
7805
7805
|
})(Direction || (Direction = {}));
|
|
7806
7806
|
var ArrowButton$1 = function (_a) {
|
|
7807
7807
|
var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
|
|
7808
|
-
return (jsxRuntime.jsx(Button$
|
|
7808
|
+
return (jsxRuntime.jsx(Button$8, __assign$1({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-".concat(direction) }, { children: direction === 'left' ? (jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { testId: "arrow-button-left", width: width, height: height, opacity: 0.5 }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronRight, { testId: "arrow-button-right", width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
|
|
7809
7809
|
};
|
|
7810
7810
|
|
|
7811
7811
|
function _defineProperty(obj, key, value) {
|
|
@@ -12035,14 +12035,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12035
12035
|
return Slider;
|
|
12036
12036
|
}(React__default["default"].Component);
|
|
12037
12037
|
|
|
12038
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12038
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1f || (templateObject_1$1f = __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) {
|
|
12039
12039
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12040
12040
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12041
12041
|
}, function (_a) {
|
|
12042
12042
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12043
12043
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12044
12044
|
});
|
|
12045
|
-
var templateObject_1$
|
|
12045
|
+
var templateObject_1$1f;
|
|
12046
12046
|
|
|
12047
12047
|
var getStylesBySize$9 = function (size) {
|
|
12048
12048
|
// rem units
|
|
@@ -12101,7 +12101,7 @@ var SliderNavigation = function (_a) {
|
|
|
12101
12101
|
} }, { 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));
|
|
12102
12102
|
};
|
|
12103
12103
|
|
|
12104
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12104
|
+
var Image$1 = newStyled.img(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
12105
12105
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12106
12106
|
return borderRadiusVariant &&
|
|
12107
12107
|
"\n border-radius: 20px;\n ";
|
|
@@ -12119,7 +12119,7 @@ var Image$1 = newStyled.img(templateObject_1$1d || (templateObject_1$1d = __make
|
|
|
12119
12119
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12120
12120
|
: 'inherit';
|
|
12121
12121
|
});
|
|
12122
|
-
var templateObject_1$
|
|
12122
|
+
var templateObject_1$1e;
|
|
12123
12123
|
|
|
12124
12124
|
var ImageSmallPreview = function (_a) {
|
|
12125
12125
|
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;
|
|
@@ -12127,9 +12127,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12127
12127
|
return (jsxRuntime.jsx(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));
|
|
12128
12128
|
};
|
|
12129
12129
|
|
|
12130
|
-
var horizontalStyles = css(templateObject_1$
|
|
12131
|
-
var verticalStyles = css(templateObject_2$
|
|
12132
|
-
var Container$
|
|
12130
|
+
var horizontalStyles = css(templateObject_1$1d || (templateObject_1$1d = __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"])));
|
|
12131
|
+
var verticalStyles = css(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
12132
|
+
var Container$X = newStyled.div(templateObject_3$L || (templateObject_3$L = __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) {
|
|
12133
12133
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12134
12134
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12135
12135
|
}, function (_a) {
|
|
@@ -12140,12 +12140,12 @@ var Container$U = newStyled.div(templateObject_3$K || (templateObject_3$K = __ma
|
|
|
12140
12140
|
return hasOverflowArrows &&
|
|
12141
12141
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12142
12142
|
});
|
|
12143
|
-
var Button$
|
|
12143
|
+
var Button$7 = newStyled.button(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
12144
12144
|
var ArrowsContainer = newStyled.div(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
12145
12145
|
var ArrowBaseStyles = newStyled.div(templateObject_6$q || (templateObject_6$q = __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"])));
|
|
12146
12146
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$m || (templateObject_7$m = __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"])));
|
|
12147
12147
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$e || (templateObject_8$e = __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"])));
|
|
12148
|
-
var templateObject_1$
|
|
12148
|
+
var templateObject_1$1d, templateObject_2$W, templateObject_3$L, templateObject_4$A, templateObject_5$s, templateObject_6$q, templateObject_7$m, templateObject_8$e;
|
|
12149
12149
|
|
|
12150
12150
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12151
12151
|
var loading = 'eager';
|
|
@@ -12173,31 +12173,31 @@ var ImagePreviewList = function (_a) {
|
|
|
12173
12173
|
var element = document.querySelector(".imageListContainer");
|
|
12174
12174
|
element.scrollBy(0, 200);
|
|
12175
12175
|
};
|
|
12176
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
12176
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$X, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
12177
12177
|
arrowWidth: 0.75,
|
|
12178
12178
|
arrowHeight: 1.25,
|
|
12179
12179
|
arrowPadding: 1.625,
|
|
12180
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsxRuntime.jsx(Button$
|
|
12181
|
-
return (jsxRuntime.jsx(Button$
|
|
12180
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsxRuntime.jsx(Button$7, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare, loading: getLoadingProp(index, itemsOnViewport), decoding: getDecodingProp(index, itemsOnViewport) }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) {
|
|
12181
|
+
return (jsxRuntime.jsx(Button$7, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare, loading: getLoadingProp(index, itemsOnViewport), decoding: getDecodingProp(index, itemsOnViewport) }, void 0) }), item.key));
|
|
12182
12182
|
})) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12183
12183
|
};
|
|
12184
12184
|
|
|
12185
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12186
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12187
|
-
var templateObject_1$
|
|
12185
|
+
var ProgressContainer = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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); });
|
|
12186
|
+
var ProgressFiller = newStyled.div(templateObject_2$V || (templateObject_2$V = __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; });
|
|
12187
|
+
var templateObject_1$1c, templateObject_2$V;
|
|
12188
12188
|
|
|
12189
12189
|
var ProgressBar$1 = function (_a) {
|
|
12190
12190
|
var progress = _a.progress, hide = _a.hide;
|
|
12191
12191
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12192
12192
|
};
|
|
12193
12193
|
|
|
12194
|
-
var Container$
|
|
12195
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12196
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12197
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
12194
|
+
var Container$W = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12195
|
+
var HTMLVideo = newStyled.video(templateObject_2$U || (templateObject_2$U = __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; });
|
|
12196
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$K || (templateObject_3$K = __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"])));
|
|
12197
|
+
var PlayContainer = newStyled.div(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
12198
12198
|
var PauseContainer = newStyled.div(templateObject_5$r || (templateObject_5$r = __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"])));
|
|
12199
12199
|
var MuteButton = newStyled.button(templateObject_6$p || (templateObject_6$p = __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"])));
|
|
12200
|
-
var templateObject_1$
|
|
12200
|
+
var templateObject_1$1b, templateObject_2$U, templateObject_3$K, templateObject_4$z, templateObject_5$r, templateObject_6$p;
|
|
12201
12201
|
|
|
12202
12202
|
var Video$1 = function (_a) {
|
|
12203
12203
|
var _b, _c, _d, _e;
|
|
@@ -12247,7 +12247,7 @@ var Video$1 = function (_a) {
|
|
|
12247
12247
|
setVideoProgress(videoRef.current.currentTime);
|
|
12248
12248
|
}
|
|
12249
12249
|
};
|
|
12250
|
-
return (jsxRuntime.jsxs(Container$
|
|
12250
|
+
return (jsxRuntime.jsxs(Container$W, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxRuntime.jsxs(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxRuntime.jsxs(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: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
12251
12251
|
};
|
|
12252
12252
|
|
|
12253
12253
|
var propTypes = {exports: {}};
|
|
@@ -13841,22 +13841,22 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13841
13841
|
afterZoomOut: PropTypes.func
|
|
13842
13842
|
} : {};
|
|
13843
13843
|
|
|
13844
|
-
var Container$
|
|
13844
|
+
var Container$V = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13845
13845
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13846
13846
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13847
13847
|
});
|
|
13848
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
13848
|
+
var TopTagContainer$7 = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13849
13849
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13850
13850
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13851
13851
|
}, function (_a) {
|
|
13852
13852
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13853
13853
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13854
13854
|
});
|
|
13855
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
13855
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13856
13856
|
var isCTAHidden = _a.isCTAHidden;
|
|
13857
13857
|
return (isCTAHidden ? '60px' : '120px');
|
|
13858
13858
|
});
|
|
13859
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_4$
|
|
13859
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"])));
|
|
13860
13860
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
13861
13861
|
var ImageStyled = newStyled(Image$3)(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13862
13862
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
@@ -13866,14 +13866,14 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$l || (temp
|
|
|
13866
13866
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13867
13867
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13868
13868
|
});
|
|
13869
|
-
var templateObject_1$
|
|
13869
|
+
var templateObject_1$1a, templateObject_2$T, templateObject_3$J, templateObject_4$y, templateObject_5$q, templateObject_6$o, templateObject_7$l;
|
|
13870
13870
|
|
|
13871
13871
|
var ImageProductSlide$1 = function (_a) {
|
|
13872
13872
|
var _b;
|
|
13873
13873
|
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;
|
|
13874
13874
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13875
13875
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13876
|
-
return (jsxRuntime.jsxs(Container$
|
|
13876
|
+
return (jsxRuntime.jsxs(Container$V, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [withZoom ? (jsxRuntime.jsx(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13877
13877
|
alt: content.alt,
|
|
13878
13878
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13879
13879
|
loading: 'eager',
|
|
@@ -13881,8 +13881,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13881
13881
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsxRuntime.jsx(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsxRuntime.jsx(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$2, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13882
13882
|
};
|
|
13883
13883
|
|
|
13884
|
-
var Container$
|
|
13885
|
-
var templateObject_1$
|
|
13884
|
+
var Container$U = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
13885
|
+
var templateObject_1$19;
|
|
13886
13886
|
|
|
13887
13887
|
var getInitialIndex = function (images, selectedValue) {
|
|
13888
13888
|
if (selectedValue) {
|
|
@@ -13908,7 +13908,7 @@ var ProductGallery = function (_a) {
|
|
|
13908
13908
|
setActiveIndex(index);
|
|
13909
13909
|
};
|
|
13910
13910
|
var selectedImage = images[activeIndex];
|
|
13911
|
-
return (jsxRuntime.jsxs(Container$
|
|
13911
|
+
return (jsxRuntime.jsxs(Container$U, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare, itemsOnViewport: itemsOnViewport }, void 0), jsxRuntime.jsx(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));
|
|
13912
13912
|
};
|
|
13913
13913
|
|
|
13914
13914
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13930,7 +13930,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13930
13930
|
};
|
|
13931
13931
|
}
|
|
13932
13932
|
};
|
|
13933
|
-
var Container$
|
|
13933
|
+
var Container$T = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\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-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\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) {
|
|
13934
13934
|
var backgroundColor = _a.backgroundColor;
|
|
13935
13935
|
return backgroundColor;
|
|
13936
13936
|
}, function (_a) {
|
|
@@ -13958,11 +13958,11 @@ var Container$Q = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __
|
|
|
13958
13958
|
var IconButton = function (_a) {
|
|
13959
13959
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13960
13960
|
var theme = useTheme();
|
|
13961
|
-
return (jsxRuntime.jsx(Container$
|
|
13961
|
+
return (jsxRuntime.jsx(Container$T, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13962
13962
|
};
|
|
13963
|
-
var templateObject_1$
|
|
13963
|
+
var templateObject_1$18;
|
|
13964
13964
|
|
|
13965
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13965
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$17 || (templateObject_1$17 = __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; });
|
|
13966
13966
|
var AmazonButton = function (_a) {
|
|
13967
13967
|
var onClick = _a.onClick;
|
|
13968
13968
|
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13971,9 +13971,9 @@ var PaypalButton = function (_a) {
|
|
|
13971
13971
|
var onClick = _a.onClick;
|
|
13972
13972
|
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13973
13973
|
};
|
|
13974
|
-
var templateObject_1$
|
|
13974
|
+
var templateObject_1$17;
|
|
13975
13975
|
|
|
13976
|
-
var Container$
|
|
13976
|
+
var Container$S = newStyled.div(function (props) { return ({
|
|
13977
13977
|
height: 'auto',
|
|
13978
13978
|
textAlign: 'center',
|
|
13979
13979
|
justifyContent: 'center',
|
|
@@ -14023,12 +14023,12 @@ var IconsWithTitle = function (_a) {
|
|
|
14023
14023
|
textAlign: 'center',
|
|
14024
14024
|
lineHeight: '18px',
|
|
14025
14025
|
};
|
|
14026
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
14026
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$S, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(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));
|
|
14027
14027
|
};
|
|
14028
14028
|
|
|
14029
|
-
var Container$
|
|
14030
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14031
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14029
|
+
var Container$R = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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'); });
|
|
14030
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$S || (templateObject_2$S = __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'); });
|
|
14031
|
+
var StyledTitle = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14032
14032
|
var titlePosition = _a.titlePosition;
|
|
14033
14033
|
return titlePosition == 'center' &&
|
|
14034
14034
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14036,15 +14036,15 @@ var StyledTitle = newStyled.div(templateObject_3$H || (templateObject_3$H = __ma
|
|
|
14036
14036
|
var ImageCardWithDescription = function (_a) {
|
|
14037
14037
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14038
14038
|
var isMobile = useWindowDimensions().isMobile;
|
|
14039
|
-
return (jsxRuntime.jsxs(Container$
|
|
14039
|
+
return (jsxRuntime.jsxs(Container$R, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14040
14040
|
};
|
|
14041
|
-
var templateObject_1$
|
|
14041
|
+
var templateObject_1$16, templateObject_2$S, templateObject_3$I;
|
|
14042
14042
|
|
|
14043
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14043
|
+
var Label$4 = newStyled.span(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
14044
14044
|
var color = _a.color;
|
|
14045
14045
|
return color;
|
|
14046
14046
|
});
|
|
14047
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14047
|
+
var MandatoryIcon = newStyled.span(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14048
14048
|
var color = _a.color;
|
|
14049
14049
|
return color;
|
|
14050
14050
|
});
|
|
@@ -14053,7 +14053,7 @@ var InputLabel = function (_a) {
|
|
|
14053
14053
|
var theme = useTheme();
|
|
14054
14054
|
return (jsxRuntime.jsxs(Label$4, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
14055
14055
|
};
|
|
14056
|
-
var templateObject_1$
|
|
14056
|
+
var templateObject_1$15, templateObject_2$R;
|
|
14057
14057
|
|
|
14058
14058
|
var containerByStatus = function (theme, status) {
|
|
14059
14059
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -14062,12 +14062,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14062
14062
|
return theme.colors.semantic.urgent.color;
|
|
14063
14063
|
return '';
|
|
14064
14064
|
};
|
|
14065
|
-
var Container$
|
|
14065
|
+
var Container$Q = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14066
14066
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14067
14067
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14068
14068
|
});
|
|
14069
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14070
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14069
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$Q || (templateObject_2$Q = __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"])));
|
|
14070
|
+
var StyledInput = newStyled.input(templateObject_3$H || (templateObject_3$H = __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) {
|
|
14071
14071
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14072
14072
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14073
14073
|
}, function (_a) {
|
|
@@ -14122,7 +14122,7 @@ var StyledInput = newStyled.input(templateObject_3$G || (templateObject_3$G = __
|
|
|
14122
14122
|
return hasValue &&
|
|
14123
14123
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14124
14124
|
});
|
|
14125
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14125
|
+
var InputWrapper = newStyled.div(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14126
14126
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14127
14127
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14128
14128
|
});
|
|
@@ -14140,7 +14140,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$p || (templateObject_5
|
|
|
14140
14140
|
return theme.component.input.lineHeight;
|
|
14141
14141
|
});
|
|
14142
14142
|
var ClearInput = newStyled.div(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
14143
|
-
var templateObject_1$
|
|
14143
|
+
var templateObject_1$14, templateObject_2$Q, templateObject_3$H, templateObject_4$x, templateObject_5$p, templateObject_6$n;
|
|
14144
14144
|
|
|
14145
14145
|
var BaseInput = function (_a) {
|
|
14146
14146
|
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, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -14163,14 +14163,14 @@ var BaseInput = function (_a) {
|
|
|
14163
14163
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14164
14164
|
}, [status]);
|
|
14165
14165
|
var hasValue = Boolean(value);
|
|
14166
|
-
return (jsxRuntime.jsxs(Container$
|
|
14166
|
+
return (jsxRuntime.jsxs(Container$Q, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14167
14167
|
onChange(event.target.value, event);
|
|
14168
14168
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
14169
14169
|
onChange('', { target: { value: '' } });
|
|
14170
14170
|
}, "data-testid": "clear-value" }, { children: jsxRuntime.jsx(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), required && status === exports.InputValidationType.Error && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
|
|
14171
14171
|
};
|
|
14172
14172
|
|
|
14173
|
-
var Button$
|
|
14173
|
+
var Button$6 = function (_a) {
|
|
14174
14174
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
14175
14175
|
if (variant === 'primary') {
|
|
14176
14176
|
return jsxRuntime.jsx(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -14184,11 +14184,11 @@ var Button$5 = function (_a) {
|
|
|
14184
14184
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14185
14185
|
};
|
|
14186
14186
|
|
|
14187
|
-
var Container$
|
|
14187
|
+
var Container$P = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
14188
14188
|
var theme = _a.theme;
|
|
14189
14189
|
return theme.component.inputCustom.input.borderRadius;
|
|
14190
14190
|
});
|
|
14191
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14191
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$P || (templateObject_2$P = __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) {
|
|
14192
14192
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14193
14193
|
return defaultRounded
|
|
14194
14194
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14203,23 +14203,23 @@ var Custom = function (_a) {
|
|
|
14203
14203
|
text: text,
|
|
14204
14204
|
disabled: rest.disabled,
|
|
14205
14205
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14206
|
-
return (jsxRuntime.jsx(Container$
|
|
14206
|
+
return (jsxRuntime.jsx(Container$P, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14207
14207
|
};
|
|
14208
|
-
var templateObject_1$
|
|
14208
|
+
var templateObject_1$13, templateObject_2$P;
|
|
14209
14209
|
|
|
14210
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14210
|
+
var SuccessContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14211
14211
|
var size = _a.size;
|
|
14212
14212
|
return (size === 'small' ? '36px' : '');
|
|
14213
14213
|
});
|
|
14214
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14215
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14214
|
+
var SuccessMessage = newStyled.div(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
14215
|
+
var SuccessText = newStyled.span(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
14216
14216
|
var Success = function (_a) {
|
|
14217
14217
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14218
14218
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14219
14219
|
};
|
|
14220
|
-
var templateObject_1$
|
|
14220
|
+
var templateObject_1$12, templateObject_2$O, templateObject_3$G;
|
|
14221
14221
|
|
|
14222
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14222
|
+
var ButtonContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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) {
|
|
14223
14223
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14224
14224
|
return status === exports.InputValidationType.Empty &&
|
|
14225
14225
|
type === 'primary' &&
|
|
@@ -14236,16 +14236,16 @@ var BasePlusButton = function (_a) {
|
|
|
14236
14236
|
}
|
|
14237
14237
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14238
14238
|
};
|
|
14239
|
-
var templateObject_1$
|
|
14239
|
+
var templateObject_1$11;
|
|
14240
14240
|
|
|
14241
|
-
var Container$
|
|
14242
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14241
|
+
var Container$O = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14242
|
+
var IconContainer$3 = newStyled.div(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
14243
14243
|
var BasePlusIcon = function (_a) {
|
|
14244
14244
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14245
14245
|
var theme = useTheme();
|
|
14246
|
-
return (jsxRuntime.jsx(Container$
|
|
14246
|
+
return (jsxRuntime.jsx(Container$O, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14247
14247
|
};
|
|
14248
|
-
var templateObject_1
|
|
14248
|
+
var templateObject_1$10, templateObject_2$N;
|
|
14249
14249
|
|
|
14250
14250
|
var Input$3 = {
|
|
14251
14251
|
Simple: BaseInput,
|
|
@@ -14385,14 +14385,14 @@ var Portal = function (_a) {
|
|
|
14385
14385
|
var visibleStyle = function (_a) {
|
|
14386
14386
|
var opened = _a.opened;
|
|
14387
14387
|
return opened
|
|
14388
|
-
? css(templateObject_1
|
|
14388
|
+
? css(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14389
14389
|
};
|
|
14390
14390
|
var transformStyle = function (_a) {
|
|
14391
14391
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14392
14392
|
return opened
|
|
14393
|
-
? css(templateObject_3$
|
|
14393
|
+
? css(templateObject_3$F || (templateObject_3$F = __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$w || (templateObject_4$w = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14394
14394
|
};
|
|
14395
|
-
var Container$
|
|
14395
|
+
var Container$N = newStyled.div(templateObject_6$m || (templateObject_6$m = __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) {
|
|
14396
14396
|
var width = _a.width;
|
|
14397
14397
|
return width
|
|
14398
14398
|
? css(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
@@ -14409,7 +14409,7 @@ var Modal = function (_a) {
|
|
|
14409
14409
|
}
|
|
14410
14410
|
close();
|
|
14411
14411
|
};
|
|
14412
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14412
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$N, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
|
|
14413
14413
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14414
14414
|
onDismiss();
|
|
14415
14415
|
} }, void 0)] }), void 0));
|
|
@@ -14440,7 +14440,7 @@ var useModal = function (id) {
|
|
|
14440
14440
|
close: close,
|
|
14441
14441
|
}); }, [close, open, opened]);
|
|
14442
14442
|
};
|
|
14443
|
-
var templateObject_1
|
|
14443
|
+
var templateObject_1$$, templateObject_2$M, templateObject_3$F, templateObject_4$w, templateObject_5$o, templateObject_6$m, templateObject_7$k;
|
|
14444
14444
|
|
|
14445
14445
|
var htmlReactParser = {exports: {}};
|
|
14446
14446
|
|
|
@@ -18221,7 +18221,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18221
18221
|
HTMLReactParser$1.attributesToProps;
|
|
18222
18222
|
HTMLReactParser$1.Element;
|
|
18223
18223
|
|
|
18224
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
18224
|
+
var Bar$1 = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18225
18225
|
var height = _a.height;
|
|
18226
18226
|
return height || '0.5rem';
|
|
18227
18227
|
}, function (_a) {
|
|
@@ -18260,7 +18260,7 @@ var BarContainer = newStyled.div({
|
|
|
18260
18260
|
padding: '0 16px',
|
|
18261
18261
|
position: 'relative',
|
|
18262
18262
|
});
|
|
18263
|
-
var Container$
|
|
18263
|
+
var Container$M = newStyled.div(function (_a) {
|
|
18264
18264
|
var backgroundColor = _a.backgroundColor;
|
|
18265
18265
|
return ({
|
|
18266
18266
|
width: '475px',
|
|
@@ -18273,7 +18273,7 @@ var Container$J = newStyled.div(function (_a) {
|
|
|
18273
18273
|
background: backgroundColor,
|
|
18274
18274
|
});
|
|
18275
18275
|
});
|
|
18276
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18276
|
+
var MessageContainer = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18277
18277
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18278
18278
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18279
18279
|
};
|
|
@@ -18302,33 +18302,33 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18302
18302
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18303
18303
|
return (jsxRuntime.jsx(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18304
18304
|
};
|
|
18305
|
-
return (jsxRuntime.jsxs(Container$
|
|
18305
|
+
return (jsxRuntime.jsxs(Container$M, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18306
18306
|
};
|
|
18307
|
-
var templateObject_1$
|
|
18307
|
+
var templateObject_1$_, templateObject_2$L;
|
|
18308
18308
|
|
|
18309
|
-
var Container$
|
|
18309
|
+
var Container$L = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
18310
18310
|
var theme = _a.theme;
|
|
18311
18311
|
return theme.component.orderBar.backgroundColor;
|
|
18312
18312
|
});
|
|
18313
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18313
|
+
var H1 = newStyled.h1(templateObject_2$K || (templateObject_2$K = __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; });
|
|
18314
18314
|
var OrderBar = function (_a) {
|
|
18315
18315
|
var message = _a.message, color = _a.color;
|
|
18316
18316
|
var theme = useTheme();
|
|
18317
|
-
return (jsxRuntime.jsxs(Container$
|
|
18317
|
+
return (jsxRuntime.jsxs(Container$L, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18318
18318
|
};
|
|
18319
|
-
var templateObject_1$
|
|
18319
|
+
var templateObject_1$Z, templateObject_2$K;
|
|
18320
18320
|
|
|
18321
|
-
var Container$
|
|
18322
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18323
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18324
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18321
|
+
var Container$K = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
18322
|
+
var Card$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
18323
|
+
var Tag$1 = newStyled.div(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
18324
|
+
var Label$3 = newStyled.div(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
18325
18325
|
var Check = newStyled.div(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18326
18326
|
var IconContainer$2 = newStyled.div(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
18327
18327
|
var IconPlaceholder = newStyled.div(templateObject_7$j || (templateObject_7$j = __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"])));
|
|
18328
18328
|
var DiscountContainer = newStyled.div(templateObject_8$d || (templateObject_8$d = __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"])));
|
|
18329
18329
|
var PackSelector = function (_a) {
|
|
18330
18330
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18331
|
-
return (jsxRuntime.jsx(Container$
|
|
18331
|
+
return (jsxRuntime.jsx(Container$K, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18332
18332
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18333
18333
|
}) }), void 0));
|
|
18334
18334
|
};
|
|
@@ -18355,14 +18355,14 @@ var PackCard = function (_a) {
|
|
|
18355
18355
|
currency: currencyCode || 'USD',
|
|
18356
18356
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18357
18357
|
};
|
|
18358
|
-
var templateObject_1$
|
|
18358
|
+
var templateObject_1$Y, templateObject_2$J, templateObject_3$E, templateObject_4$v, templateObject_5$n, templateObject_6$l, templateObject_7$j, templateObject_8$d;
|
|
18359
18359
|
|
|
18360
|
-
var Container$
|
|
18361
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18362
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18360
|
+
var Container$J = newStyled.div(templateObject_1$X || (templateObject_1$X = __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"])));
|
|
18361
|
+
var IconContainer$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
18362
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18363
18363
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18364
18364
|
}));
|
|
18365
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18365
|
+
var PageNumber = newStyled.span(templateObject_4$u || (templateObject_4$u = __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) {
|
|
18366
18366
|
var bold = _a.bold;
|
|
18367
18367
|
return (bold ? '700' : '500');
|
|
18368
18368
|
}, function (_a) {
|
|
@@ -18379,7 +18379,7 @@ var PageNumber = newStyled.span(templateObject_4$t || (templateObject_4$t = __ma
|
|
|
18379
18379
|
var background = _a.background;
|
|
18380
18380
|
return background || 'unset';
|
|
18381
18381
|
});
|
|
18382
|
-
var templateObject_1$
|
|
18382
|
+
var templateObject_1$X, templateObject_2$I, templateObject_3$D, templateObject_4$u;
|
|
18383
18383
|
|
|
18384
18384
|
var Pagination = function (_a) {
|
|
18385
18385
|
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;
|
|
@@ -18425,7 +18425,7 @@ var Pagination = function (_a) {
|
|
|
18425
18425
|
}
|
|
18426
18426
|
return pages;
|
|
18427
18427
|
}, [from, page, showReducedPages, to]);
|
|
18428
|
-
return (jsxRuntime.jsxs(Container$
|
|
18428
|
+
return (jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(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 && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(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)), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18429
18429
|
};
|
|
18430
18430
|
|
|
18431
18431
|
var PaginatorBlog = function (_a) {
|
|
@@ -18439,12 +18439,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18439
18439
|
setPage(page);
|
|
18440
18440
|
onChange(page);
|
|
18441
18441
|
};
|
|
18442
|
-
return (jsxRuntime.jsxs(Container$
|
|
18442
|
+
return (jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18443
18443
|
? theme.colors.shades['white'].color
|
|
18444
18444
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18445
18445
|
};
|
|
18446
18446
|
|
|
18447
|
-
var Container$
|
|
18447
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
18448
18448
|
var width = _a.width;
|
|
18449
18449
|
return width;
|
|
18450
18450
|
}, function (_a) {
|
|
@@ -18460,14 +18460,14 @@ var Container$F = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
18460
18460
|
var PaymentMethod = function (_a) {
|
|
18461
18461
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18462
18462
|
var theme = useTheme();
|
|
18463
|
-
return (jsxRuntime.jsx(Container$
|
|
18463
|
+
return (jsxRuntime.jsx(Container$I, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
18464
18464
|
};
|
|
18465
|
-
var templateObject_1$
|
|
18465
|
+
var templateObject_1$W;
|
|
18466
18466
|
|
|
18467
|
-
var Container$
|
|
18467
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __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"])));
|
|
18468
18468
|
var IMAGE_WIDTH = '63px';
|
|
18469
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18470
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18469
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$H || (templateObject_2$H = __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);
|
|
18470
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$C || (templateObject_3$C = __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({
|
|
18471
18471
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18472
18472
|
}), IMAGE_WIDTH);
|
|
18473
18473
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18490,7 +18490,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18490
18490
|
margin: margin,
|
|
18491
18491
|
});
|
|
18492
18492
|
});
|
|
18493
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18493
|
+
var PriceContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = __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) {
|
|
18494
18494
|
var withTag = _a.withTag; _a.theme;
|
|
18495
18495
|
return withTag
|
|
18496
18496
|
? mediaQueries({
|
|
@@ -18509,9 +18509,9 @@ var SimpleOrderItem = function (_a) {
|
|
|
18509
18509
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18510
18510
|
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;
|
|
18511
18511
|
var theme = useTheme();
|
|
18512
|
-
return (jsxRuntime.jsxs(Container$
|
|
18512
|
+
return (jsxRuntime.jsxs(Container$H, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsxRuntime.jsx(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 && jsxRuntime.jsx(Gift, { children: "Limited Time Only" }, void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsxRuntime.jsx(Gift, { children: "GIFT" }, void 0)) : (jsxRuntime.jsx(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));
|
|
18513
18513
|
};
|
|
18514
|
-
var templateObject_1$
|
|
18514
|
+
var templateObject_1$V, templateObject_2$H, templateObject_3$C, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$i;
|
|
18515
18515
|
|
|
18516
18516
|
var P$1 = newStyled.p(function (_a) {
|
|
18517
18517
|
var color = _a.color;
|
|
@@ -18525,7 +18525,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18525
18525
|
margin: '0.938rem 4.188rem',
|
|
18526
18526
|
});
|
|
18527
18527
|
});
|
|
18528
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18528
|
+
var Bar = newStyled.div(templateObject_1$U || (templateObject_1$U = __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) {
|
|
18529
18529
|
var height = _a.height;
|
|
18530
18530
|
return height || '0.5rem';
|
|
18531
18531
|
}, function (_a) {
|
|
@@ -18554,7 +18554,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18554
18554
|
position: 'absolute',
|
|
18555
18555
|
});
|
|
18556
18556
|
});
|
|
18557
|
-
var Container$
|
|
18557
|
+
var Container$G = newStyled.div(function (_a) {
|
|
18558
18558
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18559
18559
|
return ({
|
|
18560
18560
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18568,14 +18568,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18568
18568
|
var ProgressBar = function (_a) {
|
|
18569
18569
|
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;
|
|
18570
18570
|
var theme = useTheme();
|
|
18571
|
-
return (jsxRuntime.jsxs(Container$
|
|
18571
|
+
return (jsxRuntime.jsxs(Container$G, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18572
18572
|
};
|
|
18573
|
-
var templateObject_1$
|
|
18573
|
+
var templateObject_1$U;
|
|
18574
18574
|
|
|
18575
|
-
var Container$
|
|
18576
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18577
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18578
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18575
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __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; });
|
|
18576
|
+
var Item$1 = newStyled.span(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
18577
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
18578
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$s || (templateObject_4$s = __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)'; });
|
|
18579
18579
|
var QuantityPicker = function (_a) {
|
|
18580
18580
|
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;
|
|
18581
18581
|
var theme = useTheme();
|
|
@@ -18598,9 +18598,9 @@ var QuantityPicker = function (_a) {
|
|
|
18598
18598
|
return clamp(value);
|
|
18599
18599
|
});
|
|
18600
18600
|
}, [value, clamp]);
|
|
18601
|
-
return (jsxRuntime.jsxs(Container$
|
|
18601
|
+
return (jsxRuntime.jsxs(Container$F, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(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));
|
|
18602
18602
|
};
|
|
18603
|
-
var templateObject_1$
|
|
18603
|
+
var templateObject_1$T, templateObject_2$G, templateObject_3$B, templateObject_4$s;
|
|
18604
18604
|
|
|
18605
18605
|
/* base styles & size variants */
|
|
18606
18606
|
var CustomRadioStyles$1 = {
|
|
@@ -18669,9 +18669,9 @@ var ContainerStyles$1 = {
|
|
|
18669
18669
|
},
|
|
18670
18670
|
};
|
|
18671
18671
|
|
|
18672
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18673
|
-
var Container$
|
|
18674
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18672
|
+
var Wrapper$3 = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18673
|
+
var Container$E = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18674
|
+
var Input$2 = newStyled.input(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
18675
18675
|
var disabled = _a.disabled;
|
|
18676
18676
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18677
18677
|
});
|
|
@@ -18679,7 +18679,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18679
18679
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18680
18680
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18681
18681
|
]; });
|
|
18682
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
18682
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$A || (templateObject_3$A = __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"])));
|
|
18683
18683
|
var RadioPrimary = function (_a) {
|
|
18684
18684
|
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 ? exports.ComponentSize.Medium : _d;
|
|
18685
18685
|
var theme = useTheme();
|
|
@@ -18687,9 +18687,9 @@ var RadioPrimary = function (_a) {
|
|
|
18687
18687
|
var value = event.currentTarget.value;
|
|
18688
18688
|
onChange({ value: value, label: label });
|
|
18689
18689
|
};
|
|
18690
|
-
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
18690
|
+
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$E, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18691
18691
|
};
|
|
18692
|
-
var templateObject_1$
|
|
18692
|
+
var templateObject_1$S, templateObject_2$F, templateObject_3$A;
|
|
18693
18693
|
|
|
18694
18694
|
var RadioGroupInput = function (_a) {
|
|
18695
18695
|
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 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18768,9 +18768,9 @@ var ContainerStyles = {
|
|
|
18768
18768
|
},
|
|
18769
18769
|
};
|
|
18770
18770
|
|
|
18771
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18772
|
-
var Container$
|
|
18773
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18771
|
+
var Wrapper$2 = newStyled.div(templateObject_1$R || (templateObject_1$R = __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"])));
|
|
18772
|
+
var Container$D = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18773
|
+
var Input$1 = newStyled.input(templateObject_2$E || (templateObject_2$E = __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) {
|
|
18774
18774
|
var disabled = _a.disabled;
|
|
18775
18775
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18776
18776
|
});
|
|
@@ -18778,7 +18778,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
18778
18778
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18779
18779
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
18780
18780
|
]; });
|
|
18781
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
18781
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
18782
18782
|
var theme = _a.theme;
|
|
18783
18783
|
return theme.component.radio.textSize;
|
|
18784
18784
|
}, function (_a) {
|
|
@@ -18792,9 +18792,9 @@ var ClubRadioInput = function (_a) {
|
|
|
18792
18792
|
var value = event.currentTarget.value;
|
|
18793
18793
|
onChange({ value: value, label: label });
|
|
18794
18794
|
};
|
|
18795
|
-
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$
|
|
18795
|
+
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$D, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(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));
|
|
18796
18796
|
};
|
|
18797
|
-
var templateObject_1$
|
|
18797
|
+
var templateObject_1$R, templateObject_2$E, templateObject_3$z;
|
|
18798
18798
|
|
|
18799
18799
|
var ClubRadioGroupInput = function (_a) {
|
|
18800
18800
|
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 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18822,10 +18822,10 @@ function formatDate(date, format) {
|
|
|
18822
18822
|
}
|
|
18823
18823
|
}
|
|
18824
18824
|
|
|
18825
|
-
var Container$
|
|
18826
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18827
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18828
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
18825
|
+
var Container$C = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
18826
|
+
var Content$1 = newStyled.div(templateObject_2$D || (templateObject_2$D = __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"])));
|
|
18827
|
+
var StarsContent = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18828
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
18829
18829
|
var DateText$1 = newStyled.span(templateObject_5$l || (templateObject_5$l = __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"])));
|
|
18830
18830
|
var ReviewerName$1 = newStyled.h1(templateObject_6$j || (templateObject_6$j = __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"])));
|
|
18831
18831
|
var VerifiedText = newStyled.h1(templateObject_7$h || (templateObject_7$h = __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"])));
|
|
@@ -18860,17 +18860,17 @@ var Review$1 = function (_a) {
|
|
|
18860
18860
|
}
|
|
18861
18861
|
}
|
|
18862
18862
|
}, [opened]);
|
|
18863
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
18863
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$C, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
18864
18864
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18865
18865
|
};
|
|
18866
|
-
var templateObject_1$
|
|
18866
|
+
var templateObject_1$Q, templateObject_2$D, templateObject_3$y, templateObject_4$r, templateObject_5$l, templateObject_6$j, templateObject_7$h, templateObject_8$c, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18867
18867
|
|
|
18868
18868
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18869
18869
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18870
|
-
var Container$
|
|
18871
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18872
|
-
var Content = newStyled.div(templateObject_3$
|
|
18873
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
18870
|
+
var Container$B = newStyled.div(templateObject_1$P || (templateObject_1$P = __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"])));
|
|
18871
|
+
var Heading = newStyled.div(templateObject_2$C || (templateObject_2$C = __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"])));
|
|
18872
|
+
var Content = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18873
|
+
var ReviewContainer = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18874
18874
|
var DateText = newStyled.span(templateObject_5$k || (templateObject_5$k = __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"])));
|
|
18875
18875
|
var VariantText = newStyled.div(templateObject_6$i || (templateObject_6$i = __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"])));
|
|
18876
18876
|
var ReviewerName = newStyled.h2(templateObject_7$g || (templateObject_7$g = __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"])));
|
|
@@ -18909,7 +18909,7 @@ var Review = function (_a) {
|
|
|
18909
18909
|
});
|
|
18910
18910
|
};
|
|
18911
18911
|
}, [randomId]);
|
|
18912
|
-
return (jsxRuntime.jsxs(Container$
|
|
18912
|
+
return (jsxRuntime.jsxs(Container$B, { children: [jsxRuntime.jsxs(Heading, { children: [jsxRuntime.jsx(ReviewerName, { children: reviewerName }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
18913
18913
|
__html: showMoreMobile
|
|
18914
18914
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
18915
18915
|
: description,
|
|
@@ -18919,12 +18919,12 @@ var Review = function (_a) {
|
|
|
18919
18919
|
: description,
|
|
18920
18920
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
18921
18921
|
};
|
|
18922
|
-
var templateObject_1$
|
|
18922
|
+
var templateObject_1$P, templateObject_2$C, templateObject_3$x, templateObject_4$q, templateObject_5$k, templateObject_6$i, templateObject_7$g, templateObject_8$b, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18923
18923
|
|
|
18924
|
-
var Container$
|
|
18925
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18926
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18927
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
18924
|
+
var Container$A = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
18925
|
+
var ReviewsContainer = newStyled.div(templateObject_2$B || (templateObject_2$B = __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"])));
|
|
18926
|
+
var ReviewsCount = newStyled.div(templateObject_3$w || (templateObject_3$w = __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"])));
|
|
18927
|
+
var ReviewsStars = newStyled.div(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
18928
18928
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$j || (templateObject_5$j = __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"])));
|
|
18929
18929
|
var ReviewsImages = newStyled.div(templateObject_6$h || (templateObject_6$h = __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"])));
|
|
18930
18930
|
var SummaryItem = newStyled.div(templateObject_7$f || (templateObject_7$f = __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) {
|
|
@@ -18935,19 +18935,19 @@ var ReviewsHeader = function (_a) {
|
|
|
18935
18935
|
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;
|
|
18936
18936
|
var starsNumber = 5;
|
|
18937
18937
|
var theme = useTheme();
|
|
18938
|
-
return (jsxRuntime.jsxs(Container$
|
|
18938
|
+
return (jsxRuntime.jsxs(Container$A, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18939
18939
|
};
|
|
18940
|
-
var templateObject_1$
|
|
18940
|
+
var templateObject_1$O, templateObject_2$B, templateObject_3$w, templateObject_4$p, templateObject_5$j, templateObject_6$h, templateObject_7$f;
|
|
18941
18941
|
|
|
18942
|
-
var Container$
|
|
18943
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
18942
|
+
var Container$z = newStyled.div(templateObject_1$N || (templateObject_1$N = __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"])));
|
|
18943
|
+
var Text$1 = newStyled.p(templateObject_2$A || (templateObject_2$A = __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; });
|
|
18944
18944
|
var ScrollToTop = function (_a) {
|
|
18945
18945
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18946
18946
|
var theme = useTheme();
|
|
18947
18947
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18948
|
-
return (jsxRuntime.jsxs(Container$
|
|
18948
|
+
return (jsxRuntime.jsxs(Container$z, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18949
18949
|
};
|
|
18950
|
-
var templateObject_1$
|
|
18950
|
+
var templateObject_1$N, templateObject_2$A;
|
|
18951
18951
|
|
|
18952
18952
|
var Input = newStyled.input(function (props) { return ({
|
|
18953
18953
|
padding: props.theme.component.input.padding,
|
|
@@ -18978,7 +18978,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
18978
18978
|
},
|
|
18979
18979
|
}); });
|
|
18980
18980
|
|
|
18981
|
-
var Container$
|
|
18981
|
+
var Container$y = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
18982
18982
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
18983
18983
|
}));
|
|
18984
18984
|
var Description = newStyled.div({
|
|
@@ -18995,25 +18995,25 @@ var Description = newStyled.div({
|
|
|
18995
18995
|
var ProductItem = function (_a) {
|
|
18996
18996
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
18997
18997
|
var theme = useTheme();
|
|
18998
|
-
return (jsxRuntime.jsxs(Container$
|
|
18998
|
+
return (jsxRuntime.jsxs(Container$y, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
18999
18999
|
};
|
|
19000
|
-
var templateObject_1$
|
|
19000
|
+
var templateObject_1$M;
|
|
19001
19001
|
|
|
19002
|
-
var Container$
|
|
19002
|
+
var Container$x = newStyled.div({
|
|
19003
19003
|
display: 'flex',
|
|
19004
19004
|
justifyContent: 'center',
|
|
19005
19005
|
padding: '1rem',
|
|
19006
19006
|
});
|
|
19007
19007
|
var Footer = function (_a) {
|
|
19008
19008
|
var text = _a.text, onClick = _a.onClick;
|
|
19009
|
-
return (jsxRuntime.jsx(Container$
|
|
19009
|
+
return (jsxRuntime.jsx(Container$x, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19010
19010
|
};
|
|
19011
19011
|
|
|
19012
19012
|
var Ul = newStyled.ul({
|
|
19013
19013
|
margin: '0px',
|
|
19014
19014
|
padding: '0px',
|
|
19015
19015
|
});
|
|
19016
|
-
var Li = newStyled.li(templateObject_1$
|
|
19016
|
+
var Li = newStyled.li(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
19017
19017
|
padding: [0, '0rem 1rem'],
|
|
19018
19018
|
borderRadius: [0, '0.5rem'],
|
|
19019
19019
|
}));
|
|
@@ -19025,31 +19025,31 @@ var Anchor = newStyled.a({
|
|
|
19025
19025
|
padding: 0,
|
|
19026
19026
|
textDecoration: 'none',
|
|
19027
19027
|
});
|
|
19028
|
-
var Container$
|
|
19028
|
+
var Container$w = newStyled.div(templateObject_2$z || (templateObject_2$z = __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({
|
|
19029
19029
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19030
19030
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19031
19031
|
borderRadius: ['0', '0.5rem'],
|
|
19032
19032
|
}));
|
|
19033
|
-
var Header$2 = newStyled.div(templateObject_3$
|
|
19033
|
+
var Header$2 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19034
19034
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19035
19035
|
}));
|
|
19036
19036
|
var ResultsPanel = function (_a) {
|
|
19037
19037
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19038
19038
|
var theme = useTheme();
|
|
19039
|
-
return (jsxRuntime.jsxs(Container$
|
|
19039
|
+
return (jsxRuntime.jsxs(Container$w, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19040
19040
|
};
|
|
19041
|
-
var templateObject_1$
|
|
19041
|
+
var templateObject_1$L, templateObject_2$z, templateObject_3$v;
|
|
19042
19042
|
|
|
19043
|
-
var Button$
|
|
19043
|
+
var Button$5 = newStyled.button(templateObject_1$K || (templateObject_1$K = __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({
|
|
19044
19044
|
right: ['1rem', '7.75rem'],
|
|
19045
19045
|
top: ['0.75rem', '0.75rem'],
|
|
19046
19046
|
}));
|
|
19047
19047
|
var ClearButton = function (_a) {
|
|
19048
19048
|
var onClick = _a.onClick;
|
|
19049
19049
|
var theme = useTheme();
|
|
19050
|
-
return (jsxRuntime.jsx(Button$
|
|
19050
|
+
return (jsxRuntime.jsx(Button$5, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19051
19051
|
};
|
|
19052
|
-
var templateObject_1$
|
|
19052
|
+
var templateObject_1$K;
|
|
19053
19053
|
|
|
19054
19054
|
var SearchIconContainer = newStyled.div({
|
|
19055
19055
|
display: 'flex',
|
|
@@ -19059,7 +19059,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19059
19059
|
background: 'white',
|
|
19060
19060
|
alignSelf: 'center',
|
|
19061
19061
|
});
|
|
19062
|
-
var StyledButton$1 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19062
|
+
var StyledButton$1 = newStyled(ButtonSecondary)(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
19063
19063
|
var SearchControl = function (_a) {
|
|
19064
19064
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19065
19065
|
var theme = useTheme();
|
|
@@ -19075,7 +19075,7 @@ var SearchControl = function (_a) {
|
|
|
19075
19075
|
}
|
|
19076
19076
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton$1, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19077
19077
|
};
|
|
19078
|
-
var templateObject_1$
|
|
19078
|
+
var templateObject_1$J;
|
|
19079
19079
|
|
|
19080
19080
|
var initialState$1 = { selectedOption: undefined, open: false, term: '' };
|
|
19081
19081
|
var reducer = function (state, action) {
|
|
@@ -19091,7 +19091,7 @@ var reducer = function (state, action) {
|
|
|
19091
19091
|
}
|
|
19092
19092
|
}
|
|
19093
19093
|
};
|
|
19094
|
-
var Container$
|
|
19094
|
+
var Container$v = newStyled.div({
|
|
19095
19095
|
position: 'relative',
|
|
19096
19096
|
display: 'flex',
|
|
19097
19097
|
});
|
|
@@ -19131,7 +19131,7 @@ var SearchBar = function (_a) {
|
|
|
19131
19131
|
if (e.cancelable) {
|
|
19132
19132
|
e.preventDefault();
|
|
19133
19133
|
}
|
|
19134
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
19134
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$v, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(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) {
|
|
19135
19135
|
if (e.key === 'Enter') {
|
|
19136
19136
|
if (e.cancelable) {
|
|
19137
19137
|
e.preventDefault();
|
|
@@ -19142,20 +19142,20 @@ var SearchBar = function (_a) {
|
|
|
19142
19142
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(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));
|
|
19143
19143
|
};
|
|
19144
19144
|
|
|
19145
|
-
var Container$
|
|
19146
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19147
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19148
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19145
|
+
var Container$u = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
19146
|
+
var BackArrow = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19147
|
+
var BoldSpan = newStyled.span(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
19148
|
+
var NormalSpan = newStyled.span(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
19149
19149
|
var SearchNavigationParents = newStyled.div(templateObject_5$i || (templateObject_5$i = __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"])));
|
|
19150
19150
|
var SearchNavigation = function (_a) {
|
|
19151
19151
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19152
|
-
return (jsxRuntime.jsxs(Container$
|
|
19152
|
+
return (jsxRuntime.jsxs(Container$u, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19153
19153
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19154
19154
|
}) }, void 0)] }, void 0));
|
|
19155
19155
|
};
|
|
19156
|
-
var templateObject_1$
|
|
19156
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$u, templateObject_4$o, templateObject_5$i;
|
|
19157
19157
|
|
|
19158
|
-
var Container$
|
|
19158
|
+
var Container$t = newStyled.div(templateObject_1$H || (templateObject_1$H = __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) {
|
|
19159
19159
|
var alignCenter = _a.alignCenter;
|
|
19160
19160
|
return alignCenter &&
|
|
19161
19161
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19165,26 +19165,26 @@ var Container$q = newStyled.div(templateObject_1$G || (templateObject_1$G = __ma
|
|
|
19165
19165
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19166
19166
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19167
19167
|
});
|
|
19168
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19169
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19168
|
+
var TitleText = newStyled.div(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
19169
|
+
var BannerText = newStyled.div(templateObject_3$t || (templateObject_3$t = __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"])));
|
|
19170
19170
|
var ShortBanner = function (_a) {
|
|
19171
19171
|
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;
|
|
19172
19172
|
var theme = useTheme();
|
|
19173
|
-
return (jsxRuntime.jsxs(Container$
|
|
19173
|
+
return (jsxRuntime.jsxs(Container$t, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19174
19174
|
};
|
|
19175
|
-
var templateObject_1$
|
|
19175
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$t;
|
|
19176
19176
|
|
|
19177
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19178
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19179
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19180
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19177
|
+
var TableElement$3 = newStyled.table(templateObject_1$G || (templateObject_1$G = __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; });
|
|
19178
|
+
var TableCell$3 = newStyled.td(templateObject_2$w || (templateObject_2$w = __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; });
|
|
19179
|
+
var TableHead$3 = newStyled.th(templateObject_3$s || (templateObject_3$s = __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; });
|
|
19180
|
+
var Label$2 = newStyled('div')(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
19181
19181
|
var TopLabel$1 = newStyled(Label$2)(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19182
19182
|
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19183
|
-
var Container$
|
|
19183
|
+
var Container$s = newStyled('div')(templateObject_7$e || (templateObject_7$e = __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"])));
|
|
19184
19184
|
var LabelText$1 = newStyled('span')(templateObject_8$a || (templateObject_8$a = __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"])));
|
|
19185
19185
|
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19186
19186
|
var TableRow$3 = newStyled.tr(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19187
|
-
var templateObject_1$
|
|
19187
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$s, templateObject_4$n, templateObject_5$h, templateObject_6$g, templateObject_7$e, templateObject_8$a, templateObject_9$7, templateObject_10$6;
|
|
19188
19188
|
|
|
19189
19189
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19190
19190
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19220,21 +19220,21 @@ var SizeChartTable = function (_a) {
|
|
|
19220
19220
|
var theme = useTheme();
|
|
19221
19221
|
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];
|
|
19222
19222
|
var isMultilabel = xLabel && yLabel;
|
|
19223
|
-
return (jsxRuntime.jsxs(Container$
|
|
19223
|
+
return (jsxRuntime.jsxs(Container$s, { children: [isMultilabel && (jsxRuntime.jsxs(LeftLabel$1, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText$1, { children: xLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(Column$2, { children: [isMultilabel && (jsxRuntime.jsxs(TopLabel$1, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText$1, { children: yLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(TableElement$3, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsxRuntime.jsx(TableRow$3, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ style: {
|
|
19224
19224
|
backgroundColor: getCellColor$2(index, cell),
|
|
19225
19225
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(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 (jsxRuntime.jsx(TableCell$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19226
19226
|
};
|
|
19227
19227
|
|
|
19228
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19229
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19230
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19231
|
-
var TableRow$2 = newStyled.tr(templateObject_4$
|
|
19228
|
+
var TableElement$2 = newStyled.table(templateObject_1$F || (templateObject_1$F = __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; });
|
|
19229
|
+
var TableCell$2 = newStyled.td(templateObject_2$v || (templateObject_2$v = __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; });
|
|
19230
|
+
var TableHead$2 = newStyled.th(templateObject_3$r || (templateObject_3$r = __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; });
|
|
19231
|
+
var TableRow$2 = newStyled.tr(templateObject_4$m || (templateObject_4$m = __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; });
|
|
19232
19232
|
var SizeTable = function (_a) {
|
|
19233
19233
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19234
19234
|
var theme = useTheme();
|
|
19235
19235
|
return (jsxRuntime.jsxs(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$2, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19236
19236
|
};
|
|
19237
|
-
var templateObject_1$
|
|
19237
|
+
var templateObject_1$F, templateObject_2$v, templateObject_3$r, templateObject_4$m;
|
|
19238
19238
|
|
|
19239
19239
|
var getStylesBySize$7 = function (size) {
|
|
19240
19240
|
switch (size) {
|
|
@@ -19261,7 +19261,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19261
19261
|
} });
|
|
19262
19262
|
};
|
|
19263
19263
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19264
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19264
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$E || (templateObject_1$E = __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));
|
|
19265
19265
|
};
|
|
19266
19266
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19267
19267
|
if (disabled)
|
|
@@ -19277,23 +19277,23 @@ var TextButton = function (_a) {
|
|
|
19277
19277
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19278
19278
|
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));
|
|
19279
19279
|
};
|
|
19280
|
-
var templateObject_1$
|
|
19280
|
+
var templateObject_1$E;
|
|
19281
19281
|
|
|
19282
|
-
var Container$
|
|
19283
|
-
var P = newStyled.p(templateObject_2$
|
|
19284
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19282
|
+
var Container$r = newStyled.div(templateObject_1$D || (templateObject_1$D = __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"])));
|
|
19283
|
+
var P = newStyled.p(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19284
|
+
var PercentageSpan = newStyled.span(templateObject_3$q || (templateObject_3$q = __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"])));
|
|
19285
19285
|
var SizeFitGuide = function (_a) {
|
|
19286
19286
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19287
|
-
return (jsxRuntime.jsxs(Container$
|
|
19287
|
+
return (jsxRuntime.jsxs(Container$r, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19288
19288
|
};
|
|
19289
|
-
var templateObject_1$
|
|
19289
|
+
var templateObject_1$D, templateObject_2$u, templateObject_3$q;
|
|
19290
19290
|
|
|
19291
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19291
|
+
var ButtonsContainer = newStyled.div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
19292
19292
|
var inline = _a.inline;
|
|
19293
19293
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19294
19294
|
});
|
|
19295
|
-
var Row = newStyled.div(templateObject_2$
|
|
19296
|
-
var templateObject_1$
|
|
19295
|
+
var Row = newStyled.div(templateObject_2$t || (templateObject_2$t = __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"])));
|
|
19296
|
+
var templateObject_1$C, templateObject_2$t;
|
|
19297
19297
|
|
|
19298
19298
|
var SizeSelector = function (_a) {
|
|
19299
19299
|
var _b;
|
|
@@ -19315,7 +19315,7 @@ var SizeSelector = function (_a) {
|
|
|
19315
19315
|
}) }), void 0)] }), void 0));
|
|
19316
19316
|
};
|
|
19317
19317
|
|
|
19318
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19318
|
+
var TabContainer = newStyled.div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
19319
19319
|
var titleSize = _a.titleSize;
|
|
19320
19320
|
return titleSize;
|
|
19321
19321
|
}, function (_a) {
|
|
@@ -19332,18 +19332,18 @@ var Tab = function (_a) {
|
|
|
19332
19332
|
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;
|
|
19333
19333
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(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));
|
|
19334
19334
|
};
|
|
19335
|
-
var templateObject_1$
|
|
19335
|
+
var templateObject_1$B;
|
|
19336
19336
|
|
|
19337
|
-
var Container$
|
|
19338
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19337
|
+
var Container$q = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19338
|
+
var TabList = newStyled.div(templateObject_2$s || (templateObject_2$s = __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) {
|
|
19339
19339
|
var backgroundColor = _a.backgroundColor;
|
|
19340
19340
|
return backgroundColor;
|
|
19341
19341
|
}, function (_a) {
|
|
19342
19342
|
var borderColor = _a.borderColor;
|
|
19343
19343
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19344
19344
|
});
|
|
19345
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19346
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19345
|
+
var TabContent = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19346
|
+
var TabSeparator = newStyled.div(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
19347
19347
|
var Tabs = function (_a) {
|
|
19348
19348
|
var _b;
|
|
19349
19349
|
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;
|
|
@@ -19352,16 +19352,16 @@ var Tabs = function (_a) {
|
|
|
19352
19352
|
return null;
|
|
19353
19353
|
}
|
|
19354
19354
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19355
|
-
return (jsxRuntime.jsxs(Container$
|
|
19355
|
+
return (jsxRuntime.jsxs(Container$q, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19356
19356
|
};
|
|
19357
|
-
var templateObject_1$
|
|
19357
|
+
var templateObject_1$A, templateObject_2$s, templateObject_3$p, templateObject_4$l;
|
|
19358
19358
|
|
|
19359
|
-
var Container$
|
|
19359
|
+
var Container$p = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
19360
19360
|
var Tag = function (_a) {
|
|
19361
19361
|
var text = _a.text, className = _a.className;
|
|
19362
|
-
return jsxRuntime.jsx(Container$
|
|
19362
|
+
return jsxRuntime.jsx(Container$p, __assign$1({ className: className }, { children: text }), void 0);
|
|
19363
19363
|
};
|
|
19364
|
-
var templateObject_1$
|
|
19364
|
+
var templateObject_1$z;
|
|
19365
19365
|
|
|
19366
19366
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19367
19367
|
switch (size) {
|
|
@@ -19472,9 +19472,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19472
19472
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19473
19473
|
};
|
|
19474
19474
|
|
|
19475
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
19476
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
19477
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19475
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
19476
|
+
var VideoOverlay$1 = newStyled.div(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
19477
|
+
var FullscreenVideo = newStyled.div(templateObject_3$o || (templateObject_3$o = __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"])));
|
|
19478
19478
|
var ImageVideo = function (_a) {
|
|
19479
19479
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19480
19480
|
var video = React$2.useRef(null);
|
|
@@ -19494,12 +19494,12 @@ var ImageVideo = function (_a) {
|
|
|
19494
19494
|
height: '100%',
|
|
19495
19495
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19496
19496
|
};
|
|
19497
|
-
var templateObject_1$
|
|
19497
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$o;
|
|
19498
19498
|
|
|
19499
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19500
|
-
var ContainerMobile = css(templateObject_2$
|
|
19501
|
-
var Container$
|
|
19502
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19499
|
+
var ContainerDesktop = css(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
19500
|
+
var ContainerMobile = css(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
19501
|
+
var Container$o = newStyled.div(templateObject_3$n || (templateObject_3$n = __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);
|
|
19502
|
+
var TextContainer = newStyled.div(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
19503
19503
|
var TextWithImage = function (_a) {
|
|
19504
19504
|
var _b, _c, _d, _e;
|
|
19505
19505
|
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"]);
|
|
@@ -19519,7 +19519,7 @@ var TextWithImage = function (_a) {
|
|
|
19519
19519
|
// @ts-ignore
|
|
19520
19520
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19521
19521
|
};
|
|
19522
|
-
return (jsxs(Container$
|
|
19522
|
+
return (jsxs(Container$o, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile, onClick: buttonAction, testId: buttomText, css: {
|
|
19523
19523
|
backgroundColor: props.btnBGColor,
|
|
19524
19524
|
color: '#ffffff',
|
|
19525
19525
|
border: props.btnBGColor,
|
|
@@ -19529,25 +19529,25 @@ var TextWithImage = function (_a) {
|
|
|
19529
19529
|
},
|
|
19530
19530
|
} }, 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));
|
|
19531
19531
|
};
|
|
19532
|
-
var templateObject_1$
|
|
19532
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$n, templateObject_4$k;
|
|
19533
19533
|
|
|
19534
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19534
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19535
19535
|
var timerColor = _a.timerColor;
|
|
19536
19536
|
return timerColor || '';
|
|
19537
19537
|
});
|
|
19538
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19538
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$p || (templateObject_2$p = __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) {
|
|
19539
19539
|
var timerColor = _a.timerColor;
|
|
19540
19540
|
return timerColor || '';
|
|
19541
19541
|
});
|
|
19542
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19542
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$m || (templateObject_3$m = __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) {
|
|
19543
19543
|
var theme = _a.theme;
|
|
19544
19544
|
return theme.colors.shades.white.color;
|
|
19545
19545
|
}, function (_a) {
|
|
19546
19546
|
var theme = _a.theme;
|
|
19547
19547
|
return theme.colors.shades.white.color;
|
|
19548
19548
|
});
|
|
19549
|
-
var Unit = newStyled.p(templateObject_4$
|
|
19550
|
-
var templateObject_1$
|
|
19549
|
+
var Unit = newStyled.p(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
19550
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$m, templateObject_4$j;
|
|
19551
19551
|
|
|
19552
19552
|
var HRS = 'HRS';
|
|
19553
19553
|
var MIN = 'MIN';
|
|
@@ -19590,14 +19590,14 @@ var Timer = function (_a) {
|
|
|
19590
19590
|
|
|
19591
19591
|
var slideInAnimation = function (distanceFromTop) {
|
|
19592
19592
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
19593
|
-
return keyframes(templateObject_1$
|
|
19593
|
+
return keyframes(templateObject_1$v || (templateObject_1$v = __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);
|
|
19594
19594
|
};
|
|
19595
19595
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
19596
19596
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
19597
|
-
return keyframes(templateObject_2$
|
|
19597
|
+
return keyframes(templateObject_2$o || (templateObject_2$o = __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);
|
|
19598
19598
|
};
|
|
19599
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
19600
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
19599
|
+
var ToastContainer = newStyled.div(templateObject_3$l || (templateObject_3$l = __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"])));
|
|
19600
|
+
var ToastContent = newStyled.div(templateObject_4$i || (templateObject_4$i = __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) {
|
|
19601
19601
|
var distanceFromTop = _a.distanceFromTop;
|
|
19602
19602
|
return distanceFromTop || '124px';
|
|
19603
19603
|
}, function (_a) {
|
|
@@ -19615,7 +19615,7 @@ var ToastText = newStyled.p(templateObject_5$g || (templateObject_5$g = __makeTe
|
|
|
19615
19615
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
19616
19616
|
});
|
|
19617
19617
|
var CloseIcon = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
19618
|
-
var templateObject_1$
|
|
19618
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$l, templateObject_4$i, templateObject_5$g, templateObject_6$f;
|
|
19619
19619
|
|
|
19620
19620
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
19621
19621
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -19635,9 +19635,9 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
19635
19635
|
});
|
|
19636
19636
|
Toast.displayName = 'Toast';
|
|
19637
19637
|
|
|
19638
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19639
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19640
|
-
var Currency = newStyled.span(templateObject_3$
|
|
19638
|
+
var Wrapper$1 = newStyled.div(templateObject_1$u || (templateObject_1$u = __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"])));
|
|
19639
|
+
var GrandTotal = newStyled.h1(templateObject_2$n || (templateObject_2$n = __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; });
|
|
19640
|
+
var Currency = newStyled.span(templateObject_3$k || (templateObject_3$k = __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) {
|
|
19641
19641
|
var theme = _a.theme;
|
|
19642
19642
|
return theme.component.total.basicTotal.currency.color;
|
|
19643
19643
|
}, function (_a) {
|
|
@@ -19650,11 +19650,11 @@ var Currency = newStyled.span(templateObject_3$j || (templateObject_3$j = __make
|
|
|
19650
19650
|
var theme = _a.theme;
|
|
19651
19651
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19652
19652
|
});
|
|
19653
|
-
var Container$
|
|
19653
|
+
var Container$n = newStyled.div(templateObject_4$h || (templateObject_4$h = __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) {
|
|
19654
19654
|
var highlightColor = _a.highlightColor;
|
|
19655
19655
|
return highlightColor;
|
|
19656
19656
|
});
|
|
19657
|
-
var TotalContainer = newStyled(Container$
|
|
19657
|
+
var TotalContainer = newStyled(Container$n)(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
19658
19658
|
var showTotalLabel = _a.showTotalLabel;
|
|
19659
19659
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19660
19660
|
});
|
|
@@ -19664,27 +19664,27 @@ var DiscountAmount = newStyled.h3(templateObject_7$d || (templateObject_7$d = __
|
|
|
19664
19664
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19665
19665
|
});
|
|
19666
19666
|
var TotalLabel = newStyled(Text$7)(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19667
|
-
var templateObject_1$
|
|
19667
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$k, templateObject_4$h, templateObject_5$f, templateObject_6$e, templateObject_7$d, templateObject_8$9;
|
|
19668
19668
|
|
|
19669
19669
|
var Total = function (_a) {
|
|
19670
19670
|
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;
|
|
19671
19671
|
var theme = useTheme();
|
|
19672
|
-
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
19672
|
+
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$n, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19673
19673
|
};
|
|
19674
19674
|
|
|
19675
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19675
|
+
var Wrapper = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19676
19676
|
var color = _a.color;
|
|
19677
19677
|
return color;
|
|
19678
19678
|
});
|
|
19679
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19680
|
-
var Item = newStyled.h4(templateObject_3$
|
|
19679
|
+
var ItemContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __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"])));
|
|
19680
|
+
var Item = newStyled.h4(templateObject_3$j || (templateObject_3$j = __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) {
|
|
19681
19681
|
var theme = _a.theme;
|
|
19682
19682
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19683
19683
|
}, function (_a) {
|
|
19684
19684
|
var theme = _a.theme;
|
|
19685
19685
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19686
19686
|
});
|
|
19687
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
19687
|
+
var CouponItem = newStyled(Item)(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19688
19688
|
var color = _a.color;
|
|
19689
19689
|
return color;
|
|
19690
19690
|
});
|
|
@@ -19697,17 +19697,17 @@ var Subtotal = function (_a) {
|
|
|
19697
19697
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19698
19698
|
})] }), void 0));
|
|
19699
19699
|
};
|
|
19700
|
-
var templateObject_1$
|
|
19700
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$j, templateObject_4$g;
|
|
19701
19701
|
|
|
19702
19702
|
var Totals = {
|
|
19703
19703
|
Total: Total,
|
|
19704
19704
|
Subtotal: Subtotal,
|
|
19705
19705
|
};
|
|
19706
19706
|
|
|
19707
|
-
var Container$
|
|
19708
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19709
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
19710
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
19707
|
+
var Container$m = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19708
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19709
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$i || (templateObject_3$i = __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; });
|
|
19710
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$f || (templateObject_4$f = __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'); });
|
|
19711
19711
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$e || (templateObject_5$e = __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"])));
|
|
19712
19712
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$d || (templateObject_6$d = __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) {
|
|
19713
19713
|
return props.finishedTrack
|
|
@@ -19745,7 +19745,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19745
19745
|
}
|
|
19746
19746
|
return '30px';
|
|
19747
19747
|
};
|
|
19748
|
-
return (jsxRuntime.jsxs(Container$
|
|
19748
|
+
return (jsxRuntime.jsxs(Container$m, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19749
19749
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19750
19750
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsx(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
19751
19751
|
? activeCheckpointColor
|
|
@@ -19756,12 +19756,12 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19756
19756
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19757
19757
|
})] }), void 0));
|
|
19758
19758
|
};
|
|
19759
|
-
var templateObject_1$
|
|
19759
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$e, templateObject_6$d, templateObject_7$c, templateObject_8$8, templateObject_9$6, templateObject_10$5, templateObject_11$3;
|
|
19760
19760
|
|
|
19761
|
-
var Container$
|
|
19762
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19763
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
19764
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
19761
|
+
var Container$l = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19762
|
+
var CheckpointContainer = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19763
|
+
var CheckpointDate = newStyled.div(templateObject_3$h || (templateObject_3$h = __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; });
|
|
19764
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$e || (templateObject_4$e = __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'); });
|
|
19765
19765
|
var CheckpointStatus = newStyled.p(templateObject_5$d || (templateObject_5$d = __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'); });
|
|
19766
19766
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$c || (templateObject_6$c = __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) {
|
|
19767
19767
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
@@ -19787,7 +19787,7 @@ var TrackingProgress = function (_a) {
|
|
|
19787
19787
|
}
|
|
19788
19788
|
return '30px';
|
|
19789
19789
|
};
|
|
19790
|
-
return (jsxRuntime.jsxs(Container$
|
|
19790
|
+
return (jsxRuntime.jsxs(Container$l, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19791
19791
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19792
19792
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
19793
19793
|
? theme.colors.semantic.informative.color
|
|
@@ -19796,16 +19796,16 @@ var TrackingProgress = function (_a) {
|
|
|
19796
19796
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19797
19797
|
})] }), void 0));
|
|
19798
19798
|
};
|
|
19799
|
-
var templateObject_1$
|
|
19799
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$d, templateObject_6$c, templateObject_7$b, templateObject_8$7;
|
|
19800
19800
|
|
|
19801
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
19802
|
-
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$
|
|
19803
|
-
var AutoShipBodyWrapper = newStyled.div(templateObject_3$
|
|
19804
|
-
var AutoShipBodyTitle = newStyled.div(templateObject_4$
|
|
19801
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n padding: 10px;\n"])));
|
|
19802
|
+
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$j || (templateObject_2$j = __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"])));
|
|
19803
|
+
var AutoShipBodyWrapper = newStyled.div(templateObject_3$g || (templateObject_3$g = __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"])));
|
|
19804
|
+
var AutoShipBodyTitle = newStyled.div(templateObject_4$d || (templateObject_4$d = __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"])));
|
|
19805
19805
|
var AutoShipBodyListItem = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
19806
19806
|
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 6px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 6px 10px 10px 10px;\n"])));
|
|
19807
19807
|
var CheckboxInput = newStyled.input(templateObject_7$a || (templateObject_7$a = __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"])));
|
|
19808
|
-
var templateObject_1$
|
|
19808
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$c, templateObject_6$b, templateObject_7$a;
|
|
19809
19809
|
|
|
19810
19810
|
function AutoshipOfferCard(_a) {
|
|
19811
19811
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -19845,15 +19845,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
19845
19845
|
justifyContent: 'center',
|
|
19846
19846
|
gap: '10px',
|
|
19847
19847
|
});
|
|
19848
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
19848
|
+
var StyledContent = newStyled.div(templateObject_1$p || (templateObject_1$p = __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) {
|
|
19849
19849
|
var bgColor = _a.bgColor;
|
|
19850
19850
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
19851
19851
|
}, function (_a) {
|
|
19852
19852
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
19853
19853
|
return width;
|
|
19854
19854
|
});
|
|
19855
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
19856
|
-
var templateObject_1$
|
|
19855
|
+
var StyledController = newStyled.div(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
19856
|
+
var templateObject_1$p, templateObject_2$i;
|
|
19857
19857
|
|
|
19858
19858
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
19859
19859
|
var background = _a.background, width = _a.width;
|
|
@@ -19894,14 +19894,14 @@ var BasicAccordion = function (_a) {
|
|
|
19894
19894
|
} }), void 0));
|
|
19895
19895
|
};
|
|
19896
19896
|
|
|
19897
|
-
var ContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
19898
|
-
var ImageWrapper = newStyled.div(templateObject_2$
|
|
19899
|
-
var ImageComponent = newStyled(Image$3)(templateObject_3$
|
|
19900
|
-
var RightComponentWrapper = newStyled.div(templateObject_4$
|
|
19897
|
+
var ContainerWrapper$1 = newStyled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
19898
|
+
var ImageWrapper = newStyled.div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
19899
|
+
var ImageComponent = newStyled(Image$3)(templateObject_3$f || (templateObject_3$f = __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"])));
|
|
19900
|
+
var RightComponentWrapper = newStyled.div(templateObject_4$c || (templateObject_4$c = __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"])));
|
|
19901
19901
|
var TitleWrapper = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
19902
19902
|
var SubTitleWrapper = newStyled.div(templateObject_6$a || (templateObject_6$a = __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"])));
|
|
19903
19903
|
var ButtonsWrapper = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __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"])));
|
|
19904
|
-
var templateObject_1$
|
|
19904
|
+
var templateObject_1$o, templateObject_2$h, templateObject_3$f, templateObject_4$c, templateObject_5$b, templateObject_6$a, templateObject_7$9;
|
|
19905
19905
|
|
|
19906
19906
|
function CartItemCard(_a) {
|
|
19907
19907
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -19947,9 +19947,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
19947
19947
|
var Shades700Color = '#292929';
|
|
19948
19948
|
var PrimaryColor = '#f7a08b';
|
|
19949
19949
|
var ClubBorderColor = '#882a2b';
|
|
19950
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
19951
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
19952
|
-
var ContainerBase$1 = newStyled.div(templateObject_3$
|
|
19950
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19951
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __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);
|
|
19952
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$e || (templateObject_3$e = __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) {
|
|
19953
19953
|
var selected = _a.selected;
|
|
19954
19954
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
19955
19955
|
}, function (_a) {
|
|
@@ -19958,7 +19958,7 @@ var ContainerBase$1 = newStyled.div(templateObject_3$d || (templateObject_3$d =
|
|
|
19958
19958
|
? "& label {\n font-weight: 700;\n }"
|
|
19959
19959
|
: '';
|
|
19960
19960
|
}, PrimaryColor);
|
|
19961
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
19961
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$b || (templateObject_4$b = __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) {
|
|
19962
19962
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
19963
19963
|
return (isNoMember && selected ? Shades700Color : '');
|
|
19964
19964
|
}, function (_a) {
|
|
@@ -19989,8 +19989,8 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$4 || (templateOb
|
|
|
19989
19989
|
? ClubBorderColor
|
|
19990
19990
|
: Shades200Color;
|
|
19991
19991
|
});
|
|
19992
|
-
var Container$
|
|
19993
|
-
var templateObject_1$
|
|
19992
|
+
var Container$k = newStyled.div(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
19993
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$e, templateObject_4$b, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$6, templateObject_9$5, templateObject_10$4, templateObject_11$2;
|
|
19994
19994
|
|
|
19995
19995
|
var ClubOfferSelector = function (_a) {
|
|
19996
19996
|
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;
|
|
@@ -20029,25 +20029,25 @@ var ClubOfferSelector = function (_a) {
|
|
|
20029
20029
|
onChange(__assign$1({}, dataObj));
|
|
20030
20030
|
};
|
|
20031
20031
|
var isSelected = radioIds.clubOfferSelector.id === radioCheck.id;
|
|
20032
|
-
return (jsxRuntime.jsxs(Container$
|
|
20032
|
+
return (jsxRuntime.jsxs(Container$k, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$1, __assign$1({ onClick: function () { return handleChange(radioIds.clubOfferSelector, 'radio'); }, "data-testid": "subscription-purchase-block", selected: isSelected }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsxs(SubscriptionHeader$1, __assign$1({ isSelected: isSelected }, { children: [jsxRuntime.jsx(FlexContainer$1, { children: jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.clubOfferSelector.id, id: radioIds.clubOfferSelector.id, value: radioIds.clubOfferSelector.id, checked: isSelected, size: exports.ComponentSize.Medium, style: {
|
|
20033
20033
|
marginRight: '10px',
|
|
20034
20034
|
}, labelStyle: {
|
|
20035
20035
|
color: ClubBorderColor,
|
|
20036
20036
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsxRuntime.jsx(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsxRuntime.jsx(BenefitsContainer$1, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsxRuntime.jsx(Benefit$1, { children: jsxRuntime.jsx(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxRuntime.jsxs(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: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$1, { isNoMember: true, testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20037
20037
|
};
|
|
20038
20038
|
|
|
20039
|
-
var ContainerWrapper = newStyled.div(templateObject_1$
|
|
20039
|
+
var ContainerWrapper = newStyled.div(templateObject_1$m || (templateObject_1$m = __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) {
|
|
20040
20040
|
var $checked = _a.$checked;
|
|
20041
20041
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20042
20042
|
}, function (_a) {
|
|
20043
20043
|
var $checked = _a.$checked;
|
|
20044
20044
|
return ($checked ? '#FFE1B8' : '#E5E5E5');
|
|
20045
20045
|
});
|
|
20046
|
-
var CardHeaderWrapper = newStyled.div(templateObject_2$
|
|
20047
|
-
var CardBody = newStyled.div(templateObject_3$
|
|
20048
|
-
var ClubCopyWrapper = newStyled.div(templateObject_4$
|
|
20046
|
+
var CardHeaderWrapper = newStyled.div(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
20047
|
+
var CardBody = newStyled.div(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
20048
|
+
var ClubCopyWrapper = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20049
20049
|
var ClubCopyTextWrapper = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
20050
|
-
var templateObject_1$
|
|
20050
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$d, templateObject_4$a, templateObject_5$9;
|
|
20051
20051
|
|
|
20052
20052
|
function Card(_a) {
|
|
20053
20053
|
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;
|
|
@@ -20072,10 +20072,10 @@ var ImageContainer$1 = newStyled.div(function (_a) {
|
|
|
20072
20072
|
height: height,
|
|
20073
20073
|
});
|
|
20074
20074
|
});
|
|
20075
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
20076
|
-
var Container$
|
|
20077
|
-
var ProdCardContainer$2 = newStyled.div(templateObject_3$
|
|
20078
|
-
var Title$2 = newStyled.p(templateObject_4$
|
|
20075
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
20076
|
+
var Container$j = newStyled.a(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
20077
|
+
var ProdCardContainer$2 = newStyled.div(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
20078
|
+
var Title$2 = newStyled.p(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\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 color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20079
20079
|
newStyled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20080
20080
|
var style = _a.style;
|
|
20081
20081
|
return style.width;
|
|
@@ -20086,7 +20086,7 @@ var BottomTagContainer$6 = newStyled.div(templateObject_6$8 || (templateObject_6
|
|
|
20086
20086
|
});
|
|
20087
20087
|
newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
20088
20088
|
var DiscountLabel$2 = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n &:empty {\n display: none;\n }\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n &:empty {\n display: none;\n }\n"])));
|
|
20089
|
-
var templateObject_1$
|
|
20089
|
+
var templateObject_1$l, templateObject_2$e, templateObject_3$c, templateObject_4$9, templateObject_5$8, templateObject_6$8, templateObject_7$7, templateObject_8$5;
|
|
20090
20090
|
|
|
20091
20091
|
var PriceLabelDisplay = function (_a) {
|
|
20092
20092
|
var price = _a.price, discountTag = _a.discountTag;
|
|
@@ -20123,7 +20123,7 @@ var getStylesBySize$2 = function (size) {
|
|
|
20123
20123
|
};
|
|
20124
20124
|
}
|
|
20125
20125
|
};
|
|
20126
|
-
var TopTagContainer$6 = newStyled.div(templateObject_1$
|
|
20126
|
+
var TopTagContainer$6 = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20127
20127
|
var style = _a.style;
|
|
20128
20128
|
return style.width;
|
|
20129
20129
|
});
|
|
@@ -20139,9 +20139,9 @@ var ProductCard = function (_a) {
|
|
|
20139
20139
|
_a[exports.ComponentSize.Small] = 2,
|
|
20140
20140
|
_a)[size];
|
|
20141
20141
|
}, [size]);
|
|
20142
|
-
return (jsxRuntime.jsxs(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$
|
|
20142
|
+
return (jsxRuntime.jsxs(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$j, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxRuntime.jsxs(ImageContainer$1, __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: [jsxRuntime.jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsxRuntime.jsx(TopTagContainer$6, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$6, __assign$1({ style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsxRuntime.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 }, void 0)), imageHover ? (jsxRuntime.jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", 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), jsxRuntime.jsxs(Container$j, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: "".concat(size === exports.ComponentSize.Small ? 'start' : 'center') } }, { children: [jsxRuntime.jsx(Spacing, { size: space }, void 0), ratingPos !== 'bottom' && (jsxRuntime.jsx(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0)), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), priceLoading ? (jsxRuntime.jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxRuntime.jsx(PriceLabelDisplay, { price: price, discountTag: discountTag }, void 0)), jsxRuntime.jsx(Spacing, { size: space }, void 0), ratingPos === 'bottom' && (jsxRuntime.jsx(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0))] }), void 0)] }), void 0));
|
|
20143
20143
|
};
|
|
20144
|
-
var templateObject_1$
|
|
20144
|
+
var templateObject_1$k;
|
|
20145
20145
|
|
|
20146
20146
|
var ImageContainer = newStyled.div(function (_a) {
|
|
20147
20147
|
var width = _a.width, height = _a.height;
|
|
@@ -20151,10 +20151,10 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
20151
20151
|
height: height,
|
|
20152
20152
|
});
|
|
20153
20153
|
});
|
|
20154
|
-
var DiscountLabel$1 = newStyled.div(templateObject_1$
|
|
20155
|
-
var ImageHoverContainer = newStyled.img(templateObject_2$
|
|
20156
|
-
var Container$
|
|
20157
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_4$
|
|
20154
|
+
var DiscountLabel$1 = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
20155
|
+
var ImageHoverContainer = newStyled.img(templateObject_2$d || (templateObject_2$d = __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"])));
|
|
20156
|
+
var Container$i = newStyled.a(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\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: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
20157
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __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"])));
|
|
20158
20158
|
var Title$1 = newStyled.p(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\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 color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20159
20159
|
var TopTagContainer$5 = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20160
20160
|
var style = _a.style;
|
|
@@ -20173,7 +20173,7 @@ var BottomTagContainer$5 = newStyled.div(templateObject_7$6 || (templateObject_7
|
|
|
20173
20173
|
var style = _a.style;
|
|
20174
20174
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
20175
20175
|
});
|
|
20176
|
-
var templateObject_1$
|
|
20176
|
+
var templateObject_1$j, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$7, templateObject_6$7, templateObject_7$6;
|
|
20177
20177
|
|
|
20178
20178
|
var getStylesBySize$1 = function (size) {
|
|
20179
20179
|
switch (size) {
|
|
@@ -20233,7 +20233,7 @@ var ProductCardV2 = function (_a) {
|
|
|
20233
20233
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
|
|
20234
20234
|
return (jsxRuntime.jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
20235
20235
|
};
|
|
20236
|
-
return (jsxRuntime.jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$
|
|
20236
|
+
return (jsxRuntime.jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$i, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxRuntime.jsxs(ImageContainer, __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: [jsxRuntime.jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsxRuntime.jsx(TopTagContainer$5, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$5, __assign$1({ "data-testid": "bottom-tag-container", style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsxRuntime.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 }, void 0)), imageHover ? (jsxRuntime.jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", 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), jsxRuntime.jsxs(Container$i, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer" }, { children: [jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", underline: true }, { children: colorsCopy }), void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(RatingDisplay, {}, void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Title$1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsxRuntime.jsxs("div", __assign$1({ style: {
|
|
20237
20237
|
display: 'flex',
|
|
20238
20238
|
alignItems: 'flex-start',
|
|
20239
20239
|
gap: '5px',
|
|
@@ -20249,10 +20249,10 @@ newStyled.div(function (_a) {
|
|
|
20249
20249
|
height: height,
|
|
20250
20250
|
});
|
|
20251
20251
|
});
|
|
20252
|
-
var DiscountLabel = newStyled.div(templateObject_1$
|
|
20253
|
-
newStyled.img(templateObject_2$
|
|
20254
|
-
var Container$
|
|
20255
|
-
var ProdCardContainer = newStyled.div(templateObject_4$
|
|
20252
|
+
var DiscountLabel = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
20253
|
+
newStyled.img(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
20254
|
+
var Container$h = newStyled.a(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\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: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
20255
|
+
var ProdCardContainer = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"])));
|
|
20256
20256
|
var Title = newStyled.p(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\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 color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20257
20257
|
newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20258
20258
|
var style = _a.style;
|
|
@@ -20271,7 +20271,7 @@ newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([
|
|
|
20271
20271
|
var style = _a.style;
|
|
20272
20272
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
20273
20273
|
});
|
|
20274
|
-
var templateObject_1$
|
|
20274
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$a, templateObject_4$7, templateObject_5$6, templateObject_6$6, templateObject_7$5;
|
|
20275
20275
|
|
|
20276
20276
|
var getStylesBySize = function (size) {
|
|
20277
20277
|
switch (size) {
|
|
@@ -20320,7 +20320,7 @@ var ProductCardV3 = function (_a) {
|
|
|
20320
20320
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
|
|
20321
20321
|
return (jsxRuntime.jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
20322
20322
|
};
|
|
20323
|
-
return (jsxRuntime.jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsx(Container$
|
|
20323
|
+
return (jsxRuntime.jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsx(Container$h, __assign$1({ "data-testid": "first-image-div", as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick, style: { marginRight: '-90px' } }, { children: jsxRuntime.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 }, void 0) }), void 0), jsxRuntime.jsxs(Container$h, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer" }, { children: [jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex', justifyContent: 'space-between' } }, { children: [jsxRuntime.jsx(Title, __assign$1({ theme: theme, align: alignName, style: { fontSize: '14px' } }, { children: title }), void 0), jsxRuntime.jsx("button", __assign$1({ "data-testid": "quick-eye-button", style: {
|
|
20324
20324
|
margin: '5x 0 0 45px',
|
|
20325
20325
|
backgroundColor: 'transparent',
|
|
20326
20326
|
border: 'none',
|
|
@@ -20370,7 +20370,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
20370
20370
|
}, [preventTouch, ref, touchStart]);
|
|
20371
20371
|
}
|
|
20372
20372
|
|
|
20373
|
-
var Container$
|
|
20373
|
+
var Container$g = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
20374
20374
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20375
20375
|
return borderRadiusVariant &&
|
|
20376
20376
|
"\n border-radius: 40px;\n ";
|
|
@@ -20379,11 +20379,11 @@ var Container$d = newStyled.div(templateObject_1$g || (templateObject_1$g = __ma
|
|
|
20379
20379
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
20380
20380
|
});
|
|
20381
20381
|
// max-height: 31.875rem;
|
|
20382
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
20383
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_3$
|
|
20384
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_4$
|
|
20385
|
-
var NavButtonContainer$
|
|
20386
|
-
var Button$
|
|
20382
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
20383
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
20384
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20385
|
+
var NavButtonContainer$3 = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
20386
|
+
var Button$4 = newStyled.button(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
20387
20387
|
var settings$3 = {
|
|
20388
20388
|
dots: true,
|
|
20389
20389
|
infinite: false,
|
|
@@ -20440,14 +20440,14 @@ var ImageProductSlide = function (_a) {
|
|
|
20440
20440
|
}
|
|
20441
20441
|
}
|
|
20442
20442
|
}, [contents, selectedValue]);
|
|
20443
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
20443
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$g, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20444
20444
|
var _a;
|
|
20445
20445
|
var activeSlide = contents[e];
|
|
20446
20446
|
// If autoplay is true and iframe is the active slide, play the video
|
|
20447
20447
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
20448
20448
|
autoplay ? _playVideo() : _stopVideo();
|
|
20449
20449
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
20450
|
-
} }, settings$3, { nextArrow: jsxRuntime.jsx(NavButtonContainer$
|
|
20450
|
+
} }, settings$3, { nextArrow: jsxRuntime.jsx(NavButtonContainer$3, { children: jsxRuntime.jsx(Button$4, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer$3, { children: jsxRuntime.jsx(Button$4, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content, idx) {
|
|
20451
20451
|
var _a;
|
|
20452
20452
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
20453
20453
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
@@ -20460,16 +20460,16 @@ var ImageProductSlide = function (_a) {
|
|
|
20460
20460
|
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes$1(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
20461
20461
|
}) }), void 0) }), void 0)] }, void 0));
|
|
20462
20462
|
};
|
|
20463
|
-
var templateObject_1$
|
|
20463
|
+
var templateObject_1$h, templateObject_2$b, templateObject_3$9, templateObject_4$6, templateObject_5$5, templateObject_6$5;
|
|
20464
20464
|
|
|
20465
|
-
var Container$
|
|
20465
|
+
var Container$f = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
20466
20466
|
var ProductGalleryMobile = function (_a) {
|
|
20467
20467
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
|
|
20468
20468
|
var _e = React$2.useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
20469
20469
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
20470
|
-
return (jsxRuntime.jsx(Container$
|
|
20470
|
+
return (jsxRuntime.jsx(Container$f, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); }, itemsOnViewport: itemsOnViewport }, void 0) }), void 0));
|
|
20471
20471
|
};
|
|
20472
|
-
var templateObject_1$
|
|
20472
|
+
var templateObject_1$g;
|
|
20473
20473
|
|
|
20474
20474
|
function _extends() {
|
|
20475
20475
|
_extends = Object.assign || function (target) {
|
|
@@ -20736,27 +20736,27 @@ function useSwipeable(options) {
|
|
|
20736
20736
|
return handlers;
|
|
20737
20737
|
}
|
|
20738
20738
|
|
|
20739
|
-
var Button$
|
|
20739
|
+
var Button$3 = newStyled.button(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
20740
20740
|
var ArrowButton = function (_a) {
|
|
20741
20741
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
20742
|
-
return (jsxRuntime.jsx(Button$
|
|
20742
|
+
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
20743
20743
|
};
|
|
20744
|
-
var templateObject_1$
|
|
20744
|
+
var templateObject_1$f;
|
|
20745
20745
|
|
|
20746
|
-
var Container$
|
|
20746
|
+
var Container$e = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
20747
20747
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
20748
20748
|
var SlideDots = function (_a) {
|
|
20749
20749
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
20750
20750
|
var theme = useTheme();
|
|
20751
|
-
return (jsxRuntime.jsx(Container$
|
|
20751
|
+
return (jsxRuntime.jsx(Container$e, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
20752
20752
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
20753
20753
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
20754
20754
|
};
|
|
20755
|
-
var templateObject_1$
|
|
20755
|
+
var templateObject_1$e;
|
|
20756
20756
|
|
|
20757
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
20758
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
20759
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
20757
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
20758
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
20759
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
20760
20760
|
var SlideNavigation = function (_a) {
|
|
20761
20761
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
20762
20762
|
var theme = useTheme();
|
|
@@ -20768,23 +20768,23 @@ var SlideNavigation = function (_a) {
|
|
|
20768
20768
|
onNavigate(selectedIndex + 1);
|
|
20769
20769
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
20770
20770
|
};
|
|
20771
|
-
var templateObject_1$
|
|
20771
|
+
var templateObject_1$d, templateObject_2$a, templateObject_3$8;
|
|
20772
20772
|
|
|
20773
|
-
var Container$
|
|
20773
|
+
var Container$d = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
20774
20774
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20775
20775
|
return borderRadiusVariant &&
|
|
20776
20776
|
"\n border-radius: 40px;\n ";
|
|
20777
20777
|
});
|
|
20778
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
20779
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
20778
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
20779
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20780
20780
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
20781
20781
|
var _b, _c;
|
|
20782
20782
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
20783
|
-
return (jsxRuntime.jsxs(Container$
|
|
20783
|
+
return (jsxRuntime.jsxs(Container$d, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
20784
20784
|
});
|
|
20785
|
-
var templateObject_1$
|
|
20785
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$7;
|
|
20786
20786
|
|
|
20787
|
-
var Container$
|
|
20787
|
+
var Container$c = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
20788
20788
|
var ProductGalleryMobileV2 = function (_a) {
|
|
20789
20789
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
20790
20790
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -20806,11 +20806,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
20806
20806
|
React$2.useEffect(function () {
|
|
20807
20807
|
setSelectedImage(images[index]);
|
|
20808
20808
|
}, [index, images]);
|
|
20809
|
-
return (jsxRuntime.jsxs(Container$
|
|
20809
|
+
return (jsxRuntime.jsxs(Container$c, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
20810
20810
|
};
|
|
20811
|
-
var templateObject_1$
|
|
20811
|
+
var templateObject_1$b;
|
|
20812
20812
|
|
|
20813
|
-
var Container$
|
|
20813
|
+
var Container$b = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
20814
20814
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20815
20815
|
return borderRadiusVariant &&
|
|
20816
20816
|
"\n border-radius: 40px;\n ";
|
|
@@ -20819,14 +20819,14 @@ var Container$8 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __ma
|
|
|
20819
20819
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
20820
20820
|
});
|
|
20821
20821
|
// max-height: 31.875rem;
|
|
20822
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
20823
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
20824
|
-
var VideoOverlay = newStyled.div(templateObject_4$
|
|
20822
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
20823
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20824
|
+
var VideoOverlay = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
20825
20825
|
var Video = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
20826
20826
|
var VideoTag = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
20827
20827
|
var Text = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
20828
|
-
var NavButtonContainer$
|
|
20829
|
-
var Button$
|
|
20828
|
+
var NavButtonContainer$2 = newStyled.div(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
20829
|
+
var Button$2 = newStyled.button(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
20830
20830
|
var settings$2 = {
|
|
20831
20831
|
dots: true,
|
|
20832
20832
|
infinite: false,
|
|
@@ -20871,27 +20871,27 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
20871
20871
|
}
|
|
20872
20872
|
}
|
|
20873
20873
|
}, [images, selectedValue]);
|
|
20874
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
20874
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$b, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20875
20875
|
var _a;
|
|
20876
20876
|
var activeSlide = images[e];
|
|
20877
20877
|
// If autoplay is true and iframe is the active slide, play the video
|
|
20878
20878
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
20879
20879
|
autoplay ? _playVideo() : _stopVideo();
|
|
20880
|
-
} }, settings$2, { nextArrow: jsxRuntime.jsx(NavButtonContainer$
|
|
20880
|
+
} }, settings$2, { nextArrow: jsxRuntime.jsx(NavButtonContainer$2, { children: jsxRuntime.jsx(Button$2, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer$2, { children: jsxRuntime.jsx(Button$2, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
20881
20881
|
var _a, _b;
|
|
20882
20882
|
return (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(Video, { children: [jsxRuntime.jsx("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsxRuntime.jsx(VideoOverlay, { onClick: function () {
|
|
20883
20883
|
isPlaying ? _stopVideo() : _playVideo();
|
|
20884
20884
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
20885
20885
|
}) }), void 0) }), void 0)] }, void 0));
|
|
20886
20886
|
};
|
|
20887
|
-
var templateObject_1$
|
|
20887
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$5, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4, templateObject_9$4;
|
|
20888
20888
|
|
|
20889
|
-
var Container$
|
|
20889
|
+
var Container$a = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
20890
20890
|
var ProductGalleryMobileV3 = function (_a) {
|
|
20891
20891
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
20892
|
-
return (jsxRuntime.jsx(Container$
|
|
20892
|
+
return (jsxRuntime.jsx(Container$a, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
20893
20893
|
};
|
|
20894
|
-
var templateObject_1$
|
|
20894
|
+
var templateObject_1$9;
|
|
20895
20895
|
|
|
20896
20896
|
var _sendCommandToIframe = function (command) {
|
|
20897
20897
|
var iframe = document.getElementById('vwo-video');
|
|
@@ -20910,60 +20910,99 @@ var _playVideo = function () {
|
|
|
20910
20910
|
|
|
20911
20911
|
var afterChangeSlide = function (_a) {
|
|
20912
20912
|
var _b;
|
|
20913
|
-
var slide = _a.slide, contents = _a.contents, setSelectedImageIndex = _a.setSelectedImageIndex, onChange = _a.onChange;
|
|
20913
|
+
var slide = _a.slide, contents = _a.contents, setSelectedImageIndex = _a.setSelectedImageIndex, setArrowsVisible = _a.setArrowsVisible, onChange = _a.onChange;
|
|
20914
20914
|
var activeSlide = contents[slide];
|
|
20915
20915
|
// If autoplay is true and iframe is the active slide, play the video
|
|
20916
20916
|
var autoplay = (_b = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _b === void 0 ? void 0 : _b.includes('autoplay=1');
|
|
20917
20917
|
autoplay ? _playVideo() : _stopVideo();
|
|
20918
|
+
if (setArrowsVisible) {
|
|
20919
|
+
setArrowsVisible(false);
|
|
20920
|
+
}
|
|
20918
20921
|
setSelectedImageIndex(Math.round(slide));
|
|
20919
20922
|
onChange === null || onChange === void 0 ? void 0 : onChange(slide);
|
|
20920
20923
|
};
|
|
20921
20924
|
|
|
20922
|
-
var TopTagContainer$1 = newStyled.div(templateObject_1$
|
|
20923
|
-
var TopRightTagContainer = newStyled.div(templateObject_2$
|
|
20924
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
20925
|
-
var
|
|
20925
|
+
var TopTagContainer$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
20926
|
+
var TopRightTagContainer = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"])));
|
|
20927
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20928
|
+
var Container$9 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n \n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n \n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n\n"])), function (_a) {
|
|
20929
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20930
|
+
return borderRadiusVariant &&
|
|
20931
|
+
"\n border-radius: 40px;\n ";
|
|
20932
|
+
}, function (_a) {
|
|
20933
|
+
var theme = _a.theme;
|
|
20934
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
20935
|
+
});
|
|
20936
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$5, templateObject_4$4;
|
|
20926
20937
|
|
|
20927
20938
|
var settings$1 = {
|
|
20928
20939
|
dots: true,
|
|
20929
20940
|
infinite: false,
|
|
20930
20941
|
speed: 200,
|
|
20931
|
-
slidesToShow: 1.1,
|
|
20932
20942
|
slidesToScroll: 1,
|
|
20933
20943
|
initialSlide: 0,
|
|
20934
20944
|
};
|
|
20935
20945
|
var ContentGallery = function (_a) {
|
|
20936
|
-
var
|
|
20946
|
+
var _b;
|
|
20947
|
+
var contents = _a.contents, _c = _a.customClick, customClick = _c === void 0 ? false : _c, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, onChange = _a.onChange, selectedImageIndex = _a.selectedImageIndex, setSelectedImageIndex = _a.setSelectedImageIndex, setGalleryOpened = _a.setGalleryOpened;
|
|
20937
20948
|
var slick = React$2.useRef(null);
|
|
20938
20949
|
var sliderWrapper = React$2.useRef(null);
|
|
20950
|
+
var windowDimensions = useWindowDimensions().windowDimensions;
|
|
20939
20951
|
usePreventVerticalScroll(sliderWrapper);
|
|
20940
20952
|
var onButtonClick = React$2.useCallback(function (i) {
|
|
20941
20953
|
var _a;
|
|
20942
20954
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i, true);
|
|
20943
20955
|
}, [slick]);
|
|
20944
|
-
function handleClick() {
|
|
20956
|
+
function handleClick(key) {
|
|
20957
|
+
var elementIndex = contents.findIndex(function (el) { return el.key === key; });
|
|
20958
|
+
setSelectedImageIndex(elementIndex);
|
|
20945
20959
|
setGalleryOpened(true);
|
|
20946
20960
|
}
|
|
20947
20961
|
React$2.useEffect(function () {
|
|
20948
20962
|
var _a;
|
|
20949
20963
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(selectedImageIndex, true);
|
|
20950
20964
|
}, [contents, selectedImageIndex]);
|
|
20951
|
-
|
|
20965
|
+
function calcSlidesToShow() {
|
|
20966
|
+
var paddingWidth = 15 * 2;
|
|
20967
|
+
var cssZoom = 0.8;
|
|
20968
|
+
var cssGap = 8;
|
|
20969
|
+
var photoSize = 375.41 * cssZoom;
|
|
20970
|
+
var photosPerScreen = windowDimensions.width / photoSize;
|
|
20971
|
+
var totalGap = Math.floor(photosPerScreen) * cssGap;
|
|
20972
|
+
return (windowDimensions.width
|
|
20973
|
+
+ (windowDimensions.width > 380 ? 0 : -10)
|
|
20974
|
+
- paddingWidth
|
|
20975
|
+
- totalGap) / photoSize;
|
|
20976
|
+
}
|
|
20977
|
+
var slidesToShow = (_b = calcSlidesToShow()) !== null && _b !== void 0 ? _b : 1;
|
|
20978
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' }, "data-testid": "mobile-gallery-content-gallery-custom-click" }, { children: contents.map(function (content, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, content.key)); }) }), void 0)), jsxRuntime.jsx(Container$9, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) {
|
|
20952
20979
|
return afterChangeSlide({
|
|
20953
20980
|
slide: e,
|
|
20954
20981
|
contents: contents,
|
|
20955
20982
|
setSelectedImageIndex: setSelectedImageIndex,
|
|
20956
20983
|
onChange: onChange,
|
|
20957
20984
|
});
|
|
20958
|
-
} }, settings$1, { ref: slick, centerPadding: "80" }, { children: contents.map(function (content, idx) {
|
|
20985
|
+
} }, settings$1, { slidesToShow: slidesToShow, ref: slick, centerPadding: "80" }, { children: contents.map(function (content, idx) {
|
|
20959
20986
|
var _a;
|
|
20960
20987
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
20961
20988
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
20962
20989
|
// default imgAttributes
|
|
20963
|
-
return (jsxRuntime.jsx("div", __assign$1({ role: "button", tabIndex: -1, onClick: handleClick, onKeyUp: function () { }, className: "slider-mobile-gallery", "data-testid": "slider-mobile-gallery-".concat(idx) }, { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { src: content.url, alt: content.alt, height: 510 }, void 0), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ className: "banner-concealable", borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __assign$1({ className: "banner-concealable", "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && (jsxRuntime.jsx(TopRightTagContainer, __assign$1({ className: "banner-concealable" }, { children: topRightTag }), void 0))] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }), content.key));
|
|
20990
|
+
return (jsxRuntime.jsx("div", __assign$1({ role: "button", tabIndex: -1, onClick: function () { return handleClick(content.key); }, onKeyUp: function () { }, className: "slider-mobile-gallery", "data-testid": "slider-mobile-gallery-".concat(idx) }, { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { src: content.url, alt: content.alt, height: 510 }, void 0), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ className: "banner-concealable", borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __assign$1({ className: "banner-concealable", "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && (jsxRuntime.jsx(TopRightTagContainer, __assign$1({ className: "banner-concealable" }, { children: topRightTag }), void 0))] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, style: { height: '510px !important' }, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }), content.key));
|
|
20964
20991
|
}) }), void 0) }), void 0)] }, void 0));
|
|
20965
20992
|
};
|
|
20966
20993
|
|
|
20994
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
20995
|
+
var Button$1 = newStyled.button(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
20996
|
+
var Container$8 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"])), function (_a) {
|
|
20997
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20998
|
+
return borderRadiusVariant &&
|
|
20999
|
+
"\n border-radius: 40px;\n ";
|
|
21000
|
+
}, function (_a) {
|
|
21001
|
+
var theme = _a.theme;
|
|
21002
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
21003
|
+
});
|
|
21004
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$4;
|
|
21005
|
+
|
|
20967
21006
|
var settings = {
|
|
20968
21007
|
dots: false,
|
|
20969
21008
|
infinite: false,
|
|
@@ -21003,14 +21042,15 @@ var MainContent = function (_a) {
|
|
|
21003
21042
|
React$2.useEffect(function () {
|
|
21004
21043
|
showArrows();
|
|
21005
21044
|
}, [selectedImageIndex]);
|
|
21006
|
-
return (jsxRuntime.jsx(Container$
|
|
21045
|
+
return (jsxRuntime.jsx(Container$8, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) {
|
|
21007
21046
|
return afterChangeSlide({
|
|
21008
21047
|
slide: e,
|
|
21009
21048
|
contents: contents,
|
|
21010
21049
|
setSelectedImageIndex: setSelectedImageIndex,
|
|
21050
|
+
setArrowsVisible: setArrowsVisible,
|
|
21011
21051
|
onChange: onChange,
|
|
21012
21052
|
});
|
|
21013
|
-
} }, settings, { nextArrow: arrowsVisible ? (jsxRuntime.jsx(NavButtonContainer$
|
|
21053
|
+
} }, settings, { nextArrow: arrowsVisible ? (jsxRuntime.jsx(NavButtonContainer$1, __assign$1({ "data-testid": "main-gallery-next-button" }, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }), void 0)) : undefined, prevArrow: arrowsVisible ? (jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0)) : undefined, ref: slick }, { children: contents.map(function (content, idx) {
|
|
21014
21054
|
var _a;
|
|
21015
21055
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
21016
21056
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
@@ -21024,7 +21064,7 @@ var MainContent = function (_a) {
|
|
|
21024
21064
|
}) }), void 0) }), void 0));
|
|
21025
21065
|
};
|
|
21026
21066
|
|
|
21027
|
-
var Container$
|
|
21067
|
+
var Container$7 = newStyled.div({
|
|
21028
21068
|
padding: '1rem',
|
|
21029
21069
|
paddingTop: '2rem',
|
|
21030
21070
|
gap: '0.5rem',
|
|
@@ -21049,14 +21089,11 @@ var Img = newStyled.img({
|
|
|
21049
21089
|
var Slider = function (_a) {
|
|
21050
21090
|
var images = _a.images, selectedImageIndex = _a.selectedImageIndex, setSelectedImageIndex = _a.setSelectedImageIndex, test = _a.test;
|
|
21051
21091
|
var theme = useTheme();
|
|
21092
|
+
var containerRef = React$2.useRef(null);
|
|
21052
21093
|
var itemsRef = React$2.useRef([]);
|
|
21053
21094
|
function handleSelectImage(key) {
|
|
21054
21095
|
var indexImageClicked = images.findIndex(function (img) { return img.key === key; });
|
|
21055
|
-
|
|
21056
|
-
behavior: 'smooth',
|
|
21057
|
-
inline: 'center',
|
|
21058
|
-
block: 'nearest',
|
|
21059
|
-
});
|
|
21096
|
+
scrollElementSlider();
|
|
21060
21097
|
setSelectedImageIndex(indexImageClicked);
|
|
21061
21098
|
}
|
|
21062
21099
|
function isTheActiveImage(i) {
|
|
@@ -21066,26 +21103,33 @@ var Slider = function (_a) {
|
|
|
21066
21103
|
var color = theme.colors.pallete.primary.color;
|
|
21067
21104
|
return color ? "3px solid ".concat(color) : 'none';
|
|
21068
21105
|
}
|
|
21106
|
+
var scrollElementSlider = React$2.useCallback(function () {
|
|
21107
|
+
var item = itemsRef.current[selectedImageIndex];
|
|
21108
|
+
var container = containerRef.current;
|
|
21109
|
+
if (item && container) {
|
|
21110
|
+
var itemLeft = item.offsetLeft;
|
|
21111
|
+
var itemWidth = item.offsetWidth;
|
|
21112
|
+
var containerWidth = container.offsetWidth;
|
|
21113
|
+
var newScrollLeft = itemLeft - containerWidth / 2 + itemWidth / 2;
|
|
21114
|
+
container.scrollTo({ left: newScrollLeft, behavior: 'smooth' });
|
|
21115
|
+
}
|
|
21116
|
+
}, [selectedImageIndex]);
|
|
21069
21117
|
React$2.useEffect(function () {
|
|
21070
21118
|
if (test) {
|
|
21071
21119
|
return;
|
|
21072
21120
|
}
|
|
21073
|
-
|
|
21074
|
-
|
|
21075
|
-
|
|
21076
|
-
block: 'nearest',
|
|
21077
|
-
});
|
|
21078
|
-
}, [selectedImageIndex, test]);
|
|
21079
|
-
return (jsxRuntime.jsx(Container$6, { children: images.map(function (img, i) { return (jsxRuntime.jsx(Thumbnail, __assign$1({ onClick: function () { return handleSelectImage(img.key); }, ref: function (el) { return (itemsRef.current[i] = el); } }, { children: jsxRuntime.jsx(Img, { src: img.url, alt: img.alt, style: {
|
|
21121
|
+
scrollElementSlider();
|
|
21122
|
+
}, [selectedImageIndex, test, scrollElementSlider]);
|
|
21123
|
+
return (jsxRuntime.jsx(Container$7, __assign$1({ ref: containerRef }, { children: images.map(function (img, i) { return (jsxRuntime.jsx(Thumbnail, __assign$1({ onClick: function () { return handleSelectImage(img.key); }, ref: function (el) { return (itemsRef.current[i] = el); } }, { children: jsxRuntime.jsx(Img, { src: img.url, alt: img.alt, style: {
|
|
21080
21124
|
border: isTheActiveImage(i) ? getBorderColor() : borderImageInactive,
|
|
21081
|
-
} }, void 0) }), img.key)); }) }, void 0));
|
|
21125
|
+
} }, void 0) }), img.key)); }) }), void 0));
|
|
21082
21126
|
};
|
|
21083
21127
|
|
|
21084
|
-
var Container$
|
|
21128
|
+
var Container$6 = newStyled.div({
|
|
21085
21129
|
background: 'var(--truekind-default-secondary, #292929)',
|
|
21086
|
-
|
|
21130
|
+
minHeight: '100vh',
|
|
21087
21131
|
width: '100vw',
|
|
21088
|
-
position: '
|
|
21132
|
+
position: 'absolute',
|
|
21089
21133
|
zIndex: '99999',
|
|
21090
21134
|
top: 0,
|
|
21091
21135
|
left: 0,
|
|
@@ -21093,6 +21137,12 @@ var Container$5 = newStyled.div({
|
|
|
21093
21137
|
flexDirection: 'column',
|
|
21094
21138
|
justifyContent: 'center',
|
|
21095
21139
|
});
|
|
21140
|
+
var SubContainer = newStyled.div({
|
|
21141
|
+
maxWidth: '480px',
|
|
21142
|
+
'@media screen and (min-width: 480px)': {
|
|
21143
|
+
margin: '0 auto',
|
|
21144
|
+
}
|
|
21145
|
+
});
|
|
21096
21146
|
var Header$1 = newStyled.div({
|
|
21097
21147
|
display: 'flex',
|
|
21098
21148
|
justifyContent: 'end',
|
|
@@ -21102,6 +21152,12 @@ var Header$1 = newStyled.div({
|
|
|
21102
21152
|
position: 'absolute',
|
|
21103
21153
|
top: 0,
|
|
21104
21154
|
right: 0,
|
|
21155
|
+
'@media screen and (max-height: 640px)': {
|
|
21156
|
+
position: 'relative',
|
|
21157
|
+
},
|
|
21158
|
+
'@media screen and (min-width: 380px) and (max-width: 400px) and (max-height: 860px) ': {
|
|
21159
|
+
position: 'relative',
|
|
21160
|
+
}
|
|
21105
21161
|
});
|
|
21106
21162
|
var IconContainer = newStyled.div({
|
|
21107
21163
|
backgroundColor: '#E5E5E5',
|
|
@@ -21121,9 +21177,14 @@ var GalleryDetailed = function (_a) {
|
|
|
21121
21177
|
function closeGallery() {
|
|
21122
21178
|
setGalleryOpened(false);
|
|
21123
21179
|
}
|
|
21124
|
-
return (jsxRuntime.jsxs(Container$
|
|
21180
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(IconContainer, __assign$1({ onClick: closeGallery }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.1, width: 1.1 }, void 0) }), void 0) }, void 0), jsxRuntime.jsxs(SubContainer, { children: [jsxRuntime.jsx(MainContent, { contents: images, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport }, void 0), jsxRuntime.jsx(Slider, { images: images, test: !!productImageDataTestId, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex }, void 0)] }, void 0)] }, void 0));
|
|
21125
21181
|
};
|
|
21126
21182
|
|
|
21183
|
+
var Container$5 = newStyled.div({
|
|
21184
|
+
marginLeft: '15px',
|
|
21185
|
+
marginRight: '15px',
|
|
21186
|
+
});
|
|
21187
|
+
|
|
21127
21188
|
var ProductGalleryMobileV4 = function (_a) {
|
|
21128
21189
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, _c = _a.selectedValue, selectedValue = _c === void 0 ? 0 : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
|
|
21129
21190
|
var _e = React$2.useState(selectedValue), selectedImageIndex = _e[0], setSelectedImageIndex = _e[1];
|
|
@@ -21131,7 +21192,7 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
21131
21192
|
React$2.useEffect(function () {
|
|
21132
21193
|
setSelectedImageIndex(selectedValue);
|
|
21133
21194
|
}, [selectedValue]);
|
|
21134
|
-
return (jsxRuntime.jsx(
|
|
21195
|
+
return (jsxRuntime.jsx(Container$5, { children: galleryOpened ? (jsxRuntime.jsx(GalleryDetailed, { images: images, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, productImageDataTestId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, setGalleryOpened: setGalleryOpened }, void 0)) : (jsxRuntime.jsx(ContentGallery, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, setGalleryOpened: setGalleryOpened }, void 0)) }, void 0));
|
|
21135
21196
|
};
|
|
21136
21197
|
|
|
21137
21198
|
var SETTINGS = {
|