@trafilea/afrodita-components 6.34.3 → 6.34.5
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 +3 -1
- package/build/index.d.ts +25 -43
- package/build/index.esm.css +3 -1
- package/build/index.esm.js +687 -530
- package/build/index.esm.js.map +1 -1
- package/build/index.js +687 -530
- package/build/index.js.map +1 -1
- package/build/theme/thebodcon.theme.js +3 -3
- 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$1n = 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) {
|
|
3211
3211
|
var backgroundColor = _a.backgroundColor;
|
|
3212
3212
|
return backgroundColor;
|
|
3213
3213
|
}, function (_a) {
|
|
@@ -3229,7 +3229,7 @@ var Container$1l = newStyled.div(templateObject_1$2g || (templateObject_1$2g = _
|
|
|
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$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) {
|
|
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$1C || (templateObject_2$1C = __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$1n, __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$2h, templateObject_2$1D;
|
|
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$1m = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __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$1k = newStyled.div(templateObject_1$2f || (templateObject_1$2f = _
|
|
|
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$1C || (templateObject_2$1C = __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$1B || (templateObject_2$1B = __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$1m, __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$2g, templateObject_2$1C;
|
|
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$1l = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3429
|
+
var Price = newStyled.p(templateObject_2$1B || (templateObject_2$1B = __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$1A || (templateObject_2$1A = __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$1e || (templateObject_3$1e = __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$1l, __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$2f, templateObject_2$1B, templateObject_3$1e;
|
|
3487
3487
|
|
|
3488
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3488
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __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$1l, __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$2e;
|
|
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$2d || (templateObject_1$2d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3560
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1A || (templateObject_2$1A = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3561
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __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$1l, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$1l, { 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$2d, templateObject_2$1A, templateObject_3$1d;
|
|
3633
3633
|
|
|
3634
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3634
|
+
var FinalPriceStyledContainer$1 = 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"])));
|
|
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$1l, __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$2c;
|
|
3669
3669
|
|
|
3670
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3670
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __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$1l, __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$2b;
|
|
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$2a || (templateObject_1$2a = __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$1z || (templateObject_2$1z = __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$2a, templateObject_2$1z;
|
|
3708
3708
|
|
|
3709
3709
|
function ClubPriceMemberLabel(_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 @@ function ClubPriceMemberLabel(_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$1k = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __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$1i = newStyled.div(templateObject_1$28 || (templateObject_1$28 = _
|
|
|
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$1k, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3742
3742
|
};
|
|
3743
|
-
var templateObject_1$
|
|
3743
|
+
var templateObject_1$29;
|
|
3744
3744
|
|
|
3745
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3745
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$28 || (templateObject_1$28 = __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$27 || (templateObject_1$27
|
|
|
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$1y || (templateObject_2$1y = __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$1x || (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$28, templateObject_2$1y;
|
|
3775
3775
|
|
|
3776
3776
|
/* eslint-disable no-undef */
|
|
3777
3777
|
var cache = new Map();
|
|
@@ -3947,24 +3947,24 @@ var buildImageUrl = function (_a) {
|
|
|
3947
3947
|
}
|
|
3948
3948
|
};
|
|
3949
3949
|
|
|
3950
|
-
var Img = newStyled.img(templateObject_1$
|
|
3950
|
+
var Img$1 = newStyled.img(templateObject_1$27 || (templateObject_1$27 = __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;
|
|
3954
3954
|
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3955
3955
|
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3956
3956
|
: src;
|
|
3957
|
-
return (jsxRuntime.jsx(Img, __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));
|
|
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$27;
|
|
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$26 || (templateObject_1$26 = __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$1x || (templateObject_2$1x = __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$1c || (templateObject_3$1c = __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$26, templateObject_2$1x, templateObject_3$1c;
|
|
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,9 +4798,9 @@ 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$
|
|
4801
|
+
hero1: newStyled.h1(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject([""], [""]))),
|
|
4802
|
+
hero2: newStyled.h2(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject([""], [""]))),
|
|
4803
|
+
hero3: newStyled.h3(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject([""], [""]))),
|
|
4804
4804
|
display1: newStyled.h1(templateObject_4$Y || (templateObject_4$Y = __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([""], [""]))),
|
|
@@ -4934,17 +4934,17 @@ var DEFAULTS = {
|
|
|
4934
4934
|
size: 'regular',
|
|
4935
4935
|
},
|
|
4936
4936
|
};
|
|
4937
|
-
var templateObject_1$
|
|
4937
|
+
var templateObject_1$25, templateObject_2$1w, templateObject_3$1b, templateObject_4$Y, templateObject_5$J, templateObject_6$E, templateObject_7$u, 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$
|
|
4939
|
+
var Container$1j = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __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$1v || (templateObject_2$1v = __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$1a || (templateObject_3$1a = __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
4942
|
var Label$7 = newStyled.div(templateObject_4$X || (templateObject_4$X = __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$1j, __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$24, templateObject_2$1v, templateObject_3$1a, templateObject_4$X, templateObject_5$I, templateObject_6$D;
|
|
4970
4970
|
|
|
4971
|
-
var Container$
|
|
4972
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4971
|
+
var Container$1i = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __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$1u || (templateObject_2$1u = __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$1i, { 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$23, templateObject_2$1u;
|
|
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$1h = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4983
|
+
var Title$b = newStyled.p(templateObject_2$1t || (templateObject_2$1t = __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$19 || (templateObject_3$19 = __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$1h, { 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$22, templateObject_2$1t, templateObject_3$19;
|
|
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$21 || (templateObject_1$21 = __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$21;
|
|
5090
5090
|
|
|
5091
|
-
var Container$
|
|
5091
|
+
var Container$1g = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __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$1g, { 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$20;
|
|
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$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5252
|
+
var FlexContainer$4 = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __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$1$, templateObject_2$1s;
|
|
5254
5254
|
|
|
5255
|
-
var Container$
|
|
5255
|
+
var Container$1f = 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$
|
|
5262
|
+
var FlexCentered = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __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$18 || (templateObject_3$18 = __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
5264
|
var RightSide = newStyled.div(templateObject_4$W || (templateObject_4$W = __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$1r, templateObject_3$18, templateObject_4$W, 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$1f, __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$1Z || (templateObject_1$1Z = __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$1q || (templateObject_2$1q = __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$1Z, templateObject_2$1q;
|
|
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$1Y || (templateObject_1$1Y = __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$1Y;
|
|
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$1X || (templateObject_1$1X = __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$1X;
|
|
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$1e = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __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$1p || (templateObject_2$1p = __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$1e, { 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$1W, templateObject_2$1p;
|
|
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$1d = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject([""], [""])));
|
|
5659
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1o || (templateObject_2$1o = __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$17 || (templateObject_3$17 = __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$1d : 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$1V, templateObject_2$1o, templateObject_3$17;
|
|
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$1U || (templateObject_1$1U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5762
|
+
var Container$1c = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5763
|
+
var Input$4 = newStyled.input(templateObject_2$1n || (templateObject_2$1n = __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,7 +5768,7 @@ 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$16 || (templateObject_3$16 = __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) {
|
|
@@ -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$1c, __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$1U, templateObject_2$1n, templateObject_3$16, templateObject_4$V;
|
|
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$1T || (templateObject_1$1T = __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$1S || (templateObject_1$1S = __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$1m || (templateObject_2$1m = __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,7 +5925,7 @@ var TooltipContainer = newStyled.div(templateObject_2$1l || (templateObject_2$1l
|
|
|
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$15 || (templateObject_3$15 = __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) {
|
|
@@ -5947,12 +5947,12 @@ var Title$a = newStyled.h1(templateObject_6$C || (templateObject_6$C = __makeTem
|
|
|
5947
5947
|
var color = _a.color;
|
|
5948
5948
|
return color;
|
|
5949
5949
|
});
|
|
5950
|
-
var IconContainer$
|
|
5950
|
+
var IconContainer$6 = newStyled.div(templateObject_7$t || (templateObject_7$t = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5951
5951
|
var CloseToolTip = newStyled.button(templateObject_8$m || (templateObject_8$m = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
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$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$G, templateObject_6$C, templateObject_7$t, templateObject_8$m;
|
|
5956
5956
|
|
|
5957
5957
|
var Tooltip = function (_a) {
|
|
5958
5958
|
var _b;
|
|
@@ -5972,7 +5972,7 @@ var Tooltip = function (_a) {
|
|
|
5972
5972
|
var ref = tooltipRef.current;
|
|
5973
5973
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
5974
5974
|
}, [tooltipRef]);
|
|
5975
|
-
return (jsxRuntime.jsxs(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow }, { children: [(showCloseIcon || isMobile) && (jsxRuntime.jsx(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxRuntime.jsxs(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsxRuntime.jsx(IconContainer$
|
|
5975
|
+
return (jsxRuntime.jsxs(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow }, { children: [(showCloseIcon || isMobile) && (jsxRuntime.jsx(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxRuntime.jsxs(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsxRuntime.jsx(IconContainer$6, { children: React__default["default"].createElement(header.Icon, {
|
|
5976
5976
|
testId: 'HeaderIcon',
|
|
5977
5977
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
5978
5978
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
@@ -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$1S || (templateObject_1$1S = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5999
|
+
var ContainerBase$3 = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __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,7 +6010,7 @@ var ContainerBase$3 = newStyled.div(templateObject_2$1k || (templateObject_2$1k
|
|
|
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$14 || (templateObject_3$14 = __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
|
});
|
|
@@ -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$1b = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6036
|
+
var templateObject_1$1S, templateObject_2$1l, templateObject_3$14, templateObject_4$T, templateObject_5$F, templateObject_6$B, templateObject_7$s, 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$1b, __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$1R || (templateObject_1$1R = __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$1k || (templateObject_2$1k = __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$13 || (templateObject_3$13 = __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) {
|
|
@@ -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$1a = 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$1R, templateObject_2$1k, templateObject_3$13, templateObject_4$S, templateObject_5$E, templateObject_6$A, templateObject_7$r, 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$1a, __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$
|
|
6227
|
+
var CustomerDetails = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject([""], [""])));
|
|
6228
|
+
var CustomerInfo = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __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$12 || (templateObject_3$12 = __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
6230
|
var StarIconContainer = newStyled.div(templateObject_4$R || (templateObject_4$R = __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$1Q, templateObject_2$1j, templateObject_3$12, templateObject_4$R, templateObject_5$D, templateObject_6$z;
|
|
6234
6234
|
|
|
6235
6235
|
var NameWithStars = function (_a) {
|
|
6236
6236
|
var name = _a.name, size = _a.size;
|
|
@@ -6248,9 +6248,9 @@ 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$
|
|
6251
|
+
var Container$19 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __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$1i || (templateObject_2$1i = __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$11 || (templateObject_3$11 = __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
6254
|
var UserInfoText = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __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;
|
|
@@ -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$1P, templateObject_2$1i, templateObject_3$11, templateObject_4$Q;
|
|
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$19, __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$1O || (templateObject_1$1O = __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$1O;
|
|
6354
6354
|
|
|
6355
|
-
var Body = newStyled.div(templateObject_1$
|
|
6355
|
+
var Body = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __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$1N;
|
|
6361
6361
|
|
|
6362
|
-
var Container$
|
|
6362
|
+
var Container$18 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = _
|
|
|
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$18, __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$1M;
|
|
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$1L || (templateObject_1$1L = __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$1h || (templateObject_2$1h = __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$10 || (templateObject_3$10 = __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
6392
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$P || (templateObject_4$P = __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$
|
|
6393
|
+
var templateObject_1$1L, templateObject_2$1h, templateObject_3$10, templateObject_4$P;
|
|
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
|
|
6401
|
+
var Container$17 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6402
|
+
var Title$9 = newStyled.h1(templateObject_2$1g || (templateObject_2$1g = __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$$ || (templateObject_3$$ = __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
6404
|
var PriceContainer$2 = newStyled.span(templateObject_4$O || (templateObject_4$O = __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$17, { 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$1K, templateObject_2$1g, templateObject_3$$, templateObject_4$O;
|
|
6411
6411
|
|
|
6412
6412
|
var Bundle = {
|
|
6413
6413
|
Minimalistic: Minimalistic,
|
|
6414
6414
|
Simple: Simple,
|
|
6415
6415
|
};
|
|
6416
6416
|
|
|
6417
|
-
var Container$
|
|
6417
|
+
var Container$16 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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$1f || (templateObject_2$1f = __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$16, __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$1J, templateObject_2$1f, templateObject_3$_;
|
|
6435
6435
|
|
|
6436
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6436
|
+
var Text$6 = newStyled.span(templateObject_1$1I || (templateObject_1$1I = __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$1I;
|
|
6443
6443
|
|
|
6444
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6444
|
+
var P$3 = newStyled.p(templateObject_1$1H || (templateObject_1$1H = __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$1H;
|
|
6451
6451
|
|
|
6452
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6452
|
+
var Text$5 = newStyled.span(templateObject_1$1G || (templateObject_1$1G = __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$1G;
|
|
6459
6459
|
|
|
6460
|
-
var Container$
|
|
6460
|
+
var Container$15 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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$15, __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$1F;
|
|
6467
6467
|
|
|
6468
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6468
|
+
var Text$4 = newStyled.h3(templateObject_1$1E || (templateObject_1$1E = __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$1E;
|
|
6484
6484
|
|
|
6485
6485
|
var CartProductItem = {
|
|
6486
6486
|
Title: Title$8,
|
|
@@ -6490,9 +6490,9 @@ 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$
|
|
6493
|
+
var Container$14 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __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$14)(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6495
|
+
var DollarPart = newStyled.span(templateObject_3$Z || (templateObject_3$Z = __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
6496
|
var ClubMembersText = newStyled.span(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
@@ -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$14, { 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$1D, templateObject_2$1e, templateObject_3$Z, templateObject_4$N, templateObject_5$C, templateObject_6$y, templateObject_7$q, 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,9 +6511,9 @@ 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$
|
|
6514
|
+
var Container$13 = newStyled('div')(templateObject_1$1C || (templateObject_1$1C = __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$1d || (templateObject_2$1d = __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$Y || (templateObject_3$Y = __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
6517
|
var Bar$2 = newStyled('div')(templateObject_4$M || (templateObject_4$M = __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");
|
|
@@ -6523,13 +6523,13 @@ 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$13, __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$1C, templateObject_2$1d, templateObject_3$Y, templateObject_4$M;
|
|
6529
6529
|
|
|
6530
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6531
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6532
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6530
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6531
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1c || (templateObject_2$1c = __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$X || (templateObject_3$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6533
6533
|
var PriceContainerV2 = newStyled.span(templateObject_4$L || (templateObject_4$L = __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 () {
|
|
@@ -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$1l, __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$1B, templateObject_2$1c, templateObject_3$X, templateObject_4$L, templateObject_5$B;
|
|
6588
6588
|
|
|
6589
6589
|
var STARTS_NUMBER = 5;
|
|
6590
6590
|
|
|
6591
|
-
var Container$
|
|
6592
|
-
var templateObject_1$
|
|
6591
|
+
var Container$12 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6592
|
+
var templateObject_1$1A;
|
|
6593
6593
|
|
|
6594
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6594
|
+
var StarContainer = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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$12, { 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$1z;
|
|
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$11 = newStyled.a(templateObject_1$1y || (templateObject_1$1y = __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$1b || (templateObject_2$1b = __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$1y, templateObject_2$1b;
|
|
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$11, __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,9 +6763,9 @@ 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$
|
|
6766
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1x || (templateObject_1$1x = __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$10 = 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"])));
|
|
6768
|
+
var ProdCardContainer$4 = 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"])));
|
|
6769
6769
|
var Title$7 = newStyled.p(templateObject_4$K || (templateObject_4$K = __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;
|
|
@@ -6827,7 +6827,7 @@ var BottomTagContainer$8 = newStyled.div(templateObject_6$x || (templateObject_6
|
|
|
6827
6827
|
});
|
|
6828
6828
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$p || (templateObject_7$p = __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$1x, templateObject_2$1a, templateObject_3$W, templateObject_4$K, templateObject_5$A, templateObject_6$x, templateObject_7$p, 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$10, __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$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)] }), 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$10, __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,9 +6902,9 @@ 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$
|
|
6905
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1w || (templateObject_1$1w = __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$$ = newStyled.a(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6907
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$V || (templateObject_3$V = __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
6908
|
var Title$6 = newStyled.p(templateObject_4$J || (templateObject_4$J = __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) {
|
|
@@ -6935,7 +6935,7 @@ var TopTagContainer$7 = newStyled.div(templateObject_5$z || (templateObject_5$z
|
|
|
6935
6935
|
var style = _a.style;
|
|
6936
6936
|
return style.width;
|
|
6937
6937
|
});
|
|
6938
|
-
var TopRightTagContainer$
|
|
6938
|
+
var TopRightTagContainer$3 = newStyled.div(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6939
6939
|
var BottomTagContainer$7 = newStyled.div(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6940
6940
|
var style = _a.style;
|
|
6941
6941
|
return style.width;
|
|
@@ -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$$, __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$7, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$7, __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$$, __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$1w, templateObject_2$19, templateObject_3$V, templateObject_4$J, templateObject_5$z, templateObject_6$w, templateObject_7$o, templateObject_8$h;
|
|
6995
6995
|
|
|
6996
|
-
var Container$
|
|
6996
|
+
var Container$_ = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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$_, __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$1v;
|
|
7007
7007
|
|
|
7008
7008
|
var Collection = {
|
|
7009
7009
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7011,9 +7011,9 @@ 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$
|
|
7014
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7015
|
+
newStyled(lt.Label)(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7016
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$U || (templateObject_3$U = __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
7017
|
var Span = newStyled.span(templateObject_4$I || (templateObject_4$I = __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) {
|
|
@@ -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$1u, templateObject_2$18, templateObject_3$U, templateObject_4$I, 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$Z = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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$17 || (templateObject_2$17 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
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$Z, __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$1t, templateObject_2$17;
|
|
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$1s || (templateObject_1$1s = __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$1s;
|
|
7122
7122
|
|
|
7123
7123
|
var renderOptions = function (selectedColor, options) {
|
|
7124
7124
|
if (options == null || options.length === 0) {
|
|
@@ -7156,9 +7156,9 @@ 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$1r || (templateObject_1$1r = __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$16 || (templateObject_2$16 = __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$T || (templateObject_3$T = __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
|
});
|
|
@@ -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$1r, templateObject_2$16, templateObject_3$T, templateObject_4$H, 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$1q || (templateObject_1$1q = __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$1p || (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$15 || (templateObject_2$15 = __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$1q, templateObject_2$15;
|
|
7228
7228
|
|
|
7229
7229
|
var BaseCTA = function (_a) {
|
|
7230
7230
|
var _b, _c, _d;
|
|
@@ -7311,23 +7311,23 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7311
7311
|
} }), void 0));
|
|
7312
7312
|
};
|
|
7313
7313
|
|
|
7314
|
-
var Container$
|
|
7315
|
-
var IconContainer$
|
|
7316
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7314
|
+
var Container$Y = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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$14 || (templateObject_2$14 = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7316
|
+
var Text$3 = newStyled.p(templateObject_3$S || (templateObject_3$S = __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
7317
|
var Details = newStyled.span(templateObject_4$G || (templateObject_4$G = __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$Y, __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$1p, templateObject_2$14, templateObject_3$S, templateObject_4$G;
|
|
7324
7324
|
|
|
7325
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7325
|
+
var Title$5 = newStyled.h1(templateObject_1$1o || (templateObject_1$1o = __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$13 || (templateObject_2$13 = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7330
|
+
var Row$1 = newStyled.div(templateObject_3$R || (templateObject_3$R = __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
7333
|
var Col = newStyled.div(templateObject_4$F || (templateObject_4$F = __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({
|
|
@@ -7337,7 +7337,7 @@ var Col = newStyled.div(templateObject_4$F || (templateObject_4$F = __makeTempla
|
|
|
7337
7337
|
textAlign: ['center', 'inherit'],
|
|
7338
7338
|
width: ['100%', 'inherit'],
|
|
7339
7339
|
}));
|
|
7340
|
-
var IconContainer$
|
|
7340
|
+
var IconContainer$4 = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7341
7341
|
marginRight: ['0', '0.438rem'],
|
|
7342
7342
|
marginBottom: ['10px', '0'],
|
|
7343
7343
|
width: ['auto', '1.5rem'],
|
|
@@ -7363,18 +7363,18 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$g || (templateObject_8$g = __m
|
|
|
7363
7363
|
var DeliveryDetails = function (_a) {
|
|
7364
7364
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7365
7365
|
var theme = useTheme();
|
|
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$
|
|
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$1o, templateObject_2$13, templateObject_3$R, templateObject_4$F, templateObject_5$w, templateObject_6$u, templateObject_7$n, templateObject_8$g;
|
|
7369
7369
|
|
|
7370
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7370
|
+
var Backdrop = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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$12 || (templateObject_2$12 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
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$1n, templateObject_2$12;
|
|
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$
|
|
7431
|
+
var List = newStyled.ul(templateObject_1$1m || (templateObject_1$1m = __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$11 || (templateObject_2$11 = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
7433
|
+
var DropdownWrapper = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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
7434
|
var ArrowContainer$1 = newStyled.div(templateObject_4$E || (templateObject_4$E = __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$1m, templateObject_2$11, templateObject_3$Q, templateObject_4$E, 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$
|
|
7450
|
+
var DropdownContainer = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
7452
|
+
var SizeLabel = newStyled.span(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7453
7453
|
var DetailLabel = newStyled.span(templateObject_4$D || (templateObject_4$D = __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$1l, templateObject_2$10, templateObject_3$P, templateObject_4$D, 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,9 +7476,9 @@ 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$
|
|
7479
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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$$ || (templateObject_2$$ = __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$O || (templateObject_3$O = __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
7482
|
var DialogDropdownLink = newStyled.a(templateObject_4$C || (templateObject_4$C = __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;
|
|
@@ -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$1k, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
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,21 +7521,21 @@ 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$1j || (templateObject_1$1j = __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$N || (templateObject_3$N = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7527
|
+
var Container$X = newStyled.div(templateObject_4$B || (templateObject_4$B = __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$X, __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$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B;
|
|
7535
7535
|
|
|
7536
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7537
|
-
var Header$
|
|
7538
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7536
|
+
var SectionContent = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __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$Z || (templateObject_2$Z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
7538
|
+
var MobileHeader = newStyled.div(templateObject_3$M || (templateObject_3$M = __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
7539
|
var MobileIconsContainer = newStyled.div(templateObject_4$A || (templateObject_4$A = __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; });
|
|
@@ -7543,7 +7543,7 @@ var OptionContainer = newStyled.div(templateObject_7$m || (templateObject_7$m =
|
|
|
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$1i, templateObject_2$Z, templateObject_3$M, templateObject_4$A, templateObject_5$t, templateObject_6$r, templateObject_7$m, 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$1h || (templateObject_1$1h = __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$Y || (templateObject_2$Y = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
7613
|
+
var CloseIconContainer = newStyled.div(templateObject_3$L || (templateObject_3$L = __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$1h, templateObject_2$Y, templateObject_3$L;
|
|
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;
|
|
@@ -7716,7 +7716,7 @@ var Filters = function (_a) {
|
|
|
7716
7716
|
}
|
|
7717
7717
|
return itemsSelectedNumberText;
|
|
7718
7718
|
};
|
|
7719
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile ? (jsxRuntime.jsx("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: !!checkedItems.length && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Header$
|
|
7719
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile ? (jsxRuntime.jsx("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: !!checkedItems.length && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Header$3, { children: [jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsxRuntime.jsx(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsxRuntime.jsx(Tags, { color: tagsColor, items: checkedItems.map(function (item) {
|
|
7720
7720
|
return item.label === '$75 And Above' ? '+$75' : item.label;
|
|
7721
7721
|
}), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }, void 0)) }), void 0)) : (jsxRuntime.jsxs(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsxRuntime.jsx(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), !!checkedItems.length && (jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0))] }), void 0)), filters
|
|
7722
7722
|
.filter(function (filter) { return filter.isLinkOption; })
|
|
@@ -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$1g || (templateObject_1$1g = __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$W = newStyled.div(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
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$W, __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$W, __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$1g, templateObject_2$X;
|
|
7777
7777
|
|
|
7778
|
-
var Container$
|
|
7779
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7778
|
+
var Container$V = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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$W || (templateObject_2$W = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
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$V, __assign$1({ theme: theme }, { children: [jsx(Container$V, { 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$1f, templateObject_2$W;
|
|
7795
7795
|
|
|
7796
|
-
var Button$
|
|
7796
|
+
var Button$6 = 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$6, __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) {
|
|
@@ -11787,7 +11787,7 @@ var defaultProps$1 = {
|
|
|
11787
11787
|
waitForAnimate: true
|
|
11788
11788
|
};
|
|
11789
11789
|
|
|
11790
|
-
var Slider = /*#__PURE__*/function (_React$Component) {
|
|
11790
|
+
var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
11791
11791
|
_inherits(Slider, _React$Component);
|
|
11792
11792
|
|
|
11793
11793
|
var _super = _createSuper(Slider);
|
|
@@ -12035,14 +12035,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12035
12035
|
return Slider;
|
|
12036
12036
|
}(React__default["default"].Component);
|
|
12037
12037
|
|
|
12038
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12038
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1e || (templateObject_1$1e = __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$1e;
|
|
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$1d || (templateObject_1$1d = __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$1c || (templateObject_1$1c = __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$1d;
|
|
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$1c || (templateObject_1$1c = __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$V || (templateObject_2$V = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
12132
|
+
var Container$U = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12133
12133
|
var position = _a.position;
|
|
12134
12134
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
12135
12135
|
}, function (_a) {
|
|
@@ -12137,12 +12137,12 @@ var Container$S = newStyled.div(templateObject_3$J || (templateObject_3$J = __ma
|
|
|
12137
12137
|
return hasOverflowArrows &&
|
|
12138
12138
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12139
12139
|
});
|
|
12140
|
-
var Button$
|
|
12140
|
+
var Button$5 = newStyled.button(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
12141
12141
|
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"])));
|
|
12142
12142
|
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"])));
|
|
12143
12143
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$l || (templateObject_7$l = __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"])));
|
|
12144
12144
|
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"])));
|
|
12145
|
-
var templateObject_1$
|
|
12145
|
+
var templateObject_1$1c, templateObject_2$V, templateObject_3$K, templateObject_4$z, templateObject_5$s, templateObject_6$q, templateObject_7$l, templateObject_8$e;
|
|
12146
12146
|
|
|
12147
12147
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12148
12148
|
var loading = 'eager';
|
|
@@ -12170,31 +12170,31 @@ var ImagePreviewList = function (_a) {
|
|
|
12170
12170
|
var element = document.querySelector(".imageListContainer");
|
|
12171
12171
|
element.scrollBy(0, 200);
|
|
12172
12172
|
};
|
|
12173
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
12173
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$U, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
12174
12174
|
arrowWidth: 0.75,
|
|
12175
12175
|
arrowHeight: 1.25,
|
|
12176
12176
|
arrowPadding: 1.625,
|
|
12177
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsxRuntime.jsx(Button$
|
|
12178
|
-
return (jsxRuntime.jsx(Button$
|
|
12177
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsxRuntime.jsx(Button$5, __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) {
|
|
12178
|
+
return (jsxRuntime.jsx(Button$5, __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));
|
|
12179
12179
|
})) }), 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));
|
|
12180
12180
|
};
|
|
12181
12181
|
|
|
12182
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12183
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12184
|
-
var templateObject_1$
|
|
12182
|
+
var ProgressContainer = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
12183
|
+
var ProgressFiller = newStyled.div(templateObject_2$U || (templateObject_2$U = __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; });
|
|
12184
|
+
var templateObject_1$1b, templateObject_2$U;
|
|
12185
12185
|
|
|
12186
12186
|
var ProgressBar$1 = function (_a) {
|
|
12187
12187
|
var progress = _a.progress, hide = _a.hide;
|
|
12188
12188
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12189
12189
|
};
|
|
12190
12190
|
|
|
12191
|
-
var Container$
|
|
12192
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12193
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12191
|
+
var Container$T = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12192
|
+
var HTMLVideo = newStyled.video(templateObject_2$T || (templateObject_2$T = __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; });
|
|
12193
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
12194
12194
|
var PlayContainer = newStyled.div(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
12195
12195
|
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"])));
|
|
12196
12196
|
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"])));
|
|
12197
|
-
var templateObject_1$
|
|
12197
|
+
var templateObject_1$1a, templateObject_2$T, templateObject_3$J, templateObject_4$y, templateObject_5$r, templateObject_6$p;
|
|
12198
12198
|
|
|
12199
12199
|
var Video$1 = function (_a) {
|
|
12200
12200
|
var _b, _c, _d, _e;
|
|
@@ -12240,7 +12240,7 @@ var Video$1 = function (_a) {
|
|
|
12240
12240
|
setVideoProgress(videoRef.current.currentTime);
|
|
12241
12241
|
}
|
|
12242
12242
|
};
|
|
12243
|
-
return (jsxRuntime.jsxs(Container$
|
|
12243
|
+
return (jsxRuntime.jsxs(Container$T, __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: true, "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));
|
|
12244
12244
|
};
|
|
12245
12245
|
|
|
12246
12246
|
var propTypes = {exports: {}};
|
|
@@ -13834,22 +13834,22 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13834
13834
|
afterZoomOut: PropTypes.func
|
|
13835
13835
|
} : {};
|
|
13836
13836
|
|
|
13837
|
-
var Container$
|
|
13837
|
+
var Container$S = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
13838
13838
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13839
13839
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13840
13840
|
});
|
|
13841
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13841
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13842
13842
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13843
13843
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13844
13844
|
}, function (_a) {
|
|
13845
13845
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13846
13846
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13847
13847
|
});
|
|
13848
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13848
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13849
13849
|
var isCTAHidden = _a.isCTAHidden;
|
|
13850
13850
|
return (isCTAHidden ? '60px' : '120px');
|
|
13851
13851
|
});
|
|
13852
|
-
var TopRightTagContainer$
|
|
13852
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
13853
13853
|
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"])));
|
|
13854
13854
|
var ImageStyled = newStyled(Image$3)(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13855
13855
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
@@ -13859,23 +13859,23 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$k || (temp
|
|
|
13859
13859
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13860
13860
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13861
13861
|
});
|
|
13862
|
-
var templateObject_1$
|
|
13862
|
+
var templateObject_1$19, templateObject_2$S, templateObject_3$I, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$k;
|
|
13863
13863
|
|
|
13864
13864
|
var ImageProductSlide$1 = function (_a) {
|
|
13865
13865
|
var _b;
|
|
13866
13866
|
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;
|
|
13867
13867
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13868
13868
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13869
|
-
return (jsxRuntime.jsxs(Container$
|
|
13869
|
+
return (jsxRuntime.jsxs(Container$S, __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: {
|
|
13870
13870
|
alt: content.alt,
|
|
13871
13871
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13872
13872
|
loading: 'eager',
|
|
13873
13873
|
decoding: 'sync',
|
|
13874
|
-
}, 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$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$
|
|
13874
|
+
}, 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$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$6, __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));
|
|
13875
13875
|
};
|
|
13876
13876
|
|
|
13877
|
-
var Container$
|
|
13878
|
-
var templateObject_1$
|
|
13877
|
+
var Container$R = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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"])));
|
|
13878
|
+
var templateObject_1$18;
|
|
13879
13879
|
|
|
13880
13880
|
var getInitialIndex = function (images, selectedValue) {
|
|
13881
13881
|
if (selectedValue) {
|
|
@@ -13901,7 +13901,7 @@ var ProductGallery = function (_a) {
|
|
|
13901
13901
|
setActiveIndex(index);
|
|
13902
13902
|
};
|
|
13903
13903
|
var selectedImage = images[activeIndex];
|
|
13904
|
-
return (jsxRuntime.jsxs(Container$
|
|
13904
|
+
return (jsxRuntime.jsxs(Container$R, { 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));
|
|
13905
13905
|
};
|
|
13906
13906
|
|
|
13907
13907
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13923,7 +13923,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13923
13923
|
};
|
|
13924
13924
|
}
|
|
13925
13925
|
};
|
|
13926
|
-
var Container$
|
|
13926
|
+
var Container$Q = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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) {
|
|
13927
13927
|
var backgroundColor = _a.backgroundColor;
|
|
13928
13928
|
return backgroundColor;
|
|
13929
13929
|
}, function (_a) {
|
|
@@ -13951,11 +13951,11 @@ var Container$O = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __
|
|
|
13951
13951
|
var IconButton = function (_a) {
|
|
13952
13952
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13953
13953
|
var theme = useTheme();
|
|
13954
|
-
return (jsxRuntime.jsx(Container$
|
|
13954
|
+
return (jsxRuntime.jsx(Container$Q, __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));
|
|
13955
13955
|
};
|
|
13956
|
-
var templateObject_1$
|
|
13956
|
+
var templateObject_1$17;
|
|
13957
13957
|
|
|
13958
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13958
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$16 || (templateObject_1$16 = __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; });
|
|
13959
13959
|
var AmazonButton = function (_a) {
|
|
13960
13960
|
var onClick = _a.onClick;
|
|
13961
13961
|
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));
|
|
@@ -13964,9 +13964,9 @@ var PaypalButton = function (_a) {
|
|
|
13964
13964
|
var onClick = _a.onClick;
|
|
13965
13965
|
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));
|
|
13966
13966
|
};
|
|
13967
|
-
var templateObject_1$
|
|
13967
|
+
var templateObject_1$16;
|
|
13968
13968
|
|
|
13969
|
-
var Container$
|
|
13969
|
+
var Container$P = newStyled.div(function (props) { return ({
|
|
13970
13970
|
height: 'auto',
|
|
13971
13971
|
textAlign: 'center',
|
|
13972
13972
|
justifyContent: 'center',
|
|
@@ -14016,12 +14016,12 @@ var IconsWithTitle = function (_a) {
|
|
|
14016
14016
|
textAlign: 'center',
|
|
14017
14017
|
lineHeight: '18px',
|
|
14018
14018
|
};
|
|
14019
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
14019
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$P, __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));
|
|
14020
14020
|
};
|
|
14021
14021
|
|
|
14022
|
-
var Container$
|
|
14023
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14024
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14022
|
+
var Container$O = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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'); });
|
|
14023
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$R || (templateObject_2$R = __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'); });
|
|
14024
|
+
var StyledTitle = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14025
14025
|
var titlePosition = _a.titlePosition;
|
|
14026
14026
|
return titlePosition == 'center' &&
|
|
14027
14027
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14029,15 +14029,15 @@ var StyledTitle = newStyled.div(templateObject_3$G || (templateObject_3$G = __ma
|
|
|
14029
14029
|
var ImageCardWithDescription = function (_a) {
|
|
14030
14030
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14031
14031
|
var isMobile = useWindowDimensions().isMobile;
|
|
14032
|
-
return (jsxRuntime.jsxs(Container$
|
|
14032
|
+
return (jsxRuntime.jsxs(Container$O, __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));
|
|
14033
14033
|
};
|
|
14034
|
-
var templateObject_1$
|
|
14034
|
+
var templateObject_1$15, templateObject_2$R, templateObject_3$H;
|
|
14035
14035
|
|
|
14036
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14036
|
+
var Label$4 = newStyled.span(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
14037
14037
|
var color = _a.color;
|
|
14038
14038
|
return color;
|
|
14039
14039
|
});
|
|
14040
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14040
|
+
var MandatoryIcon = newStyled.span(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14041
14041
|
var color = _a.color;
|
|
14042
14042
|
return color;
|
|
14043
14043
|
});
|
|
@@ -14046,7 +14046,7 @@ var InputLabel = function (_a) {
|
|
|
14046
14046
|
var theme = useTheme();
|
|
14047
14047
|
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));
|
|
14048
14048
|
};
|
|
14049
|
-
var templateObject_1$
|
|
14049
|
+
var templateObject_1$14, templateObject_2$Q;
|
|
14050
14050
|
|
|
14051
14051
|
var containerByStatus = function (theme, status) {
|
|
14052
14052
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -14055,12 +14055,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14055
14055
|
return theme.colors.semantic.urgent.color;
|
|
14056
14056
|
return '';
|
|
14057
14057
|
};
|
|
14058
|
-
var Container$
|
|
14058
|
+
var Container$N = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14059
14059
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14060
14060
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14061
14061
|
});
|
|
14062
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14063
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14062
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$P || (templateObject_2$P = __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"])));
|
|
14063
|
+
var StyledInput = newStyled.input(templateObject_3$G || (templateObject_3$G = __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) {
|
|
14064
14064
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14065
14065
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14066
14066
|
}, function (_a) {
|
|
@@ -14133,7 +14133,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$p || (templateObject_5
|
|
|
14133
14133
|
return theme.component.input.lineHeight;
|
|
14134
14134
|
});
|
|
14135
14135
|
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"])));
|
|
14136
|
-
var templateObject_1$
|
|
14136
|
+
var templateObject_1$13, templateObject_2$P, templateObject_3$G, templateObject_4$w, templateObject_5$p, templateObject_6$n;
|
|
14137
14137
|
|
|
14138
14138
|
var BaseInput = function (_a) {
|
|
14139
14139
|
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"]);
|
|
@@ -14156,14 +14156,14 @@ var BaseInput = function (_a) {
|
|
|
14156
14156
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14157
14157
|
}, [status]);
|
|
14158
14158
|
var hasValue = Boolean(value);
|
|
14159
|
-
return (jsxRuntime.jsxs(Container$
|
|
14159
|
+
return (jsxRuntime.jsxs(Container$N, __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) {
|
|
14160
14160
|
onChange(event.target.value, event);
|
|
14161
14161
|
}, 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 () {
|
|
14162
14162
|
onChange('', { target: { value: '' } });
|
|
14163
14163
|
}, "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));
|
|
14164
14164
|
};
|
|
14165
14165
|
|
|
14166
|
-
var Button$
|
|
14166
|
+
var Button$4 = function (_a) {
|
|
14167
14167
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
14168
14168
|
if (variant === 'primary') {
|
|
14169
14169
|
return jsxRuntime.jsx(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -14177,11 +14177,11 @@ var Button$5 = function (_a) {
|
|
|
14177
14177
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14178
14178
|
};
|
|
14179
14179
|
|
|
14180
|
-
var Container$
|
|
14180
|
+
var Container$M = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
14181
14181
|
var theme = _a.theme;
|
|
14182
14182
|
return theme.component.inputCustom.input.borderRadius;
|
|
14183
14183
|
});
|
|
14184
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14184
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$O || (templateObject_2$O = __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) {
|
|
14185
14185
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14186
14186
|
return defaultRounded
|
|
14187
14187
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14196,23 +14196,23 @@ var Custom = function (_a) {
|
|
|
14196
14196
|
text: text,
|
|
14197
14197
|
disabled: rest.disabled,
|
|
14198
14198
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14199
|
-
return (jsxRuntime.jsx(Container$
|
|
14199
|
+
return (jsxRuntime.jsx(Container$M, __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$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14200
14200
|
};
|
|
14201
|
-
var templateObject_1$
|
|
14201
|
+
var templateObject_1$12, templateObject_2$O;
|
|
14202
14202
|
|
|
14203
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14203
|
+
var SuccessContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14204
14204
|
var size = _a.size;
|
|
14205
14205
|
return (size === 'small' ? '36px' : '');
|
|
14206
14206
|
});
|
|
14207
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14208
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14207
|
+
var SuccessMessage = newStyled.div(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
14208
|
+
var SuccessText = newStyled.span(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
14209
14209
|
var Success = function (_a) {
|
|
14210
14210
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14211
14211
|
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));
|
|
14212
14212
|
};
|
|
14213
|
-
var templateObject_1$
|
|
14213
|
+
var templateObject_1$11, templateObject_2$N, templateObject_3$F;
|
|
14214
14214
|
|
|
14215
|
-
var ButtonContainer = newStyled.div(templateObject_1
|
|
14215
|
+
var ButtonContainer = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
14216
14216
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14217
14217
|
return status === exports.InputValidationType.Empty &&
|
|
14218
14218
|
type === 'primary' &&
|
|
@@ -14229,16 +14229,16 @@ var BasePlusButton = function (_a) {
|
|
|
14229
14229
|
}
|
|
14230
14230
|
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));
|
|
14231
14231
|
};
|
|
14232
|
-
var templateObject_1
|
|
14232
|
+
var templateObject_1$10;
|
|
14233
14233
|
|
|
14234
|
-
var Container$
|
|
14235
|
-
var IconContainer$
|
|
14234
|
+
var Container$L = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14235
|
+
var IconContainer$3 = newStyled.div(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
14236
14236
|
var BasePlusIcon = function (_a) {
|
|
14237
14237
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14238
14238
|
var theme = useTheme();
|
|
14239
|
-
return (jsxRuntime.jsx(Container$
|
|
14239
|
+
return (jsxRuntime.jsx(Container$L, { 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));
|
|
14240
14240
|
};
|
|
14241
|
-
var templateObject_1
|
|
14241
|
+
var templateObject_1$$, templateObject_2$M;
|
|
14242
14242
|
|
|
14243
14243
|
var Input$3 = {
|
|
14244
14244
|
Simple: BaseInput,
|
|
@@ -14283,7 +14283,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14283
14283
|
}, [preventTouch, ref, touchStart]);
|
|
14284
14284
|
}
|
|
14285
14285
|
|
|
14286
|
-
var Container$
|
|
14286
|
+
var Container$K = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
14287
14287
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14288
14288
|
return borderRadiusVariant &&
|
|
14289
14289
|
"\n border-radius: 40px;\n ";
|
|
@@ -14292,12 +14292,12 @@ var Container$I = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
|
|
|
14292
14292
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14293
14293
|
});
|
|
14294
14294
|
// max-height: 31.875rem;
|
|
14295
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14296
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14295
|
+
var TopTagContainer$5 = newStyled.div(templateObject_2$L || (templateObject_2$L = __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'); });
|
|
14296
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14297
14297
|
var BottomTagContainer$5 = newStyled.div(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14298
|
-
var NavButtonContainer$
|
|
14299
|
-
var Button$
|
|
14300
|
-
var settings$
|
|
14298
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14299
|
+
var Button$3 = newStyled.button(templateObject_6$m || (templateObject_6$m = __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"])));
|
|
14300
|
+
var settings$3 = {
|
|
14301
14301
|
dots: true,
|
|
14302
14302
|
infinite: false,
|
|
14303
14303
|
speed: 200,
|
|
@@ -14305,7 +14305,7 @@ var settings$1 = {
|
|
|
14305
14305
|
slidesToScroll: 1,
|
|
14306
14306
|
initialSlide: 0,
|
|
14307
14307
|
};
|
|
14308
|
-
var getImageAttributes = function (idx, itemsOnViewport, imgAttributes) {
|
|
14308
|
+
var getImageAttributes$1 = function (idx, itemsOnViewport, imgAttributes) {
|
|
14309
14309
|
if (itemsOnViewport) {
|
|
14310
14310
|
// add loading and decoding attributes if enabled
|
|
14311
14311
|
// to speed up the loading of the images
|
|
@@ -14353,14 +14353,14 @@ var ImageProductSlide = function (_a) {
|
|
|
14353
14353
|
}
|
|
14354
14354
|
}
|
|
14355
14355
|
}, [contents, selectedValue]);
|
|
14356
|
-
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$
|
|
14356
|
+
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$K, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) {
|
|
14357
14357
|
var _a;
|
|
14358
14358
|
var activeSlide = contents[e];
|
|
14359
14359
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14360
14360
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14361
14361
|
autoplay ? _playVideo() : _stopVideo();
|
|
14362
14362
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
14363
|
-
} }, settings$
|
|
14363
|
+
} }, settings$3, { nextArrow: jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$3, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$3, { 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) {
|
|
14364
14364
|
var _a;
|
|
14365
14365
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14366
14366
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
@@ -14370,19 +14370,19 @@ var ImageProductSlide = function (_a) {
|
|
|
14370
14370
|
width: '100%',
|
|
14371
14371
|
height: '510px',
|
|
14372
14372
|
};
|
|
14373
|
-
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer, { 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));
|
|
14373
|
+
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$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$5, __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));
|
|
14374
14374
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14375
14375
|
};
|
|
14376
|
-
var templateObject_1$
|
|
14376
|
+
var templateObject_1$_, templateObject_2$L, templateObject_3$E, templateObject_4$v, templateObject_5$o, templateObject_6$m;
|
|
14377
14377
|
|
|
14378
|
-
var Container$
|
|
14378
|
+
var Container$J = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
14379
14379
|
var ProductGalleryMobile = function (_a) {
|
|
14380
14380
|
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;
|
|
14381
14381
|
var _e = React$2.useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
14382
14382
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14383
|
-
return (jsxRuntime.jsx(Container$
|
|
14383
|
+
return (jsxRuntime.jsx(Container$J, __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));
|
|
14384
14384
|
};
|
|
14385
|
-
var templateObject_1$
|
|
14385
|
+
var templateObject_1$Z;
|
|
14386
14386
|
|
|
14387
14387
|
function _extends() {
|
|
14388
14388
|
_extends = Object.assign || function (target) {
|
|
@@ -14649,27 +14649,27 @@ function useSwipeable(options) {
|
|
|
14649
14649
|
return handlers;
|
|
14650
14650
|
}
|
|
14651
14651
|
|
|
14652
|
-
var Button$
|
|
14652
|
+
var Button$2 = newStyled.button(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
14653
14653
|
var ArrowButton = function (_a) {
|
|
14654
14654
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14655
|
-
return (jsxRuntime.jsx(Button$
|
|
14655
|
+
return (jsxRuntime.jsx(Button$2, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14656
14656
|
};
|
|
14657
|
-
var templateObject_1$
|
|
14657
|
+
var templateObject_1$Y;
|
|
14658
14658
|
|
|
14659
|
-
var Container$
|
|
14659
|
+
var Container$I = newStyled.div(templateObject_1$X || (templateObject_1$X = __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"])));
|
|
14660
14660
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14661
14661
|
var SlideDots = function (_a) {
|
|
14662
14662
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14663
14663
|
var theme = useTheme();
|
|
14664
|
-
return (jsxRuntime.jsx(Container$
|
|
14664
|
+
return (jsxRuntime.jsx(Container$I, __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
|
|
14665
14665
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14666
14666
|
: 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));
|
|
14667
14667
|
};
|
|
14668
|
-
var templateObject_1$
|
|
14668
|
+
var templateObject_1$X;
|
|
14669
14669
|
|
|
14670
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14671
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14672
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14670
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$W || (templateObject_1$W = __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"])));
|
|
14671
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14672
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14673
14673
|
var SlideNavigation = function (_a) {
|
|
14674
14674
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14675
14675
|
var theme = useTheme();
|
|
@@ -14681,23 +14681,23 @@ var SlideNavigation = function (_a) {
|
|
|
14681
14681
|
onNavigate(selectedIndex + 1);
|
|
14682
14682
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14683
14683
|
};
|
|
14684
|
-
var templateObject_1$
|
|
14684
|
+
var templateObject_1$W, templateObject_2$K, templateObject_3$D;
|
|
14685
14685
|
|
|
14686
|
-
var Container$
|
|
14686
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __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) {
|
|
14687
14687
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14688
14688
|
return borderRadiusVariant &&
|
|
14689
14689
|
"\n border-radius: 40px;\n ";
|
|
14690
14690
|
});
|
|
14691
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14692
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14691
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$J || (templateObject_2$J = __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'); });
|
|
14692
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14693
14693
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14694
14694
|
var _b, _c;
|
|
14695
14695
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14696
|
-
return (jsxRuntime.jsxs(Container$
|
|
14696
|
+
return (jsxRuntime.jsxs(Container$H, __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$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, { 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));
|
|
14697
14697
|
});
|
|
14698
|
-
var templateObject_1$
|
|
14698
|
+
var templateObject_1$V, templateObject_2$J, templateObject_3$C;
|
|
14699
14699
|
|
|
14700
|
-
var Container$
|
|
14700
|
+
var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
14701
14701
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14702
14702
|
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;
|
|
14703
14703
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14719,11 +14719,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14719
14719
|
React$2.useEffect(function () {
|
|
14720
14720
|
setSelectedImage(images[index]);
|
|
14721
14721
|
}, [index, images]);
|
|
14722
|
-
return (jsxRuntime.jsxs(Container$
|
|
14722
|
+
return (jsxRuntime.jsxs(Container$G, __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));
|
|
14723
14723
|
};
|
|
14724
|
-
var templateObject_1$
|
|
14724
|
+
var templateObject_1$U;
|
|
14725
14725
|
|
|
14726
|
-
var Container$
|
|
14726
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __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) {
|
|
14727
14727
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14728
14728
|
return borderRadiusVariant &&
|
|
14729
14729
|
"\n border-radius: 40px;\n ";
|
|
@@ -14732,15 +14732,15 @@ var Container$D = newStyled.div(templateObject_1$S || (templateObject_1$S = __ma
|
|
|
14732
14732
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14733
14733
|
});
|
|
14734
14734
|
// max-height: 31.875rem;
|
|
14735
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14736
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14735
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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'); });
|
|
14736
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14737
14737
|
var VideoOverlay$1 = newStyled.div(templateObject_4$u || (templateObject_4$u = __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"])));
|
|
14738
14738
|
var Video = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
14739
14739
|
var VideoTag = newStyled.div(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
14740
14740
|
var Text$2 = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14741
|
-
var NavButtonContainer
|
|
14742
|
-
var Button$
|
|
14743
|
-
var settings = {
|
|
14741
|
+
var NavButtonContainer = newStyled.div(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14742
|
+
var Button$1 = newStyled.button(templateObject_9$9 || (templateObject_9$9 = __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"])));
|
|
14743
|
+
var settings$2 = {
|
|
14744
14744
|
dots: true,
|
|
14745
14745
|
infinite: false,
|
|
14746
14746
|
speed: 200,
|
|
@@ -14784,27 +14784,254 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14784
14784
|
}
|
|
14785
14785
|
}
|
|
14786
14786
|
}, [images, selectedValue]);
|
|
14787
|
-
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$
|
|
14787
|
+
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$F, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) {
|
|
14788
14788
|
var _a;
|
|
14789
14789
|
var activeSlide = images[e];
|
|
14790
14790
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14791
14791
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14792
14792
|
autoplay ? _playVideo() : _stopVideo();
|
|
14793
|
-
} }, settings, { nextArrow: jsxRuntime.jsx(NavButtonContainer
|
|
14793
|
+
} }, settings$2, { nextArrow: jsxRuntime.jsx(NavButtonContainer, { 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), prevArrow: jsxRuntime.jsx(NavButtonContainer, { 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), ref: slick }, { children: images.map(function (image) {
|
|
14794
14794
|
var _a, _b;
|
|
14795
14795
|
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$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, __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$1, { onClick: function () {
|
|
14796
14796
|
isPlaying ? _stopVideo() : _playVideo();
|
|
14797
14797
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14798
14798
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14799
14799
|
};
|
|
14800
|
-
var templateObject_1$
|
|
14800
|
+
var templateObject_1$T, templateObject_2$I, templateObject_3$B, templateObject_4$u, templateObject_5$n, templateObject_6$l, templateObject_7$j, templateObject_8$d, templateObject_9$9;
|
|
14801
14801
|
|
|
14802
|
-
var Container$
|
|
14802
|
+
var Container$E = newStyled.div(templateObject_1$S || (templateObject_1$S = __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"])));
|
|
14803
14803
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14804
14804
|
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;
|
|
14805
|
-
return (jsxRuntime.jsx(Container$
|
|
14805
|
+
return (jsxRuntime.jsx(Container$E, __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));
|
|
14806
|
+
};
|
|
14807
|
+
var templateObject_1$S;
|
|
14808
|
+
|
|
14809
|
+
var _sendCommandToIframe = function (command) {
|
|
14810
|
+
var iframe = document.getElementById('vwo-video');
|
|
14811
|
+
(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
|
|
14812
|
+
iframe.contentWindow.postMessage(JSON.stringify({
|
|
14813
|
+
event: 'command',
|
|
14814
|
+
func: command,
|
|
14815
|
+
}), '*' + '');
|
|
14816
|
+
};
|
|
14817
|
+
var _stopVideo = function () {
|
|
14818
|
+
_sendCommandToIframe('stopVideo');
|
|
14819
|
+
};
|
|
14820
|
+
var _playVideo = function () {
|
|
14821
|
+
_sendCommandToIframe('playVideo');
|
|
14822
|
+
};
|
|
14823
|
+
|
|
14824
|
+
var afterChangeSlide = function (_a) {
|
|
14825
|
+
var _b;
|
|
14826
|
+
var slide = _a.slide, contents = _a.contents, setSelectedImageIndex = _a.setSelectedImageIndex, onChange = _a.onChange;
|
|
14827
|
+
var activeSlide = contents[slide];
|
|
14828
|
+
// If autoplay is true and iframe is the active slide, play the video
|
|
14829
|
+
var autoplay = (_b = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _b === void 0 ? void 0 : _b.includes('autoplay=1');
|
|
14830
|
+
autoplay ? _playVideo() : _stopVideo();
|
|
14831
|
+
setSelectedImageIndex(Math.round(slide));
|
|
14832
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(slide);
|
|
14833
|
+
};
|
|
14834
|
+
|
|
14835
|
+
var settings$1 = {
|
|
14836
|
+
dots: false,
|
|
14837
|
+
infinite: false,
|
|
14838
|
+
speed: 200,
|
|
14839
|
+
slidesToShow: 1,
|
|
14840
|
+
slidesToScroll: 1,
|
|
14841
|
+
initialSlide: 0,
|
|
14842
|
+
};
|
|
14843
|
+
var getImageAttributes = function (idx, itemsOnViewport, imgAttributes) {
|
|
14844
|
+
if (itemsOnViewport) {
|
|
14845
|
+
// add loading and decoding attributes if enabled
|
|
14846
|
+
// to speed up the loading of the images
|
|
14847
|
+
var shouldApply = idx < itemsOnViewport;
|
|
14848
|
+
var loading = shouldApply ? 'eager' : 'lazy';
|
|
14849
|
+
var decoding = shouldApply ? 'sync' : 'async';
|
|
14850
|
+
imgAttributes.loading = loading;
|
|
14851
|
+
imgAttributes.decoding = decoding;
|
|
14852
|
+
}
|
|
14853
|
+
return imgAttributes;
|
|
14854
|
+
};
|
|
14855
|
+
var MainContent = function (_a) {
|
|
14856
|
+
var contents = _a.contents, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, onChange = _a.onChange, _b = _a.itemsOnViewport, itemsOnViewport = _b === void 0 ? 0 : _b, selectedImageIndex = _a.selectedImageIndex, setSelectedImageIndex = _a.setSelectedImageIndex;
|
|
14857
|
+
var slick = React$2.useRef(null);
|
|
14858
|
+
var sliderWrapper = React$2.useRef(null);
|
|
14859
|
+
var _c = React$2.useState(true), arrowsVisible = _c[0], setArrowsVisible = _c[1];
|
|
14860
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
14861
|
+
function hideArrows() {
|
|
14862
|
+
setArrowsVisible(false);
|
|
14863
|
+
}
|
|
14864
|
+
function showArrows() {
|
|
14865
|
+
setArrowsVisible(true);
|
|
14866
|
+
}
|
|
14867
|
+
React$2.useEffect(function () {
|
|
14868
|
+
var _a;
|
|
14869
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(selectedImageIndex, true);
|
|
14870
|
+
}, [contents, selectedImageIndex]);
|
|
14871
|
+
React$2.useEffect(function () {
|
|
14872
|
+
showArrows();
|
|
14873
|
+
}, [selectedImageIndex]);
|
|
14874
|
+
return (jsxRuntime.jsx(Container$K, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) { return afterChangeSlide({
|
|
14875
|
+
slide: e,
|
|
14876
|
+
contents: contents,
|
|
14877
|
+
setSelectedImageIndex: setSelectedImageIndex,
|
|
14878
|
+
onChange: onChange
|
|
14879
|
+
}); } }, settings$1, { nextArrow: arrowsVisible ? (jsxRuntime.jsx(NavButtonContainer$1, __assign$1({ "data-testid": "main-gallery-next-button" }, { children: jsxRuntime.jsx(Button$3, { 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$3, { 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) {
|
|
14880
|
+
var _a;
|
|
14881
|
+
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14882
|
+
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
14883
|
+
// default imgAttributes
|
|
14884
|
+
var imgAttributes = {
|
|
14885
|
+
alt: content.alt,
|
|
14886
|
+
width: '100%',
|
|
14887
|
+
height: '510px',
|
|
14888
|
+
};
|
|
14889
|
+
return (jsxRuntime.jsx("div", __assign$1({ "data-testid": "main-gallery-div-content-".concat(idx) }, { children: !isVideo ? (jsxRuntime.jsx(InnerImageZoom, { afterZoomIn: hideArrows, afterZoomOut: showArrows, src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes(idx, itemsOnViewport, imgAttributes), height: 510, className: "zoomWrapper" }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }), content.key));
|
|
14890
|
+
}) }), void 0) }), void 0));
|
|
14891
|
+
};
|
|
14892
|
+
|
|
14893
|
+
var Container$D = newStyled.div({
|
|
14894
|
+
padding: '1rem',
|
|
14895
|
+
paddingTop: '2rem',
|
|
14896
|
+
gap: '0.5rem',
|
|
14897
|
+
display: 'flex',
|
|
14898
|
+
overflowX: 'auto',
|
|
14899
|
+
});
|
|
14900
|
+
var Thumbnail = newStyled.div({
|
|
14901
|
+
width: '70px',
|
|
14902
|
+
height: '86px',
|
|
14903
|
+
borderRadius: '8px',
|
|
14904
|
+
scrollMarginLeft: '0.5rem',
|
|
14905
|
+
scrollMarginRight: '0.5rem',
|
|
14906
|
+
});
|
|
14907
|
+
var borderImageInactive = '3px solid transparent';
|
|
14908
|
+
var Img = newStyled.img({
|
|
14909
|
+
height: '100%',
|
|
14910
|
+
borderRadius: '8px',
|
|
14911
|
+
overflow: 'hidden',
|
|
14912
|
+
border: borderImageInactive,
|
|
14913
|
+
});
|
|
14914
|
+
|
|
14915
|
+
var Slider = function (_a) {
|
|
14916
|
+
var images = _a.images, selectedImageIndex = _a.selectedImageIndex, setSelectedImageIndex = _a.setSelectedImageIndex, test = _a.test;
|
|
14917
|
+
var theme = useTheme();
|
|
14918
|
+
var itemsRef = React$2.useRef([]);
|
|
14919
|
+
function handleSelectImage(key) {
|
|
14920
|
+
var indexImageClicked = images.findIndex(function (img) { return img.key === key; });
|
|
14921
|
+
itemsRef.current[selectedImageIndex].scrollIntoView({
|
|
14922
|
+
behavior: 'smooth',
|
|
14923
|
+
inline: 'center',
|
|
14924
|
+
block: 'nearest',
|
|
14925
|
+
});
|
|
14926
|
+
setSelectedImageIndex(indexImageClicked);
|
|
14927
|
+
}
|
|
14928
|
+
function isTheActiveImage(i) {
|
|
14929
|
+
return i === selectedImageIndex;
|
|
14930
|
+
}
|
|
14931
|
+
function getBorderColor() {
|
|
14932
|
+
var color = theme.colors.pallete.primary.color;
|
|
14933
|
+
return color ? "3px solid ".concat(color) : 'none';
|
|
14934
|
+
}
|
|
14935
|
+
React$2.useEffect(function () {
|
|
14936
|
+
if (test) {
|
|
14937
|
+
return;
|
|
14938
|
+
}
|
|
14939
|
+
itemsRef.current[selectedImageIndex].scrollIntoView({
|
|
14940
|
+
behavior: 'smooth',
|
|
14941
|
+
inline: 'center',
|
|
14942
|
+
block: 'nearest',
|
|
14943
|
+
});
|
|
14944
|
+
}, [selectedImageIndex, test]);
|
|
14945
|
+
return (jsxRuntime.jsx(Container$D, { 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: {
|
|
14946
|
+
border: isTheActiveImage(i) ? getBorderColor() : borderImageInactive,
|
|
14947
|
+
} }, void 0) }), img.key)); }) }, void 0));
|
|
14948
|
+
};
|
|
14949
|
+
|
|
14950
|
+
var Container$C = newStyled.div({
|
|
14951
|
+
background: 'var(--truekind-default-secondary, #292929)',
|
|
14952
|
+
height: '100vh',
|
|
14953
|
+
width: '100vw',
|
|
14954
|
+
position: 'fixed',
|
|
14955
|
+
top: 0,
|
|
14956
|
+
left: 0,
|
|
14957
|
+
});
|
|
14958
|
+
var Header$2 = newStyled.div({
|
|
14959
|
+
display: 'flex',
|
|
14960
|
+
justifyContent: 'end',
|
|
14961
|
+
alignItems: 'center',
|
|
14962
|
+
color: 'white',
|
|
14963
|
+
padding: '1rem',
|
|
14964
|
+
paddingBottom: '2rem',
|
|
14965
|
+
});
|
|
14966
|
+
var IconContainer$2 = newStyled.div({
|
|
14967
|
+
backgroundColor: '#E5E5E5',
|
|
14968
|
+
padding: '4px 7px 7px 6px',
|
|
14969
|
+
borderRadius: '50%',
|
|
14970
|
+
});
|
|
14971
|
+
|
|
14972
|
+
var GalleryDetailed = function (_a) {
|
|
14973
|
+
var images = _a.images, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, _c = _a.itemsOnViewport, itemsOnViewport = _c === void 0 ? 1 : _c, selectedImageIndex = _a.selectedImageIndex, setSelectedImageIndex = _a.setSelectedImageIndex, setGalleryOpened = _a.setGalleryOpened;
|
|
14974
|
+
function closeGallery() {
|
|
14975
|
+
setGalleryOpened(false);
|
|
14976
|
+
}
|
|
14977
|
+
return (jsxRuntime.jsxs(Container$C, { children: [jsxRuntime.jsx(Header$2, { children: jsxRuntime.jsx(IconContainer$2, __assign$1({ onClick: closeGallery }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.1, width: 1.1 }, void 0) }), void 0) }, void 0), 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));
|
|
14978
|
+
};
|
|
14979
|
+
|
|
14980
|
+
var TopTagContainer$2 = newStyled.div(templateObject_1$R || (templateObject_1$R = __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'); });
|
|
14981
|
+
var TopRightTagContainer = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
14982
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14983
|
+
var templateObject_1$R, templateObject_2$H, templateObject_3$A;
|
|
14984
|
+
|
|
14985
|
+
var settings = {
|
|
14986
|
+
dots: true,
|
|
14987
|
+
infinite: false,
|
|
14988
|
+
speed: 200,
|
|
14989
|
+
slidesToShow: 1.1,
|
|
14990
|
+
slidesToScroll: 1,
|
|
14991
|
+
initialSlide: 0,
|
|
14806
14992
|
};
|
|
14807
|
-
var
|
|
14993
|
+
var ContentGallery = function (_a) {
|
|
14994
|
+
var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, 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;
|
|
14995
|
+
var slick = React$2.useRef(null);
|
|
14996
|
+
var sliderWrapper = React$2.useRef(null);
|
|
14997
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
14998
|
+
var onButtonClick = React$2.useCallback(function (i) {
|
|
14999
|
+
var _a;
|
|
15000
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i, true);
|
|
15001
|
+
}, [slick]);
|
|
15002
|
+
function handleClick() {
|
|
15003
|
+
setGalleryOpened(true);
|
|
15004
|
+
}
|
|
15005
|
+
React$2.useEffect(function () {
|
|
15006
|
+
var _a;
|
|
15007
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(selectedImageIndex, true);
|
|
15008
|
+
}, [contents, selectedImageIndex]);
|
|
15009
|
+
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$K, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider$1, __assign$1({ afterChange: function (e) { return afterChangeSlide({
|
|
15010
|
+
slide: e,
|
|
15011
|
+
contents: contents,
|
|
15012
|
+
setSelectedImageIndex: setSelectedImageIndex,
|
|
15013
|
+
onChange: onChange
|
|
15014
|
+
}); } }, settings, { ref: slick, centerPadding: "80" }, { children: contents.map(function (content, idx) {
|
|
15015
|
+
var _a;
|
|
15016
|
+
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
15017
|
+
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
15018
|
+
// default imgAttributes
|
|
15019
|
+
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$2, __assign$1({ className: "banner-concealable", borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, __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));
|
|
15020
|
+
}) }), void 0) }), void 0)] }, void 0));
|
|
15021
|
+
};
|
|
15022
|
+
|
|
15023
|
+
var Container$B = newStyled.div({
|
|
15024
|
+
height: '100vh',
|
|
15025
|
+
});
|
|
15026
|
+
var MobileGallery = function (_a) {
|
|
15027
|
+
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;
|
|
15028
|
+
var _e = React$2.useState(selectedValue), selectedImageIndex = _e[0], setSelectedImageIndex = _e[1];
|
|
15029
|
+
var _f = React$2.useState(false), galleryOpened = _f[0], setGalleryOpened = _f[1];
|
|
15030
|
+
React$2.useEffect(function () {
|
|
15031
|
+
setSelectedImageIndex(selectedValue);
|
|
15032
|
+
}, [selectedValue]);
|
|
15033
|
+
return (jsxRuntime.jsx(Container$B, { 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));
|
|
15034
|
+
};
|
|
14808
15035
|
|
|
14809
15036
|
var __defProp$1 = Object.defineProperty;
|
|
14810
15037
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14944,7 +15171,7 @@ var transformStyle = function (_a) {
|
|
|
14944
15171
|
return opened
|
|
14945
15172
|
? css(templateObject_3$z || (templateObject_3$z = __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$t || (templateObject_4$t = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14946
15173
|
};
|
|
14947
|
-
var Container$
|
|
15174
|
+
var Container$A = newStyled.div(templateObject_6$k || (templateObject_6$k = __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) {
|
|
14948
15175
|
var width = _a.width;
|
|
14949
15176
|
return width
|
|
14950
15177
|
? css(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
@@ -14961,7 +15188,7 @@ var Modal = function (_a) {
|
|
|
14961
15188
|
}
|
|
14962
15189
|
close();
|
|
14963
15190
|
};
|
|
14964
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
15191
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$A, __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 () {
|
|
14965
15192
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14966
15193
|
onDismiss();
|
|
14967
15194
|
} }, void 0)] }), void 0));
|
|
@@ -18812,7 +19039,7 @@ var BarContainer = newStyled.div({
|
|
|
18812
19039
|
padding: '0 16px',
|
|
18813
19040
|
position: 'relative',
|
|
18814
19041
|
});
|
|
18815
|
-
var Container$
|
|
19042
|
+
var Container$z = newStyled.div(function (_a) {
|
|
18816
19043
|
var backgroundColor = _a.backgroundColor;
|
|
18817
19044
|
return ({
|
|
18818
19045
|
width: '475px',
|
|
@@ -18854,11 +19081,11 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18854
19081
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18855
19082
|
return (jsxRuntime.jsx(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18856
19083
|
};
|
|
18857
|
-
return (jsxRuntime.jsxs(Container$
|
|
19084
|
+
return (jsxRuntime.jsxs(Container$z, __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));
|
|
18858
19085
|
};
|
|
18859
19086
|
var templateObject_1$P, templateObject_2$F;
|
|
18860
19087
|
|
|
18861
|
-
var Container$
|
|
19088
|
+
var Container$y = newStyled.div(templateObject_1$O || (templateObject_1$O = __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) {
|
|
18862
19089
|
var theme = _a.theme;
|
|
18863
19090
|
return theme.component.orderBar.backgroundColor;
|
|
18864
19091
|
});
|
|
@@ -18866,7 +19093,7 @@ var H1 = newStyled.h1(templateObject_2$E || (templateObject_2$E = __makeTemplate
|
|
|
18866
19093
|
var OrderBar = function (_a) {
|
|
18867
19094
|
var message = _a.message, color = _a.color;
|
|
18868
19095
|
var theme = useTheme();
|
|
18869
|
-
return (jsxRuntime.jsxs(Container$
|
|
19096
|
+
return (jsxRuntime.jsxs(Container$y, __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));
|
|
18870
19097
|
};
|
|
18871
19098
|
var templateObject_1$O, templateObject_2$E;
|
|
18872
19099
|
|
|
@@ -18947,7 +19174,7 @@ var TableHead$3 = newStyled.th(templateObject_3$y || (templateObject_3$y = __mak
|
|
|
18947
19174
|
var Label$3 = newStyled('div')(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
18948
19175
|
newStyled(Label$3)(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
18949
19176
|
newStyled(Label$3)(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
18950
|
-
var Container$
|
|
19177
|
+
var Container$x = newStyled('div')(templateObject_7$h || (templateObject_7$h = __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"])));
|
|
18951
19178
|
newStyled('span')(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
18952
19179
|
var Column$2 = newStyled('div')(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\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: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
18953
19180
|
var TableRow$3 = newStyled.tr(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
@@ -19020,7 +19247,7 @@ var SizeChartTableV3 = function (_a) {
|
|
|
19020
19247
|
value: cell,
|
|
19021
19248
|
}); });
|
|
19022
19249
|
});
|
|
19023
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Parent, __assign$1({ ref: containerRef }, { children: jsxRuntime.jsx(Container$
|
|
19250
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Parent, __assign$1({ ref: containerRef }, { children: jsxRuntime.jsx(Container$x, { children: jsxRuntime.jsxs(Column$2, { children: [isMultilabel && (jsxRuntime.jsxs(Header$1, { children: [jsxRuntime.jsx("div", { children: trimmedYLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(TableElement$3, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsxRuntime.jsx(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsxRuntime.jsx(TableRow$3, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$3, __assign$1({ isSticky: !!newSizeTableCss && index === 0 }, { children: index === 0 && isMultilabel ? (jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex', alignItems: 'center', gap: '15px' } }, { children: [jsxRuntime.jsx("div", { children: trimmedXLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronDownVariant, {}, void 0)] }), void 0)) : (header) }), header)); }) }, void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
19024
19251
|
backgroundColor: getCellColor$2(index, cell.value, true),
|
|
19025
19252
|
} }, { children: cell.value }), cell.id)); }) }, row[0].id)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsxRuntime.jsx(TableRow$3, __assign$1({ className: getIsOdd$2(parentIndex) ? 'background' : '' }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ isSticky: false }, { children: cell.value }), cell.id)); }) }), row[0].id)); }) }, void 0))] }), void 0)] }, void 0) }, void 0) }), void 0), newSizeTableCss && isMobile && jsxRuntime.jsx(ArrowTip, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
19026
19253
|
};
|
|
@@ -19032,7 +19259,7 @@ var ArrowTip = function (_a) {
|
|
|
19032
19259
|
};
|
|
19033
19260
|
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
19034
19261
|
|
|
19035
|
-
var Container$
|
|
19262
|
+
var Container$w = newStyled.div(templateObject_1$L || (templateObject_1$L = __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"])));
|
|
19036
19263
|
var Card$1 = newStyled.div(templateObject_2$B || (templateObject_2$B = __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"])));
|
|
19037
19264
|
var Tag$1 = newStyled.div(templateObject_3$x || (templateObject_3$x = __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"])));
|
|
19038
19265
|
var Label$2 = newStyled.div(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
@@ -19042,7 +19269,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$g || (templateObject_7$g =
|
|
|
19042
19269
|
var DiscountContainer = newStyled.div(templateObject_8$b || (templateObject_8$b = __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"])));
|
|
19043
19270
|
var PackSelector = function (_a) {
|
|
19044
19271
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
19045
|
-
return (jsxRuntime.jsx(Container$
|
|
19272
|
+
return (jsxRuntime.jsx(Container$w, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
19046
19273
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
19047
19274
|
}) }), void 0));
|
|
19048
19275
|
};
|
|
@@ -19071,7 +19298,7 @@ var PackCard = function (_a) {
|
|
|
19071
19298
|
};
|
|
19072
19299
|
var templateObject_1$L, templateObject_2$B, templateObject_3$x, templateObject_4$r, templateObject_5$k, templateObject_6$i, templateObject_7$g, templateObject_8$b;
|
|
19073
19300
|
|
|
19074
|
-
var Container$
|
|
19301
|
+
var Container$v = newStyled.div(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
19075
19302
|
var IconContainer = newStyled.div(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
19076
19303
|
var PageNumbersContainer = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
19077
19304
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -19139,7 +19366,7 @@ var Pagination = function (_a) {
|
|
|
19139
19366
|
}
|
|
19140
19367
|
return pages;
|
|
19141
19368
|
}, [from, page, showReducedPages, to]);
|
|
19142
|
-
return (jsxRuntime.jsxs(Container$
|
|
19369
|
+
return (jsxRuntime.jsxs(Container$v, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer, __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, __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));
|
|
19143
19370
|
};
|
|
19144
19371
|
|
|
19145
19372
|
var PaginatorBlog = function (_a) {
|
|
@@ -19153,12 +19380,12 @@ var PaginatorBlog = function (_a) {
|
|
|
19153
19380
|
setPage(page);
|
|
19154
19381
|
onChange(page);
|
|
19155
19382
|
};
|
|
19156
|
-
return (jsxRuntime.jsxs(Container$
|
|
19383
|
+
return (jsxRuntime.jsxs(Container$v, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer, __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
|
|
19157
19384
|
? theme.colors.shades['white'].color
|
|
19158
19385
|
: 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, __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));
|
|
19159
19386
|
};
|
|
19160
19387
|
|
|
19161
|
-
var Container$
|
|
19388
|
+
var Container$u = newStyled.div(templateObject_1$J || (templateObject_1$J = __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) {
|
|
19162
19389
|
var width = _a.width;
|
|
19163
19390
|
return width;
|
|
19164
19391
|
}, function (_a) {
|
|
@@ -19174,11 +19401,11 @@ var Container$v = newStyled.div(templateObject_1$J || (templateObject_1$J = __ma
|
|
|
19174
19401
|
var PaymentMethod = function (_a) {
|
|
19175
19402
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
19176
19403
|
var theme = useTheme();
|
|
19177
|
-
return (jsxRuntime.jsx(Container$
|
|
19404
|
+
return (jsxRuntime.jsx(Container$u, __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));
|
|
19178
19405
|
};
|
|
19179
19406
|
var templateObject_1$J;
|
|
19180
19407
|
|
|
19181
|
-
var Container$
|
|
19408
|
+
var Container$t = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
19182
19409
|
var IMAGE_WIDTH = '63px';
|
|
19183
19410
|
var ImageContainer$3 = newStyled.div(templateObject_2$z || (templateObject_2$z = __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);
|
|
19184
19411
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$v || (templateObject_3$v = __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({
|
|
@@ -19219,7 +19446,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
19219
19446
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19220
19447
|
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;
|
|
19221
19448
|
var theme = useTheme();
|
|
19222
|
-
return (jsxRuntime.jsxs(Container$
|
|
19449
|
+
return (jsxRuntime.jsxs(Container$t, __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), 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" }, { children: subtitle }), void 0), midElement, 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)), 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));
|
|
19223
19450
|
};
|
|
19224
19451
|
var templateObject_1$I, templateObject_2$z, templateObject_3$v, templateObject_4$p, templateObject_5$j, templateObject_6$h;
|
|
19225
19452
|
|
|
@@ -19264,7 +19491,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
19264
19491
|
position: 'absolute',
|
|
19265
19492
|
});
|
|
19266
19493
|
});
|
|
19267
|
-
var Container$
|
|
19494
|
+
var Container$s = newStyled.div(function (_a) {
|
|
19268
19495
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
19269
19496
|
return ({
|
|
19270
19497
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -19278,11 +19505,11 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
19278
19505
|
var ProgressBar = function (_a) {
|
|
19279
19506
|
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;
|
|
19280
19507
|
var theme = useTheme();
|
|
19281
|
-
return (jsxRuntime.jsxs(Container$
|
|
19508
|
+
return (jsxRuntime.jsxs(Container$s, __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));
|
|
19282
19509
|
};
|
|
19283
19510
|
var templateObject_1$H;
|
|
19284
19511
|
|
|
19285
|
-
var Container$
|
|
19512
|
+
var Container$r = newStyled.div(templateObject_1$G || (templateObject_1$G = __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; });
|
|
19286
19513
|
var Item$1 = newStyled.span(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
19287
19514
|
var Number$1 = newStyled(Item$1)(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
19288
19515
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$o || (templateObject_4$o = __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)'; });
|
|
@@ -19308,7 +19535,7 @@ var QuantityPicker = function (_a) {
|
|
|
19308
19535
|
return clamp(value);
|
|
19309
19536
|
});
|
|
19310
19537
|
}, [value, clamp]);
|
|
19311
|
-
return (jsxRuntime.jsxs(Container$
|
|
19538
|
+
return (jsxRuntime.jsxs(Container$r, __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));
|
|
19312
19539
|
};
|
|
19313
19540
|
var templateObject_1$G, templateObject_2$y, templateObject_3$u, templateObject_4$o;
|
|
19314
19541
|
|
|
@@ -19380,7 +19607,7 @@ var ContainerStyles$1 = {
|
|
|
19380
19607
|
};
|
|
19381
19608
|
|
|
19382
19609
|
var Wrapper$3 = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19383
|
-
var Container$
|
|
19610
|
+
var Container$q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19384
19611
|
var Input$2 = newStyled.input(templateObject_2$x || (templateObject_2$x = __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) {
|
|
19385
19612
|
var disabled = _a.disabled;
|
|
19386
19613
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -19397,7 +19624,7 @@ var RadioPrimary = function (_a) {
|
|
|
19397
19624
|
var value = event.currentTarget.value;
|
|
19398
19625
|
onChange({ value: value, label: label });
|
|
19399
19626
|
};
|
|
19400
|
-
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
19627
|
+
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$q, __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));
|
|
19401
19628
|
};
|
|
19402
19629
|
var templateObject_1$F, templateObject_2$x, templateObject_3$t;
|
|
19403
19630
|
|
|
@@ -19479,7 +19706,7 @@ var ContainerStyles = {
|
|
|
19479
19706
|
};
|
|
19480
19707
|
|
|
19481
19708
|
var Wrapper$2 = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
19482
|
-
var Container$
|
|
19709
|
+
var Container$p = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19483
19710
|
var Input$1 = newStyled.input(templateObject_2$w || (templateObject_2$w = __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) {
|
|
19484
19711
|
var disabled = _a.disabled;
|
|
19485
19712
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -19502,7 +19729,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19502
19729
|
var value = event.currentTarget.value;
|
|
19503
19730
|
onChange({ value: value, label: label });
|
|
19504
19731
|
};
|
|
19505
|
-
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$
|
|
19732
|
+
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$p, __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));
|
|
19506
19733
|
};
|
|
19507
19734
|
var templateObject_1$E, templateObject_2$w, templateObject_3$s;
|
|
19508
19735
|
|
|
@@ -19532,7 +19759,7 @@ function formatDate(date, format) {
|
|
|
19532
19759
|
}
|
|
19533
19760
|
}
|
|
19534
19761
|
|
|
19535
|
-
var Container$
|
|
19762
|
+
var Container$o = newStyled.div(templateObject_1$D || (templateObject_1$D = __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"])));
|
|
19536
19763
|
var Content$1 = newStyled.div(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
19537
19764
|
var StarsContent = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19538
19765
|
var ReviewContainer$1 = newStyled.div(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
@@ -19570,14 +19797,14 @@ var Review$1 = function (_a) {
|
|
|
19570
19797
|
}
|
|
19571
19798
|
}
|
|
19572
19799
|
}, [opened]);
|
|
19573
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
19800
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$o, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19574
19801
|
(!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));
|
|
19575
19802
|
};
|
|
19576
19803
|
var templateObject_1$D, templateObject_2$v, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$g, templateObject_7$f, templateObject_8$a, templateObject_9$7, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19577
19804
|
|
|
19578
19805
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19579
19806
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19580
|
-
var Container$
|
|
19807
|
+
var Container$n = newStyled.div(templateObject_1$C || (templateObject_1$C = __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"])));
|
|
19581
19808
|
var Heading = newStyled.div(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
19582
19809
|
var Content = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19583
19810
|
var ReviewContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
@@ -19619,7 +19846,7 @@ var Review = function (_a) {
|
|
|
19619
19846
|
});
|
|
19620
19847
|
};
|
|
19621
19848
|
}, [randomId]);
|
|
19622
|
-
return (jsxRuntime.jsxs(Container$
|
|
19849
|
+
return (jsxRuntime.jsxs(Container$n, { 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: {
|
|
19623
19850
|
__html: showMoreMobile
|
|
19624
19851
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19625
19852
|
: description,
|
|
@@ -19631,7 +19858,7 @@ var Review = function (_a) {
|
|
|
19631
19858
|
};
|
|
19632
19859
|
var templateObject_1$C, templateObject_2$u, templateObject_3$q, templateObject_4$m, templateObject_5$h, templateObject_6$f, templateObject_7$e, templateObject_8$9, templateObject_9$6, templateObject_10$6, templateObject_11$3, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19633
19860
|
|
|
19634
|
-
var Container$
|
|
19861
|
+
var Container$m = newStyled.div(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
19635
19862
|
var ReviewsContainer = newStyled.div(templateObject_2$t || (templateObject_2$t = __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"])));
|
|
19636
19863
|
var ReviewsCount = newStyled.div(templateObject_3$p || (templateObject_3$p = __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"])));
|
|
19637
19864
|
var ReviewsStars = newStyled.div(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
@@ -19645,17 +19872,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19645
19872
|
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;
|
|
19646
19873
|
var starsNumber = 5;
|
|
19647
19874
|
var theme = useTheme();
|
|
19648
|
-
return (jsxRuntime.jsxs(Container$
|
|
19875
|
+
return (jsxRuntime.jsxs(Container$m, { 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));
|
|
19649
19876
|
};
|
|
19650
19877
|
var templateObject_1$B, templateObject_2$t, templateObject_3$p, templateObject_4$l, templateObject_5$g, templateObject_6$e, templateObject_7$d;
|
|
19651
19878
|
|
|
19652
|
-
var Container$
|
|
19879
|
+
var Container$l = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
19653
19880
|
var Text = newStyled.p(templateObject_2$s || (templateObject_2$s = __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; });
|
|
19654
19881
|
var ScrollToTop = function (_a) {
|
|
19655
19882
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19656
19883
|
var theme = useTheme();
|
|
19657
19884
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19658
|
-
return (jsxRuntime.jsxs(Container$
|
|
19885
|
+
return (jsxRuntime.jsxs(Container$l, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __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));
|
|
19659
19886
|
};
|
|
19660
19887
|
var templateObject_1$A, templateObject_2$s;
|
|
19661
19888
|
|
|
@@ -19688,7 +19915,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19688
19915
|
},
|
|
19689
19916
|
}); });
|
|
19690
19917
|
|
|
19691
|
-
var Container$
|
|
19918
|
+
var Container$k = newStyled.div(templateObject_1$z || (templateObject_1$z = __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({
|
|
19692
19919
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19693
19920
|
}));
|
|
19694
19921
|
var Description = newStyled.div({
|
|
@@ -19705,18 +19932,18 @@ var Description = newStyled.div({
|
|
|
19705
19932
|
var ProductItem = function (_a) {
|
|
19706
19933
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19707
19934
|
var theme = useTheme();
|
|
19708
|
-
return (jsxRuntime.jsxs(Container$
|
|
19935
|
+
return (jsxRuntime.jsxs(Container$k, __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));
|
|
19709
19936
|
};
|
|
19710
19937
|
var templateObject_1$z;
|
|
19711
19938
|
|
|
19712
|
-
var Container$
|
|
19939
|
+
var Container$j = newStyled.div({
|
|
19713
19940
|
display: 'flex',
|
|
19714
19941
|
justifyContent: 'center',
|
|
19715
19942
|
padding: '1rem',
|
|
19716
19943
|
});
|
|
19717
19944
|
var Footer = function (_a) {
|
|
19718
19945
|
var text = _a.text, onClick = _a.onClick;
|
|
19719
|
-
return (jsxRuntime.jsx(Container$
|
|
19946
|
+
return (jsxRuntime.jsx(Container$j, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19720
19947
|
};
|
|
19721
19948
|
|
|
19722
19949
|
var Ul = newStyled.ul({
|
|
@@ -19735,7 +19962,7 @@ var Anchor = newStyled.a({
|
|
|
19735
19962
|
padding: 0,
|
|
19736
19963
|
textDecoration: 'none',
|
|
19737
19964
|
});
|
|
19738
|
-
var Container$
|
|
19965
|
+
var Container$i = newStyled.div(templateObject_2$r || (templateObject_2$r = __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({
|
|
19739
19966
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19740
19967
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19741
19968
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -19746,18 +19973,18 @@ var Header = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTem
|
|
|
19746
19973
|
var ResultsPanel = function (_a) {
|
|
19747
19974
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19748
19975
|
var theme = useTheme();
|
|
19749
|
-
return (jsxRuntime.jsxs(Container$
|
|
19976
|
+
return (jsxRuntime.jsxs(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __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));
|
|
19750
19977
|
};
|
|
19751
19978
|
var templateObject_1$y, templateObject_2$r, templateObject_3$o;
|
|
19752
19979
|
|
|
19753
|
-
var Button
|
|
19980
|
+
var Button = newStyled.button(templateObject_1$x || (templateObject_1$x = __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({
|
|
19754
19981
|
right: ['1rem', '7.75rem'],
|
|
19755
19982
|
top: ['0.75rem', '0.75rem'],
|
|
19756
19983
|
}));
|
|
19757
19984
|
var ClearButton = function (_a) {
|
|
19758
19985
|
var onClick = _a.onClick;
|
|
19759
19986
|
var theme = useTheme();
|
|
19760
|
-
return (jsxRuntime.jsx(Button
|
|
19987
|
+
return (jsxRuntime.jsx(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19761
19988
|
};
|
|
19762
19989
|
var templateObject_1$x;
|
|
19763
19990
|
|
|
@@ -19801,7 +20028,7 @@ var reducer = function (state, action) {
|
|
|
19801
20028
|
}
|
|
19802
20029
|
}
|
|
19803
20030
|
};
|
|
19804
|
-
var Container$
|
|
20031
|
+
var Container$h = newStyled.div({
|
|
19805
20032
|
position: 'relative',
|
|
19806
20033
|
display: 'flex',
|
|
19807
20034
|
});
|
|
@@ -19841,7 +20068,7 @@ var SearchBar = function (_a) {
|
|
|
19841
20068
|
if (e.cancelable) {
|
|
19842
20069
|
e.preventDefault();
|
|
19843
20070
|
}
|
|
19844
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
20071
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$h, __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) {
|
|
19845
20072
|
if (e.key === 'Enter') {
|
|
19846
20073
|
if (e.cancelable) {
|
|
19847
20074
|
e.preventDefault();
|
|
@@ -19852,20 +20079,20 @@ var SearchBar = function (_a) {
|
|
|
19852
20079
|
} }, 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));
|
|
19853
20080
|
};
|
|
19854
20081
|
|
|
19855
|
-
var Container$
|
|
20082
|
+
var Container$g = newStyled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
19856
20083
|
var BackArrow = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19857
20084
|
var BoldSpan = newStyled.span(templateObject_3$n || (templateObject_3$n = __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"])));
|
|
19858
20085
|
var NormalSpan = newStyled.span(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
19859
20086
|
var SearchNavigationParents = newStyled.div(templateObject_5$f || (templateObject_5$f = __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"])));
|
|
19860
20087
|
var SearchNavigation = function (_a) {
|
|
19861
20088
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19862
|
-
return (jsxRuntime.jsxs(Container$
|
|
20089
|
+
return (jsxRuntime.jsxs(Container$g, { 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) {
|
|
19863
20090
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19864
20091
|
}) }, void 0)] }, void 0));
|
|
19865
20092
|
};
|
|
19866
20093
|
var templateObject_1$v, templateObject_2$q, templateObject_3$n, templateObject_4$k, templateObject_5$f;
|
|
19867
20094
|
|
|
19868
|
-
var Container$
|
|
20095
|
+
var Container$f = newStyled.div(templateObject_1$u || (templateObject_1$u = __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) {
|
|
19869
20096
|
var alignCenter = _a.alignCenter;
|
|
19870
20097
|
return alignCenter &&
|
|
19871
20098
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19880,7 +20107,7 @@ var BannerText = newStyled.div(templateObject_3$m || (templateObject_3$m = __mak
|
|
|
19880
20107
|
var ShortBanner = function (_a) {
|
|
19881
20108
|
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;
|
|
19882
20109
|
var theme = useTheme();
|
|
19883
|
-
return (jsxRuntime.jsxs(Container$
|
|
20110
|
+
return (jsxRuntime.jsxs(Container$f, __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));
|
|
19884
20111
|
};
|
|
19885
20112
|
var templateObject_1$u, templateObject_2$p, templateObject_3$m;
|
|
19886
20113
|
|
|
@@ -19890,7 +20117,7 @@ var TableHead$2 = newStyled.th(templateObject_3$l || (templateObject_3$l = __mak
|
|
|
19890
20117
|
var Label$1 = newStyled('div')(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
19891
20118
|
var TopLabel$1 = newStyled(Label$1)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19892
20119
|
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19893
|
-
var Container$
|
|
20120
|
+
var Container$e = newStyled('div')(templateObject_7$c || (templateObject_7$c = __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"])));
|
|
19894
20121
|
var LabelText$1 = newStyled('span')(templateObject_8$8 || (templateObject_8$8 = __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"])));
|
|
19895
20122
|
var Column$1 = newStyled('div')(templateObject_9$5 || (templateObject_9$5 = __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"])));
|
|
19896
20123
|
var TableRow$2 = newStyled.tr(templateObject_10$5 || (templateObject_10$5 = __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; });
|
|
@@ -19930,7 +20157,7 @@ var SizeChartTable = function (_a) {
|
|
|
19930
20157
|
var theme = useTheme();
|
|
19931
20158
|
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];
|
|
19932
20159
|
var isMultilabel = xLabel && yLabel;
|
|
19933
|
-
return (jsxRuntime.jsxs(Container$
|
|
20160
|
+
return (jsxRuntime.jsxs(Container$e, { 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$1, { 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$2, __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$2, __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$2, __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$2, __assign$1({ style: {
|
|
19934
20161
|
backgroundColor: getCellColor$1(index, cell),
|
|
19935
20162
|
}, 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$2, __assign$1({ className: getIsOdd$1(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$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19936
20163
|
};
|
|
@@ -19989,12 +20216,12 @@ var TextButton = function (_a) {
|
|
|
19989
20216
|
};
|
|
19990
20217
|
var templateObject_1$r;
|
|
19991
20218
|
|
|
19992
|
-
var Container$
|
|
20219
|
+
var Container$d = newStyled.div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
19993
20220
|
var P = newStyled.p(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19994
20221
|
var PercentageSpan = newStyled.span(templateObject_3$j || (templateObject_3$j = __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"])));
|
|
19995
20222
|
var SizeFitGuide = function (_a) {
|
|
19996
20223
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19997
|
-
return (jsxRuntime.jsxs(Container$
|
|
20224
|
+
return (jsxRuntime.jsxs(Container$d, { 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));
|
|
19998
20225
|
};
|
|
19999
20226
|
var templateObject_1$q, templateObject_2$m, templateObject_3$j;
|
|
20000
20227
|
|
|
@@ -20044,7 +20271,7 @@ var Tab = function (_a) {
|
|
|
20044
20271
|
};
|
|
20045
20272
|
var templateObject_1$o;
|
|
20046
20273
|
|
|
20047
|
-
var Container$
|
|
20274
|
+
var Container$c = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
20048
20275
|
var TabList = newStyled.div(templateObject_2$k || (templateObject_2$k = __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) {
|
|
20049
20276
|
var backgroundColor = _a.backgroundColor;
|
|
20050
20277
|
return backgroundColor;
|
|
@@ -20062,14 +20289,14 @@ var Tabs = function (_a) {
|
|
|
20062
20289
|
return null;
|
|
20063
20290
|
}
|
|
20064
20291
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
20065
|
-
return (jsxRuntime.jsxs(Container$
|
|
20292
|
+
return (jsxRuntime.jsxs(Container$c, __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));
|
|
20066
20293
|
};
|
|
20067
20294
|
var templateObject_1$n, templateObject_2$k, templateObject_3$i, templateObject_4$h;
|
|
20068
20295
|
|
|
20069
|
-
var Container$
|
|
20296
|
+
var Container$b = newStyled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
20070
20297
|
var Tag = function (_a) {
|
|
20071
20298
|
var text = _a.text, className = _a.className;
|
|
20072
|
-
return jsxRuntime.jsx(Container$
|
|
20299
|
+
return jsxRuntime.jsx(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
20073
20300
|
};
|
|
20074
20301
|
var templateObject_1$m;
|
|
20075
20302
|
|
|
@@ -20208,7 +20435,7 @@ var templateObject_1$l, templateObject_2$j, templateObject_3$h;
|
|
|
20208
20435
|
|
|
20209
20436
|
var ContainerDesktop = css(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
20210
20437
|
var ContainerMobile = css(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
20211
|
-
var Container$
|
|
20438
|
+
var Container$a = newStyled.div(templateObject_3$g || (templateObject_3$g = __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);
|
|
20212
20439
|
var TextContainer = newStyled.div(templateObject_4$g || (templateObject_4$g = __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"])));
|
|
20213
20440
|
var TextWithImage = function (_a) {
|
|
20214
20441
|
var _b, _c, _d, _e;
|
|
@@ -20229,7 +20456,7 @@ var TextWithImage = function (_a) {
|
|
|
20229
20456
|
// @ts-ignore
|
|
20230
20457
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
20231
20458
|
};
|
|
20232
|
-
return (jsxs(Container$
|
|
20459
|
+
return (jsxs(Container$a, __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: {
|
|
20233
20460
|
backgroundColor: props.btnBGColor,
|
|
20234
20461
|
color: '#ffffff',
|
|
20235
20462
|
border: props.btnBGColor,
|
|
@@ -20360,11 +20587,11 @@ var Currency = newStyled.span(templateObject_3$d || (templateObject_3$d = __make
|
|
|
20360
20587
|
var theme = _a.theme;
|
|
20361
20588
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20362
20589
|
});
|
|
20363
|
-
var Container$
|
|
20590
|
+
var Container$9 = newStyled.div(templateObject_4$d || (templateObject_4$d = __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) {
|
|
20364
20591
|
var highlightColor = _a.highlightColor;
|
|
20365
20592
|
return highlightColor;
|
|
20366
20593
|
});
|
|
20367
|
-
var TotalContainer = newStyled(Container$
|
|
20594
|
+
var TotalContainer = newStyled(Container$9)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20368
20595
|
var showTotalLabel = _a.showTotalLabel;
|
|
20369
20596
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20370
20597
|
});
|
|
@@ -20379,7 +20606,7 @@ var templateObject_1$h, templateObject_2$f, templateObject_3$d, templateObject_4
|
|
|
20379
20606
|
var Total = function (_a) {
|
|
20380
20607
|
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;
|
|
20381
20608
|
var theme = useTheme();
|
|
20382
|
-
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$
|
|
20609
|
+
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$9, __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));
|
|
20383
20610
|
};
|
|
20384
20611
|
|
|
20385
20612
|
var Wrapper = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
@@ -20414,7 +20641,7 @@ var Totals = {
|
|
|
20414
20641
|
Subtotal: Subtotal,
|
|
20415
20642
|
};
|
|
20416
20643
|
|
|
20417
|
-
var Container$
|
|
20644
|
+
var Container$8 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20418
20645
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20419
20646
|
var CheckpointDate$1 = newStyled.div(templateObject_3$b || (templateObject_3$b = __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; });
|
|
20420
20647
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$b || (templateObject_4$b = __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'); });
|
|
@@ -20455,7 +20682,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20455
20682
|
}
|
|
20456
20683
|
return '30px';
|
|
20457
20684
|
};
|
|
20458
|
-
return (jsxRuntime.jsxs(Container$
|
|
20685
|
+
return (jsxRuntime.jsxs(Container$8, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20459
20686
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20460
20687
|
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
|
|
20461
20688
|
? activeCheckpointColor
|
|
@@ -20468,7 +20695,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20468
20695
|
};
|
|
20469
20696
|
var templateObject_1$f, templateObject_2$d, templateObject_3$b, templateObject_4$b, templateObject_5$b, templateObject_6$a, templateObject_7$a, templateObject_8$6, templateObject_9$4, templateObject_10$4, templateObject_11$2;
|
|
20470
20697
|
|
|
20471
|
-
var Container$
|
|
20698
|
+
var Container$7 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20472
20699
|
var CheckpointContainer = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20473
20700
|
var CheckpointDate = newStyled.div(templateObject_3$a || (templateObject_3$a = __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; });
|
|
20474
20701
|
var CheckpointDateLabel = newStyled.p(templateObject_4$a || (templateObject_4$a = __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'); });
|
|
@@ -20497,7 +20724,7 @@ var TrackingProgress = function (_a) {
|
|
|
20497
20724
|
}
|
|
20498
20725
|
return '30px';
|
|
20499
20726
|
};
|
|
20500
|
-
return (jsxRuntime.jsxs(Container$
|
|
20727
|
+
return (jsxRuntime.jsxs(Container$7, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20501
20728
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20502
20729
|
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
|
|
20503
20730
|
? theme.colors.semantic.informative.color
|
|
@@ -20537,7 +20764,7 @@ var HurryUp = function (_a) {
|
|
|
20537
20764
|
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
20538
20765
|
};
|
|
20539
20766
|
|
|
20540
|
-
var Container$
|
|
20767
|
+
var Container$6 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
20541
20768
|
var size = _a.size;
|
|
20542
20769
|
return (size ? size : '100%');
|
|
20543
20770
|
}, function (_a) {
|
|
@@ -20568,7 +20795,7 @@ var templateObject_1$c, templateObject_2$b;
|
|
|
20568
20795
|
|
|
20569
20796
|
var Spinner = function (_a) {
|
|
20570
20797
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
20571
|
-
return (jsxRuntime.jsx(Container$
|
|
20798
|
+
return (jsxRuntime.jsx(Container$6, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsxRuntime.jsx(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : exports.ComponentSize.Small }, void 0)) }), void 0));
|
|
20572
20799
|
};
|
|
20573
20800
|
|
|
20574
20801
|
var AutoshipFrequencyDropdown = function (_a) {
|
|
@@ -20729,7 +20956,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$3 || (templateOb
|
|
|
20729
20956
|
? ClubBorderColor
|
|
20730
20957
|
: Shades200Color;
|
|
20731
20958
|
});
|
|
20732
|
-
var Container$
|
|
20959
|
+
var Container$5 = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20733
20960
|
var templateObject_1$8, templateObject_2$7, templateObject_3$7, templateObject_4$7, templateObject_5$7, templateObject_6$6, templateObject_7$6, templateObject_8$4, templateObject_9$3, templateObject_10$3, templateObject_11$1;
|
|
20734
20961
|
|
|
20735
20962
|
var ClubOfferSelector = function (_a) {
|
|
@@ -20769,7 +20996,7 @@ var ClubOfferSelector = function (_a) {
|
|
|
20769
20996
|
onChange(__assign$1({}, dataObj));
|
|
20770
20997
|
};
|
|
20771
20998
|
var isSelected = radioIds.clubOfferSelector.id === radioCheck.id;
|
|
20772
|
-
return (jsxRuntime.jsxs(Container$
|
|
20999
|
+
return (jsxRuntime.jsxs(Container$5, __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: {
|
|
20773
21000
|
marginRight: '10px',
|
|
20774
21001
|
}, labelStyle: {
|
|
20775
21002
|
color: ClubBorderColor,
|
|
@@ -20813,14 +21040,14 @@ var ImageContainer$1 = newStyled.div(function (_a) {
|
|
|
20813
21040
|
});
|
|
20814
21041
|
});
|
|
20815
21042
|
var ImageHoverContainer$1 = newStyled.img(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
20816
|
-
var Container$
|
|
21043
|
+
var Container$4 = newStyled.a(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
20817
21044
|
var ProdCardContainer$2 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __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"])));
|
|
20818
21045
|
var Title$2 = newStyled.p(templateObject_4$5 || (templateObject_4$5 = __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; });
|
|
20819
21046
|
newStyled.div(templateObject_5$5 || (templateObject_5$5 = __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) {
|
|
20820
21047
|
var style = _a.style;
|
|
20821
21048
|
return style.width;
|
|
20822
21049
|
});
|
|
20823
|
-
var BottomTagContainer$
|
|
21050
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20824
21051
|
var style = _a.style;
|
|
20825
21052
|
return style.bottom || '6%';
|
|
20826
21053
|
});
|
|
@@ -20863,7 +21090,7 @@ var getStylesBySize$2 = function (size) {
|
|
|
20863
21090
|
};
|
|
20864
21091
|
}
|
|
20865
21092
|
};
|
|
20866
|
-
var TopTagContainer$
|
|
21093
|
+
var TopTagContainer$1 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __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) {
|
|
20867
21094
|
var style = _a.style;
|
|
20868
21095
|
return style.width;
|
|
20869
21096
|
});
|
|
@@ -20879,7 +21106,7 @@ var ProductCard = function (_a) {
|
|
|
20879
21106
|
_a[exports.ComponentSize.Small] = 2,
|
|
20880
21107
|
_a)[size];
|
|
20881
21108
|
}, [size]);
|
|
20882
|
-
return (jsxRuntime.jsxs(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$
|
|
21109
|
+
return (jsxRuntime.jsxs(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$4, __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$1, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __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$4, __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));
|
|
20883
21110
|
};
|
|
20884
21111
|
var templateObject_1$5;
|
|
20885
21112
|
|
|
@@ -20893,14 +21120,14 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
20893
21120
|
});
|
|
20894
21121
|
var DiscountLabel$1 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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"])));
|
|
20895
21122
|
var ImageHoverContainer = newStyled.img(templateObject_2$4 || (templateObject_2$4 = __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"])));
|
|
20896
|
-
var Container$
|
|
21123
|
+
var Container$3 = newStyled.a(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
20897
21124
|
var ProdCardContainer$1 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __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"])));
|
|
20898
21125
|
var Title$1 = newStyled.p(templateObject_5$4 || (templateObject_5$4 = __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; });
|
|
20899
|
-
var TopTagContainer
|
|
21126
|
+
var TopTagContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __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) {
|
|
20900
21127
|
var style = _a.style;
|
|
20901
21128
|
return style.width;
|
|
20902
21129
|
});
|
|
20903
|
-
var BottomTagContainer
|
|
21130
|
+
var BottomTagContainer = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n justify-content: flex-end;\n bottom: ", ";\n right: ", ";\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n display: flex;\n justify-content: flex-end;\n bottom: ", ";\n right: ", ";\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
20904
21131
|
var _b;
|
|
20905
21132
|
var style = _a.style;
|
|
20906
21133
|
return (_b = style.bottom) !== null && _b !== void 0 ? _b : '6%';
|
|
@@ -20973,7 +21200,7 @@ var ProductCardV2 = function (_a) {
|
|
|
20973
21200
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
|
|
20974
21201
|
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));
|
|
20975
21202
|
};
|
|
20976
|
-
return (jsxRuntime.jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$
|
|
21203
|
+
return (jsxRuntime.jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$3, __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, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, __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$3, __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: {
|
|
20977
21204
|
display: 'flex',
|
|
20978
21205
|
alignItems: 'flex-start',
|
|
20979
21206
|
gap: '5px',
|
|
@@ -20991,7 +21218,7 @@ newStyled.div(function (_a) {
|
|
|
20991
21218
|
});
|
|
20992
21219
|
var DiscountLabel = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __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"])));
|
|
20993
21220
|
newStyled.img(templateObject_2$3 || (templateObject_2$3 = __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"])));
|
|
20994
|
-
var Container$
|
|
21221
|
+
var Container$2 = newStyled.a(templateObject_3$3 || (templateObject_3$3 = __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"])));
|
|
20995
21222
|
var ProdCardContainer = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
20996
21223
|
var Title = newStyled.p(templateObject_5$3 || (templateObject_5$3 = __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; });
|
|
20997
21224
|
newStyled.div(templateObject_6$3 || (templateObject_6$3 = __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) {
|
|
@@ -21060,7 +21287,7 @@ var ProductCardV3 = function (_a) {
|
|
|
21060
21287
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
|
|
21061
21288
|
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));
|
|
21062
21289
|
};
|
|
21063
|
-
return (jsxRuntime.jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsx(Container$
|
|
21290
|
+
return (jsxRuntime.jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsx(Container$2, __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$2, __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: {
|
|
21064
21291
|
margin: '5x 0 0 45px',
|
|
21065
21292
|
backgroundColor: 'transparent',
|
|
21066
21293
|
border: 'none',
|
|
@@ -21074,53 +21301,8 @@ var ProductCardV3 = function (_a) {
|
|
|
21074
21301
|
} }, { children: jsxRuntime.jsx(Image$3, { alt: "quick-view-eye", src: "https://cdn.shopify.com/s/files/1/0242/7086/4465/files/quick-view-eye.png?v=1712256686", width: "32px", height: "32px", borderRadius: "1px" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", underline: true, style: { fontSize: '12px' } }, { children: colorsCopy }), void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), priceLoading ? jsxRuntime.jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(DiscountLabel, __assign$1({ style: { marginLeft: '5px' } }, { children: discountTag }), void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(RatingDisplay, {}, void 0)] }), void 0)] }), void 0));
|
|
21075
21302
|
};
|
|
21076
21303
|
|
|
21077
|
-
|
|
21078
|
-
|
|
21079
|
-
speed: 200,
|
|
21080
|
-
slidesToShow: 1,
|
|
21081
|
-
slidesToScroll: 1,
|
|
21082
|
-
initialSlide: 0,
|
|
21083
|
-
arrows: true,
|
|
21084
|
-
dots: false,
|
|
21085
|
-
};
|
|
21086
|
-
var THUMBNAIL_SETTINGS = {
|
|
21087
|
-
swipeToSlide: true,
|
|
21088
|
-
focusOnSelect: true,
|
|
21089
|
-
infinite: false,
|
|
21090
|
-
centerPadding: '16px',
|
|
21091
|
-
slidesToShow: 6,
|
|
21092
|
-
speed: 200,
|
|
21093
|
-
arrows: false,
|
|
21094
|
-
responsive: [
|
|
21095
|
-
{
|
|
21096
|
-
breakpoint: 320,
|
|
21097
|
-
settings: {
|
|
21098
|
-
slidesToShow: 3.5,
|
|
21099
|
-
},
|
|
21100
|
-
},
|
|
21101
|
-
{
|
|
21102
|
-
breakpoint: 375,
|
|
21103
|
-
settings: {
|
|
21104
|
-
slidesToShow: 4.5,
|
|
21105
|
-
},
|
|
21106
|
-
},
|
|
21107
|
-
{
|
|
21108
|
-
breakpoint: 410,
|
|
21109
|
-
settings: {
|
|
21110
|
-
slidesToShow: 5,
|
|
21111
|
-
},
|
|
21112
|
-
},
|
|
21113
|
-
{
|
|
21114
|
-
breakpoint: 480,
|
|
21115
|
-
settings: {
|
|
21116
|
-
slidesToShow: 5.5,
|
|
21117
|
-
},
|
|
21118
|
-
},
|
|
21119
|
-
],
|
|
21120
|
-
};
|
|
21121
|
-
|
|
21122
|
-
var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
21123
|
-
var SliderContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\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: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\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.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: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\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: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\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.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: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
21304
|
+
newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
21305
|
+
newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\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: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\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.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: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\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: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\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.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: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
21124
21306
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21125
21307
|
return borderRadiusVariant &&
|
|
21126
21308
|
"\n border-radius: 40px;\n ";
|
|
@@ -21128,26 +21310,26 @@ var SliderContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 =
|
|
|
21128
21310
|
var theme = _a.theme;
|
|
21129
21311
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
21130
21312
|
});
|
|
21131
|
-
|
|
21132
|
-
|
|
21133
|
-
|
|
21313
|
+
newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n position: absolute;\n left: 0px;\n top: 21px;\n"], ["\n position: absolute;\n left: 0px;\n top: 21px;\n"])));
|
|
21314
|
+
newStyled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21315
|
+
newStyled.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"], ["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"])), function (_a) {
|
|
21134
21316
|
var theme = _a.theme;
|
|
21135
21317
|
return theme.colors.shades.white.color;
|
|
21136
21318
|
});
|
|
21137
|
-
|
|
21138
|
-
|
|
21319
|
+
newStyled.button(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"])));
|
|
21320
|
+
newStyled(Slider$1)(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n\n .slick-track {\n display: flex;\n }\n"], ["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n\n .slick-track {\n display: flex;\n }\n"])), function (_a) {
|
|
21139
21321
|
var theme = _a.theme;
|
|
21140
21322
|
return theme.colors.pallete.primary.color;
|
|
21141
21323
|
});
|
|
21142
|
-
|
|
21324
|
+
newStyled(Image$3)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"], ["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
21143
21325
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
21144
21326
|
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
21145
21327
|
});
|
|
21146
|
-
|
|
21328
|
+
newStyled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (_a) {
|
|
21147
21329
|
var paddingRight = _a.paddingRight;
|
|
21148
21330
|
return paddingRight || '12px';
|
|
21149
21331
|
});
|
|
21150
|
-
|
|
21332
|
+
newStyled(Image$3)(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n object-fit: cover;\n width: ", ";\n aspect-ratio: ", ";\n border-radius: ", ";\n"], ["\n object-fit: cover;\n width: ", ";\n aspect-ratio: ", ";\n border-radius: ", ";\n"])), function (_a) {
|
|
21151
21333
|
var width = _a.width, theme = _a.theme;
|
|
21152
21334
|
return width || theme.component.gallery.thumbnail.mobile.width;
|
|
21153
21335
|
}, function (_a) {
|
|
@@ -21159,31 +21341,6 @@ var ThumbnailImage = newStyled(Image$3)(templateObject_10$2 || (templateObject_1
|
|
|
21159
21341
|
});
|
|
21160
21342
|
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2, templateObject_9$2, templateObject_10$2;
|
|
21161
21343
|
|
|
21162
|
-
var ProductGalleryMobileV4 = function (_a) {
|
|
21163
|
-
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings, _b = _a.isRatioSquare, isRatioSquare = _b === void 0 ? false : _b;
|
|
21164
|
-
var colors = useTheme$1().colors;
|
|
21165
|
-
var _c = React$2.useState(undefined), nav1 = _c[0], setNav1 = _c[1];
|
|
21166
|
-
var _d = React$2.useState(undefined), nav2 = _d[0], setNav2 = _d[1];
|
|
21167
|
-
var slick = React$2.useRef(null);
|
|
21168
|
-
var thumbnailRef = React$2.useRef(null);
|
|
21169
|
-
var sliderWrapper = React$2.useRef(null);
|
|
21170
|
-
var theme = useTheme$1();
|
|
21171
|
-
usePreventVerticalScroll(sliderWrapper);
|
|
21172
|
-
React$2.useEffect(function () {
|
|
21173
|
-
if (slick.current)
|
|
21174
|
-
setNav1(slick.current);
|
|
21175
|
-
if (thumbnailRef.current)
|
|
21176
|
-
setNav2(thumbnailRef.current);
|
|
21177
|
-
}, []);
|
|
21178
|
-
return (jsxRuntime.jsx(Container$2, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxRuntime.jsxs(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsxRuntime.jsx(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
|
|
21179
|
-
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
21180
|
-
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager", isRatioSquare: isRatioSquare }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
21181
|
-
}) }), void 0), jsxRuntime.jsx(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, (thumbnailSettings || THUMBNAIL_SETTINGS), { lazyLoad: "progressive" }, { children: images.map(function (_a) {
|
|
21182
|
-
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
21183
|
-
return (jsxRuntime.jsx(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsxRuntime.jsx(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig, { loading: "eager", isRatioSquare: isRatioSquare }), void 0) }), key));
|
|
21184
|
-
}) }), void 0)] }), void 0) }), void 0));
|
|
21185
|
-
};
|
|
21186
|
-
|
|
21187
21344
|
var ScrollContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 80vw;\n overflow-x: auto;\n }\n"], ["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 80vw;\n overflow-x: auto;\n }\n"])));
|
|
21188
21345
|
var TableElement = newStyled.table(templateObject_2$1 || (templateObject_2$1 = __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; });
|
|
21189
21346
|
var TableCell = newStyled.td(templateObject_3$1 || (templateObject_3$1 = __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; });
|
|
@@ -21463,7 +21620,7 @@ exports.ProductGallery = ProductGallery;
|
|
|
21463
21620
|
exports.ProductGalleryMobile = ProductGalleryMobile;
|
|
21464
21621
|
exports.ProductGalleryMobileV2 = ProductGalleryMobileV2;
|
|
21465
21622
|
exports.ProductGalleryMobileV3 = ProductGalleryMobileV3;
|
|
21466
|
-
exports.ProductGalleryMobileV4 =
|
|
21623
|
+
exports.ProductGalleryMobileV4 = MobileGallery;
|
|
21467
21624
|
exports.ProgressBar = ProgressBar;
|
|
21468
21625
|
exports.QuantityPicker = QuantityPicker;
|
|
21469
21626
|
exports.RadioGroupInput = RadioGroupInput;
|