@trafilea/afrodita-components 6.30.1 → 6.31.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +78 -53
- package/build/index.esm.js +795 -665
- package/build/index.esm.js.map +1 -1
- package/build/index.js +796 -664
- package/build/index.js.map +1 -1
- package/build/theme/shapermint.theme.js +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3207,7 +3207,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3207
3207
|
};
|
|
3208
3208
|
}
|
|
3209
3209
|
};
|
|
3210
|
-
var Container$
|
|
3210
|
+
var Container$1k = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __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$1j = newStyled.div(templateObject_1$2c || (templateObject_1$2c = _
|
|
|
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$1y || (templateObject_2$1y = __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$1w || (templateObject_2$1w = __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$1k, __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$2e, templateObject_2$1y;
|
|
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$1j = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __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$1i = newStyled.div(templateObject_1$2b || (templateObject_1$2b = _
|
|
|
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$1x || (templateObject_2$1x = __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$1v || (templateObject_2$1v = __makeTemp
|
|
|
3314
3314
|
var DiscountTag$2 = 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$1j, __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$2d, templateObject_2$1x;
|
|
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$1i = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3429
|
+
var Price = newStyled.p(templateObject_2$1w || (templateObject_2$1w = __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$1u || (templateObject_2$1u = __makeTemp
|
|
|
3450
3450
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3451
3451
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
3452
3452
|
});
|
|
3453
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3453
|
+
var TagContainer = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __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$1i, __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$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3485
3485
|
};
|
|
3486
|
-
var templateObject_1$
|
|
3486
|
+
var templateObject_1$2c, templateObject_2$1w, templateObject_3$1b;
|
|
3487
3487
|
|
|
3488
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3488
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __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$1i, __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, style: {
|
|
3542
3542
|
marginTop: '-5px',
|
|
3543
3543
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3544
3544
|
? finalPriceArray[0]
|
|
@@ -3556,11 +3556,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3556
3556
|
lineHeight: '22px',
|
|
3557
3557
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3558
3558
|
};
|
|
3559
|
-
var templateObject_1$
|
|
3559
|
+
var templateObject_1$2b;
|
|
3560
3560
|
|
|
3561
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3562
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3563
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3561
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3562
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3563
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3564
3564
|
var PriceLabelV3 = function (_a) {
|
|
3565
3565
|
var _b;
|
|
3566
3566
|
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"]);
|
|
@@ -3615,7 +3615,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3615
3615
|
return null;
|
|
3616
3616
|
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));
|
|
3617
3617
|
};
|
|
3618
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$
|
|
3618
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$1i, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$1i, { 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: {
|
|
3619
3619
|
marginTop: '-5px',
|
|
3620
3620
|
} }, 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: {
|
|
3621
3621
|
marginTop: '-6px',
|
|
@@ -3631,9 +3631,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3631
3631
|
lineHeight: '22px',
|
|
3632
3632
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3633
3633
|
};
|
|
3634
|
-
var templateObject_1$
|
|
3634
|
+
var templateObject_1$2a, templateObject_2$1v, templateObject_3$1a;
|
|
3635
3635
|
|
|
3636
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3636
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3637
3637
|
var PriceLabel = function (_a) {
|
|
3638
3638
|
var _b;
|
|
3639
3639
|
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"]);
|
|
@@ -3661,15 +3661,15 @@ var PriceLabel = function (_a) {
|
|
|
3661
3661
|
};
|
|
3662
3662
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3663
3663
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3664
|
-
return (jsxRuntime.jsxs(Container$
|
|
3664
|
+
return (jsxRuntime.jsxs(Container$1i, __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: {
|
|
3665
3665
|
marginTop: '-5px',
|
|
3666
3666
|
} }, 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: {
|
|
3667
3667
|
marginTop: '-6px',
|
|
3668
3668
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3669
3669
|
};
|
|
3670
|
-
var templateObject_1$
|
|
3670
|
+
var templateObject_1$29;
|
|
3671
3671
|
|
|
3672
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3672
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3673
3673
|
var PriceLabelV2 = function (_a) {
|
|
3674
3674
|
var _b;
|
|
3675
3675
|
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"]);
|
|
@@ -3700,22 +3700,22 @@ var PriceLabelV2 = function (_a) {
|
|
|
3700
3700
|
var finalPriceString = finalPriceArray[0]
|
|
3701
3701
|
? finalPriceArray[0]
|
|
3702
3702
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3703
|
-
return (jsxRuntime.jsxs(Container$
|
|
3703
|
+
return (jsxRuntime.jsxs(Container$1i, __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));
|
|
3704
3704
|
};
|
|
3705
|
-
var templateObject_1$
|
|
3705
|
+
var templateObject_1$28;
|
|
3706
3706
|
|
|
3707
|
-
var ContainerWrapper$
|
|
3708
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3709
|
-
var templateObject_1$
|
|
3707
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __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"])));
|
|
3708
|
+
var ImgWrapper = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __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"])));
|
|
3709
|
+
var templateObject_1$27, templateObject_2$1u;
|
|
3710
3710
|
|
|
3711
3711
|
function ClubPriceMemberLabel(_a) {
|
|
3712
3712
|
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
3713
|
var color = isClub ? '#882A2B' : '#292929';
|
|
3714
3714
|
var PriceComponent = isPDP ? (jsxRuntime.jsx(PriceLabelV2, { originalPrice: rest.originalPrice, finalPrice: rest.finalPrice, color: color, isClubOffer: isCollections }, void 0)) : (jsxRuntime.jsx(PriceLabel, __assign$1({}, rest, { color: color, isClubOffer: isCollections }), void 0));
|
|
3715
|
-
return (jsxRuntime.jsx("div", { children: isClub ? (jsxRuntime.jsxs(ContainerWrapper$
|
|
3715
|
+
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));
|
|
3716
3716
|
}
|
|
3717
3717
|
|
|
3718
|
-
var Container$
|
|
3718
|
+
var Container$1h = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __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) {
|
|
3719
3719
|
var height = _a.height;
|
|
3720
3720
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3721
3721
|
}, function (_a) {
|
|
@@ -3740,11 +3740,11 @@ var Container$1g = newStyled.div(templateObject_1$24 || (templateObject_1$24 = _
|
|
|
3740
3740
|
var SkeletonBox = function (_a) {
|
|
3741
3741
|
var width = _a.width, height = _a.height;
|
|
3742
3742
|
var theme = useTheme();
|
|
3743
|
-
return jsxRuntime.jsx(Container$
|
|
3743
|
+
return jsxRuntime.jsx(Container$1h, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3744
3744
|
};
|
|
3745
|
-
var templateObject_1$
|
|
3745
|
+
var templateObject_1$26;
|
|
3746
3746
|
|
|
3747
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3747
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$25 || (templateObject_1$25 = __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) {
|
|
3748
3748
|
var width = _a.width;
|
|
3749
3749
|
return width;
|
|
3750
3750
|
}, function (_a) {
|
|
@@ -3760,7 +3760,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$23 || (templateObject_1$23
|
|
|
3760
3760
|
var opacity = _a.opacity;
|
|
3761
3761
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3762
3762
|
});
|
|
3763
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3763
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1t || (templateObject_2$1t = __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) {
|
|
3764
3764
|
var width = _a.width;
|
|
3765
3765
|
return width;
|
|
3766
3766
|
}, function (_a) {
|
|
@@ -3773,7 +3773,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1r || (templateObject_2$
|
|
|
3773
3773
|
var opacity = _a.opacity;
|
|
3774
3774
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3775
3775
|
});
|
|
3776
|
-
var templateObject_1$
|
|
3776
|
+
var templateObject_1$25, templateObject_2$1t;
|
|
3777
3777
|
|
|
3778
3778
|
/* eslint-disable no-undef */
|
|
3779
3779
|
var cache = new Map();
|
|
@@ -3949,7 +3949,7 @@ var buildImageUrl = function (_a) {
|
|
|
3949
3949
|
}
|
|
3950
3950
|
};
|
|
3951
3951
|
|
|
3952
|
-
var Img = newStyled.img(templateObject_1$
|
|
3952
|
+
var Img = newStyled.img(templateObject_1$24 || (templateObject_1$24 = __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; });
|
|
3953
3953
|
var Image$3 = function (_a) {
|
|
3954
3954
|
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"]);
|
|
3955
3955
|
var config = useTheme().config;
|
|
@@ -3958,12 +3958,12 @@ var Image$3 = function (_a) {
|
|
|
3958
3958
|
: src;
|
|
3959
3959
|
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));
|
|
3960
3960
|
};
|
|
3961
|
-
var templateObject_1$
|
|
3961
|
+
var templateObject_1$24;
|
|
3962
3962
|
|
|
3963
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3964
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3965
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3966
|
-
var templateObject_1$
|
|
3963
|
+
var LabelWrapper = newStyled.label(templateObject_1$23 || (templateObject_1$23 = __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"])));
|
|
3964
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __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"])));
|
|
3965
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$19 || (templateObject_3$19 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])));
|
|
3966
|
+
var templateObject_1$23, templateObject_2$1s, templateObject_3$19;
|
|
3967
3967
|
|
|
3968
3968
|
var ToggleComponent = function (_a) {
|
|
3969
3969
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -4797,20 +4797,20 @@ function jsxs(type, props, key) {
|
|
|
4797
4797
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4798
4798
|
// `variants` styles that are consistent through all themes.
|
|
4799
4799
|
var TAGS = {
|
|
4800
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4801
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4802
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4803
|
-
display1: newStyled.h1(templateObject_4$
|
|
4804
|
-
display2: newStyled.h2(templateObject_5$
|
|
4805
|
-
display3: newStyled.h3(templateObject_6$
|
|
4806
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4807
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4808
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4809
|
-
heading4: newStyled.h4(templateObject_10$
|
|
4810
|
-
heading5: newStyled.h5(templateObject_11$
|
|
4811
|
-
heading6: newStyled.h6(templateObject_12$
|
|
4812
|
-
heading7: newStyled.h1(templateObject_13$
|
|
4813
|
-
heading8: newStyled.h1(templateObject_14$
|
|
4800
|
+
hero1: newStyled.h1(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject([""], [""]))),
|
|
4801
|
+
hero2: newStyled.h2(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject([""], [""]))),
|
|
4802
|
+
hero3: newStyled.h3(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject([""], [""]))),
|
|
4803
|
+
display1: newStyled.h1(templateObject_4$W || (templateObject_4$W = __makeTemplateObject([""], [""]))),
|
|
4804
|
+
display2: newStyled.h2(templateObject_5$H || (templateObject_5$H = __makeTemplateObject([""], [""]))),
|
|
4805
|
+
display3: newStyled.h3(templateObject_6$C || (templateObject_6$C = __makeTemplateObject([""], [""]))),
|
|
4806
|
+
heading1: newStyled.h1(templateObject_7$s || (templateObject_7$s = __makeTemplateObject([""], [""]))),
|
|
4807
|
+
heading2: newStyled.h2(templateObject_8$m || (templateObject_8$m = __makeTemplateObject([""], [""]))),
|
|
4808
|
+
heading3: newStyled.h3(templateObject_9$c || (templateObject_9$c = __makeTemplateObject([""], [""]))),
|
|
4809
|
+
heading4: newStyled.h4(templateObject_10$b || (templateObject_10$b = __makeTemplateObject([""], [""]))),
|
|
4810
|
+
heading5: newStyled.h5(templateObject_11$8 || (templateObject_11$8 = __makeTemplateObject([""], [""]))),
|
|
4811
|
+
heading6: newStyled.h6(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject([""], [""]))),
|
|
4812
|
+
heading7: newStyled.h1(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""]))),
|
|
4813
|
+
heading8: newStyled.h1(templateObject_14$3 || (templateObject_14$3 = __makeTemplateObject([""], [""]))),
|
|
4814
4814
|
body: newStyled.p(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([""], [""]))),
|
|
4815
4815
|
link: newStyled.a(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
|
|
4816
4816
|
button: newStyled.span(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
@@ -4933,17 +4933,17 @@ var DEFAULTS = {
|
|
|
4933
4933
|
size: 'regular',
|
|
4934
4934
|
},
|
|
4935
4935
|
};
|
|
4936
|
-
var templateObject_1$
|
|
4937
|
-
|
|
4938
|
-
var Container$
|
|
4939
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4940
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4941
|
-
var Label$
|
|
4942
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4943
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4936
|
+
var templateObject_1$22, templateObject_2$1r, templateObject_3$18, templateObject_4$W, templateObject_5$H, templateObject_6$C, templateObject_7$s, templateObject_8$m, templateObject_9$c, templateObject_10$b, 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;
|
|
4937
|
+
|
|
4938
|
+
var Container$1g = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __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"])));
|
|
4939
|
+
var Card$4 = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __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"])));
|
|
4940
|
+
var Tag$2 = newStyled.div(templateObject_3$17 || (templateObject_3$17 = __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"])));
|
|
4941
|
+
var Label$7 = newStyled.div(templateObject_4$V || (templateObject_4$V = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
4942
|
+
var Check$1 = newStyled.div(templateObject_5$G || (templateObject_5$G = __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"])));
|
|
4943
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$B || (templateObject_6$B = __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"])));
|
|
4944
4944
|
var PackSelectorV2 = function (_a) {
|
|
4945
4945
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4946
|
-
return (jsxRuntime.jsx(Container$
|
|
4946
|
+
return (jsxRuntime.jsx(Container$1g, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4947
4947
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4948
4948
|
}) }), void 0));
|
|
4949
4949
|
};
|
|
@@ -4957,7 +4957,7 @@ var PackCard$1 = function (_a) {
|
|
|
4957
4957
|
.then(function (icon) { return setIcon(icon); })
|
|
4958
4958
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4959
4959
|
}, [pack.meta.icon]);
|
|
4960
|
-
return (jsxRuntime.jsxs(Card$4, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$
|
|
4960
|
+
return (jsxRuntime.jsxs(Card$4, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$7, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsxRuntime.jsx(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(DiscountContainer$1, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
4961
4961
|
locale: 'en-US',
|
|
4962
4962
|
currency: currencyCode || 'USD',
|
|
4963
4963
|
}) }), void 0), pack.meta.quantity > 1 ? (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
@@ -4965,27 +4965,27 @@ var PackCard$1 = function (_a) {
|
|
|
4965
4965
|
currency: currencyCode || 'USD',
|
|
4966
4966
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4967
4967
|
};
|
|
4968
|
-
var templateObject_1$
|
|
4968
|
+
var templateObject_1$21, templateObject_2$1q, templateObject_3$17, templateObject_4$V, templateObject_5$G, templateObject_6$B;
|
|
4969
4969
|
|
|
4970
|
-
var Container$
|
|
4971
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4970
|
+
var Container$1f = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4971
|
+
var DropContainer = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4972
4972
|
var DropList = function (_a) {
|
|
4973
4973
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4974
|
-
return (jsxRuntime.jsx(Container$
|
|
4974
|
+
return (jsxRuntime.jsx(Container$1f, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4975
4975
|
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));
|
|
4976
4976
|
}) }, void 0));
|
|
4977
4977
|
};
|
|
4978
|
-
var templateObject_1$
|
|
4978
|
+
var templateObject_1$20, templateObject_2$1p;
|
|
4979
4979
|
|
|
4980
4980
|
var DROPS_TOTAL = 5;
|
|
4981
|
-
var Container$
|
|
4982
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4983
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4981
|
+
var Container$1e = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4982
|
+
var Title$b = newStyled.p(templateObject_2$1o || (templateObject_2$1o = __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"])));
|
|
4983
|
+
var Description$3 = newStyled.p(templateObject_3$16 || (templateObject_3$16 = __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"])));
|
|
4984
4984
|
var AbsorbencyLevel = function (_a) {
|
|
4985
4985
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4986
|
-
return (jsxRuntime.jsxs(Container$
|
|
4986
|
+
return (jsxRuntime.jsxs(Container$1e, { 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));
|
|
4987
4987
|
};
|
|
4988
|
-
var templateObject_1$
|
|
4988
|
+
var templateObject_1$1$, templateObject_2$1o, templateObject_3$16;
|
|
4989
4989
|
|
|
4990
4990
|
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(`
|
|
4991
4991
|
`),"","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(`
|
|
@@ -5061,7 +5061,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5061
5061
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5062
5062
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5063
5063
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5064
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5064
|
+
var StyledContent$1 = newStyled.button(templateObject_1$1_ || (templateObject_1$1_ = __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"])));
|
|
5065
5065
|
var Accordion$1 = function (_a) {
|
|
5066
5066
|
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;
|
|
5067
5067
|
var theme = useTheme();
|
|
@@ -5085,9 +5085,9 @@ var Accordion$1 = function (_a) {
|
|
|
5085
5085
|
} }, { 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));
|
|
5086
5086
|
} }), void 0));
|
|
5087
5087
|
};
|
|
5088
|
-
var templateObject_1$
|
|
5088
|
+
var templateObject_1$1_;
|
|
5089
5089
|
|
|
5090
|
-
var Container$
|
|
5090
|
+
var Container$1d = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5091
5091
|
var AccordionOptions = function (_a) {
|
|
5092
5092
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5093
5093
|
var _b = React$2.useState({
|
|
@@ -5100,7 +5100,7 @@ var AccordionOptions = function (_a) {
|
|
|
5100
5100
|
}
|
|
5101
5101
|
return false;
|
|
5102
5102
|
};
|
|
5103
|
-
return (jsxRuntime.jsx(Container$
|
|
5103
|
+
return (jsxRuntime.jsx(Container$1d, { children: accordions.map(function (accordion, index) {
|
|
5104
5104
|
var forceOpenValue = getForceOpen(index);
|
|
5105
5105
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5106
5106
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5111,7 +5111,7 @@ var AccordionOptions = function (_a) {
|
|
|
5111
5111
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5112
5112
|
}) }, void 0));
|
|
5113
5113
|
};
|
|
5114
|
-
var templateObject_1$
|
|
5114
|
+
var templateObject_1$1Z;
|
|
5115
5115
|
|
|
5116
5116
|
/**
|
|
5117
5117
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5247,27 +5247,27 @@ var isValidDate = function (value) {
|
|
|
5247
5247
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5248
5248
|
};
|
|
5249
5249
|
|
|
5250
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5251
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5252
|
-
var templateObject_1$
|
|
5250
|
+
var Bold = newStyled.span(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5251
|
+
var FlexContainer$3 = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __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"])));
|
|
5252
|
+
var templateObject_1$1Y, templateObject_2$1n;
|
|
5253
5253
|
|
|
5254
|
-
var Container$
|
|
5254
|
+
var Container$1c = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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) {
|
|
5255
5255
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5256
5256
|
return width;
|
|
5257
5257
|
}, function (_a) {
|
|
5258
5258
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5259
5259
|
return height;
|
|
5260
5260
|
});
|
|
5261
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5262
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5263
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5264
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5265
|
-
var templateObject_1$
|
|
5261
|
+
var FlexCentered = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __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"])));
|
|
5262
|
+
var LeftSide = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __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"])));
|
|
5263
|
+
var RightSide = newStyled.div(templateObject_4$U || (templateObject_4$U = __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"])));
|
|
5264
|
+
var FlexStart = newStyled.div(templateObject_5$F || (templateObject_5$F = __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"])));
|
|
5265
|
+
var templateObject_1$1X, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$F;
|
|
5266
5266
|
|
|
5267
5267
|
var CouponCard = function (_a) {
|
|
5268
5268
|
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;
|
|
5269
5269
|
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5270
|
-
return (jsxRuntime.jsxs(Container$
|
|
5270
|
+
return (jsxRuntime.jsxs(Container$1c, __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 () {
|
|
5271
5271
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5272
5272
|
setShowCoupon(function (prev) { return !prev; });
|
|
5273
5273
|
} }, 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: {
|
|
@@ -5318,14 +5318,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5318
5318
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5319
5319
|
};
|
|
5320
5320
|
|
|
5321
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5322
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5321
|
+
var ErrorText = newStyled.h3(templateObject_1$1W || (templateObject_1$1W = __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; });
|
|
5322
|
+
var ErrorContainer = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __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"])));
|
|
5323
5323
|
var Error$1 = function (_a) {
|
|
5324
5324
|
var error = _a.error;
|
|
5325
5325
|
var theme = useTheme();
|
|
5326
5326
|
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));
|
|
5327
5327
|
};
|
|
5328
|
-
var templateObject_1$
|
|
5328
|
+
var templateObject_1$1W, templateObject_2$1l;
|
|
5329
5329
|
|
|
5330
5330
|
var BaseSelectButton = function (_a) {
|
|
5331
5331
|
var children = _a.children, as = _a.as;
|
|
@@ -5342,7 +5342,7 @@ function BaseSelectOption(_a) {
|
|
|
5342
5342
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5343
5343
|
}
|
|
5344
5344
|
|
|
5345
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5345
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5346
5346
|
function BaseSelect(_a) {
|
|
5347
5347
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5348
5348
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5352,7 +5352,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5352
5352
|
Options: BaseSelectOptions,
|
|
5353
5353
|
Option: BaseSelectOption,
|
|
5354
5354
|
});
|
|
5355
|
-
var templateObject_1$
|
|
5355
|
+
var templateObject_1$1V;
|
|
5356
5356
|
|
|
5357
5357
|
var CustomButton = newStyled.button(function (_a) {
|
|
5358
5358
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5391,7 +5391,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5391
5391
|
});
|
|
5392
5392
|
});
|
|
5393
5393
|
// TODO Remove this when we find the real solution
|
|
5394
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5394
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5395
5395
|
var open = _a.open;
|
|
5396
5396
|
return open &&
|
|
5397
5397
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5411,7 +5411,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5411
5411
|
} }), void 0));
|
|
5412
5412
|
};
|
|
5413
5413
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5414
|
-
var templateObject_1$
|
|
5414
|
+
var templateObject_1$1U;
|
|
5415
5415
|
|
|
5416
5416
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5417
5417
|
var theme = _a.theme;
|
|
@@ -5489,7 +5489,7 @@ var StyledLabel$4 = newStyled.label(baseStyles, function (props) { return [
|
|
|
5489
5489
|
Styles[props.variant](props.theme),
|
|
5490
5490
|
Styles[props.size](props.theme),
|
|
5491
5491
|
]; });
|
|
5492
|
-
var Label$
|
|
5492
|
+
var Label$6 = function (_a) {
|
|
5493
5493
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
5494
5494
|
var theme = useTheme();
|
|
5495
5495
|
return (jsxRuntime.jsx(StyledLabel$4, __assign$1({}, rest, { theme: theme }, { children: children }), void 0));
|
|
@@ -5578,7 +5578,7 @@ var CustomCheckboxStyles = {
|
|
|
5578
5578
|
},
|
|
5579
5579
|
};
|
|
5580
5580
|
|
|
5581
|
-
var Container$
|
|
5581
|
+
var Container$1b = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __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"])));
|
|
5582
5582
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5583
5583
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5584
5584
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5589,7 +5589,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5589
5589
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5590
5590
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5591
5591
|
]; });
|
|
5592
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5592
|
+
var Input$5 = newStyled.input(templateObject_2$1k || (templateObject_2$1k = __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) {
|
|
5593
5593
|
var disabled = _a.disabled;
|
|
5594
5594
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5595
5595
|
});
|
|
@@ -5603,9 +5603,9 @@ var Checkbox = function (_a) {
|
|
|
5603
5603
|
}
|
|
5604
5604
|
onChange(e.target.checked);
|
|
5605
5605
|
};
|
|
5606
|
-
return (jsxRuntime.jsxs(Container$
|
|
5606
|
+
return (jsxRuntime.jsxs(Container$1b, { 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));
|
|
5607
5607
|
};
|
|
5608
|
-
var templateObject_1$
|
|
5608
|
+
var templateObject_1$1T, templateObject_2$1k;
|
|
5609
5609
|
|
|
5610
5610
|
var CustomOption = newStyled.li(function (_a) {
|
|
5611
5611
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5654,9 +5654,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5654
5654
|
Option: BaseDropdownOption,
|
|
5655
5655
|
});
|
|
5656
5656
|
|
|
5657
|
-
var Container$
|
|
5658
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5659
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5657
|
+
var Container$1a = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject([""], [""])));
|
|
5658
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1j || (templateObject_2$1j = __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"])));
|
|
5659
|
+
var SelectedOption = newStyled.span(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5660
5660
|
var fontWeight = _a.fontWeight;
|
|
5661
5661
|
return fontWeight || '';
|
|
5662
5662
|
});
|
|
@@ -5688,10 +5688,10 @@ function SimpleDropdown(_a) {
|
|
|
5688
5688
|
}
|
|
5689
5689
|
setSelectedValue(value);
|
|
5690
5690
|
}, [value, options, initialValue]);
|
|
5691
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5691
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1a : React$2.Fragment;
|
|
5692
5692
|
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));
|
|
5693
5693
|
}
|
|
5694
|
-
var templateObject_1$
|
|
5694
|
+
var templateObject_1$1S, templateObject_2$1j, templateObject_3$14;
|
|
5695
5695
|
|
|
5696
5696
|
/* base styles & size variants */
|
|
5697
5697
|
var CustomRadioStyles$2 = {
|
|
@@ -5756,9 +5756,9 @@ var ContainerStyles$2 = {
|
|
|
5756
5756
|
},
|
|
5757
5757
|
};
|
|
5758
5758
|
|
|
5759
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5760
|
-
var Container$
|
|
5761
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5759
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5760
|
+
var Container$19 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5761
|
+
var Input$4 = newStyled.input(templateObject_2$1i || (templateObject_2$1i = __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) {
|
|
5762
5762
|
var disabled = _a.disabled;
|
|
5763
5763
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5764
5764
|
});
|
|
@@ -5766,14 +5766,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5766
5766
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5767
5767
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5768
5768
|
]; });
|
|
5769
|
-
var StyledLabel$3 = newStyled(Label$
|
|
5769
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5770
5770
|
var theme = _a.theme;
|
|
5771
5771
|
return theme.component.radio.textSize;
|
|
5772
5772
|
}, function (_a) {
|
|
5773
5773
|
var theme = _a.theme;
|
|
5774
5774
|
return theme.component.radio.lineHeight;
|
|
5775
5775
|
});
|
|
5776
|
-
var StyledLabelV2 = newStyled(Label$
|
|
5776
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"])), function (_a) {
|
|
5777
5777
|
var theme = _a.theme;
|
|
5778
5778
|
return theme.component.radio.textSize;
|
|
5779
5779
|
}, function (_a) {
|
|
@@ -5787,9 +5787,9 @@ var RadioInput = function (_a) {
|
|
|
5787
5787
|
var value = event.currentTarget.value;
|
|
5788
5788
|
onChange({ value: value, label: label });
|
|
5789
5789
|
};
|
|
5790
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5790
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$19, __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.jsx(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: 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));
|
|
5791
5791
|
};
|
|
5792
|
-
var templateObject_1$
|
|
5792
|
+
var templateObject_1$1R, templateObject_2$1i, templateObject_3$13, templateObject_4$T;
|
|
5793
5793
|
|
|
5794
5794
|
var useOnClickOutside = function (ref, handler) {
|
|
5795
5795
|
React$2.useEffect(function () {
|
|
@@ -5882,7 +5882,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5882
5882
|
}
|
|
5883
5883
|
};
|
|
5884
5884
|
|
|
5885
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5885
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __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) {
|
|
5886
5886
|
var position = _a.position;
|
|
5887
5887
|
return getWrapperFlexDirection(position);
|
|
5888
5888
|
}, function (_a) {
|
|
@@ -5892,7 +5892,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __ma
|
|
|
5892
5892
|
var disableHover = _a.disableHover;
|
|
5893
5893
|
return (disableHover ? 0 : 1);
|
|
5894
5894
|
});
|
|
5895
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5895
|
+
var TooltipContainer = newStyled.div(templateObject_2$1h || (templateObject_2$1h = __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) {
|
|
5896
5896
|
var position = _a.position;
|
|
5897
5897
|
return getContainerFlexDirection(position);
|
|
5898
5898
|
}, function (_a) {
|
|
@@ -5920,14 +5920,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1f || (templateObject_2$1f
|
|
|
5920
5920
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5921
5921
|
return actual === expected ? margin : '0';
|
|
5922
5922
|
};
|
|
5923
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5923
|
+
var ContentWrapper = newStyled.div(templateObject_3$12 || (templateObject_3$12 = __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) {
|
|
5924
5924
|
var borderColor = _a.borderColor;
|
|
5925
5925
|
return borderColor;
|
|
5926
5926
|
}, function (_a) {
|
|
5927
5927
|
var backgroundColor = _a.backgroundColor;
|
|
5928
5928
|
return backgroundColor;
|
|
5929
5929
|
});
|
|
5930
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5930
|
+
var TooltipText = newStyled.div(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
|
|
5931
5931
|
var theme = _a.theme;
|
|
5932
5932
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5933
5933
|
}, function (_a) {
|
|
@@ -5937,17 +5937,17 @@ var TooltipText = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __ma
|
|
|
5937
5937
|
var color = _a.color;
|
|
5938
5938
|
return color;
|
|
5939
5939
|
});
|
|
5940
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5941
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
5940
|
+
var TopSection = newStyled.div(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
5941
|
+
var Title$a = newStyled.h1(templateObject_6$A || (templateObject_6$A = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5942
5942
|
var color = _a.color;
|
|
5943
5943
|
return color;
|
|
5944
5944
|
});
|
|
5945
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5946
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5945
|
+
var IconContainer$5 = newStyled.div(templateObject_7$r || (templateObject_7$r = __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"])));
|
|
5946
|
+
var CloseToolTip = newStyled.button(templateObject_8$l || (templateObject_8$l = __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) {
|
|
5947
5947
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5948
5948
|
return right;
|
|
5949
5949
|
});
|
|
5950
|
-
var templateObject_1$
|
|
5950
|
+
var templateObject_1$1Q, templateObject_2$1h, templateObject_3$12, templateObject_4$S, templateObject_5$E, templateObject_6$A, templateObject_7$r, templateObject_8$l;
|
|
5951
5951
|
|
|
5952
5952
|
var Tooltip = function (_a) {
|
|
5953
5953
|
var _b;
|
|
@@ -5990,8 +5990,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5990
5990
|
};
|
|
5991
5991
|
};
|
|
5992
5992
|
|
|
5993
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
5994
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5993
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5994
|
+
var ContainerBase$2 = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __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) {
|
|
5995
5995
|
var selected = _a.selected, theme = _a.theme;
|
|
5996
5996
|
return selected
|
|
5997
5997
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6005,30 +6005,30 @@ var ContainerBase$2 = newStyled.div(templateObject_2$1e || (templateObject_2$1e
|
|
|
6005
6005
|
var theme = _a.theme;
|
|
6006
6006
|
return theme.colors.pallete.primary.color;
|
|
6007
6007
|
});
|
|
6008
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3
|
|
6008
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3$11 || (templateObject_3$11 = __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) {
|
|
6009
6009
|
var onClick = _a.onClick;
|
|
6010
6010
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6011
6011
|
});
|
|
6012
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
6013
|
-
var SubscriptionHeader$2 = newStyled.div(templateObject_5$
|
|
6012
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6013
|
+
var SubscriptionHeader$2 = newStyled.div(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6014
6014
|
var theme = _a.theme;
|
|
6015
6015
|
return theme.colors.shades[200].color;
|
|
6016
6016
|
}, function (_a) {
|
|
6017
6017
|
var theme = _a.theme;
|
|
6018
6018
|
return theme.colors.pallete.primary.color;
|
|
6019
6019
|
});
|
|
6020
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_6$
|
|
6021
|
-
var Benefit$2 = newStyled.div(templateObject_7$
|
|
6022
|
-
var BenefitText$2 = newStyled(Text$7)(templateObject_8$
|
|
6023
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
6024
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
6025
|
-
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$
|
|
6026
|
-
var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$
|
|
6020
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6021
|
+
var Benefit$2 = newStyled.div(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
6022
|
+
var BenefitText$2 = newStyled(Text$7)(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6023
|
+
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
6024
|
+
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$a || (templateObject_10$a = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
6025
|
+
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$7 || (templateObject_11$7 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
6026
|
+
var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
6027
6027
|
var selected = _a.selected, theme = _a.theme;
|
|
6028
6028
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6029
6029
|
});
|
|
6030
|
-
var Container$
|
|
6031
|
-
var templateObject_1$
|
|
6030
|
+
var Container$18 = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6031
|
+
var templateObject_1$1P, templateObject_2$1g, templateObject_3$11, templateObject_4$R, templateObject_5$D, templateObject_6$z, templateObject_7$q, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6032
6032
|
|
|
6033
6033
|
var radioIds$2 = {
|
|
6034
6034
|
oneTime: {
|
|
@@ -6078,17 +6078,17 @@ var Autoship = function (_a) {
|
|
|
6078
6078
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6079
6079
|
};
|
|
6080
6080
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6081
|
-
return (jsxRuntime.jsxs(Container$
|
|
6081
|
+
return (jsxRuntime.jsxs(Container$18, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SinglePurchaseContainer$2, __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$2, { 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$2, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader$2, __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$2, { 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$2, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$2, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6082
6082
|
? benefitsColor.selected
|
|
6083
6083
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$2, __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$2, { 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$2, { 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));
|
|
6084
6084
|
};
|
|
6085
6085
|
|
|
6086
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
6086
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6087
6087
|
var theme = _a.theme;
|
|
6088
6088
|
return theme.name === 'TheSpaDr' &&
|
|
6089
6089
|
"\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 ";
|
|
6090
6090
|
});
|
|
6091
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6091
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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) {
|
|
6092
6092
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6093
6093
|
return isSelected
|
|
6094
6094
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6104,7 +6104,7 @@ var getSelectedBorder = function (_a) {
|
|
|
6104
6104
|
}
|
|
6105
6105
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6106
6106
|
};
|
|
6107
|
-
var ContainerBase$1 = newStyled.div(templateObject_3$
|
|
6107
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __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) {
|
|
6108
6108
|
var selected = _a.selected, theme = _a.theme;
|
|
6109
6109
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6110
6110
|
}, function (_a) {
|
|
@@ -6116,32 +6116,32 @@ var ContainerBase$1 = newStyled.div(templateObject_3$_ || (templateObject_3$_ =
|
|
|
6116
6116
|
var theme = _a.theme;
|
|
6117
6117
|
return theme.colors.pallete.primary.color;
|
|
6118
6118
|
});
|
|
6119
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
6119
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
6120
6120
|
var onClick = _a.onClick;
|
|
6121
6121
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6122
6122
|
});
|
|
6123
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
6124
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_6$
|
|
6123
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6124
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6125
6125
|
var theme = _a.theme;
|
|
6126
6126
|
return theme.colors.shades[200].color;
|
|
6127
6127
|
}, function (_a) {
|
|
6128
6128
|
var theme = _a.theme;
|
|
6129
6129
|
return theme.colors.pallete.primary.color;
|
|
6130
6130
|
});
|
|
6131
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_7$
|
|
6132
|
-
var Benefit$1 = newStyled.div(templateObject_8$
|
|
6133
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_9$
|
|
6134
|
-
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$
|
|
6135
|
-
var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_11$
|
|
6131
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6132
|
+
var Benefit$1 = newStyled.div(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6133
|
+
var BenefitText$1 = newStyled(Text$7)(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6134
|
+
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
6135
|
+
var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
6136
6136
|
var selected = _a.selected, theme = _a.theme;
|
|
6137
6137
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6138
6138
|
});
|
|
6139
|
-
var Container$
|
|
6140
|
-
var TooltipWrapper = newStyled.div(templateObject_13$
|
|
6139
|
+
var Container$17 = newStyled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6140
|
+
var TooltipWrapper = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6141
6141
|
var theme = _a.theme;
|
|
6142
6142
|
return theme.component.autoship.tooltip.margin;
|
|
6143
6143
|
});
|
|
6144
|
-
var templateObject_1$
|
|
6144
|
+
var templateObject_1$1O, templateObject_2$1f, templateObject_3$10, templateObject_4$Q, templateObject_5$C, templateObject_6$y, templateObject_7$p, templateObject_8$j, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6145
6145
|
|
|
6146
6146
|
var radioIds$1 = {
|
|
6147
6147
|
oneTime: {
|
|
@@ -6201,7 +6201,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6201
6201
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6202
6202
|
};
|
|
6203
6203
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6204
|
-
return (jsxRuntime.jsxs(Container$
|
|
6204
|
+
return (jsxRuntime.jsxs(Container$17, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$1, __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$1, __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$1, { children: [jsxRuntime.jsxs(FlexContainer$1, { 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, { 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$1, { 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$1, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$1, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
6205
6205
|
? benefitsColor.selected
|
|
6206
6206
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(FlexContainer$1, __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$1, __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$1, { 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));
|
|
6207
6207
|
};
|
|
@@ -6219,13 +6219,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6219
6219
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6220
6220
|
_a$2);
|
|
6221
6221
|
|
|
6222
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6223
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6224
|
-
var Name = newStyled.h4(templateObject_3
|
|
6225
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6226
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6227
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6228
|
-
var templateObject_1$
|
|
6222
|
+
var CustomerDetails = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject([""], [""])));
|
|
6223
|
+
var CustomerInfo = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __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"])));
|
|
6224
|
+
var Name = newStyled.h4(templateObject_3$$ || (templateObject_3$$ = __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"])));
|
|
6225
|
+
var StarIconContainer = newStyled.div(templateObject_4$P || (templateObject_4$P = __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"])));
|
|
6226
|
+
var Description$2 = newStyled.p(templateObject_5$B || (templateObject_5$B = __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"])));
|
|
6227
|
+
var ReviewDays = newStyled.span(templateObject_6$x || (templateObject_6$x = __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"])));
|
|
6228
|
+
var templateObject_1$1N, templateObject_2$1e, templateObject_3$$, templateObject_4$P, templateObject_5$B, templateObject_6$x;
|
|
6229
6229
|
|
|
6230
6230
|
var NameWithStars = function (_a) {
|
|
6231
6231
|
var name = _a.name, size = _a.size;
|
|
@@ -6243,10 +6243,10 @@ var ResultFeedback = function (_a) {
|
|
|
6243
6243
|
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));
|
|
6244
6244
|
};
|
|
6245
6245
|
|
|
6246
|
-
var Container$
|
|
6247
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6248
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6249
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6246
|
+
var Container$16 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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; });
|
|
6247
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
6248
|
+
var ImageCard = newStyled.div(templateObject_3$_ || (templateObject_3$_ = __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; });
|
|
6249
|
+
var UserInfoText = newStyled.div(templateObject_4$O || (templateObject_4$O = __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) {
|
|
6250
6250
|
var theme = _a.theme;
|
|
6251
6251
|
return theme.colors.pallete.secondary.color;
|
|
6252
6252
|
}, function (_a) {
|
|
@@ -6256,7 +6256,7 @@ var UserInfoText = newStyled.div(templateObject_4$M || (templateObject_4$M = __m
|
|
|
6256
6256
|
var theme = _a.theme, size = _a.size;
|
|
6257
6257
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6258
6258
|
});
|
|
6259
|
-
var templateObject_1$
|
|
6259
|
+
var templateObject_1$1M, templateObject_2$1d, templateObject_3$_, templateObject_4$O;
|
|
6260
6260
|
|
|
6261
6261
|
/* base styles & size variants */
|
|
6262
6262
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6331,10 +6331,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6331
6331
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6332
6332
|
var infoText = buildInfoText(name, age, months);
|
|
6333
6333
|
var Component = componentByVariant[variant];
|
|
6334
|
-
return (jsxRuntime.jsxs(Container$
|
|
6334
|
+
return (jsxRuntime.jsxs(Container$16, __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));
|
|
6335
6335
|
};
|
|
6336
6336
|
|
|
6337
|
-
var Section = newStyled.div(templateObject_1$
|
|
6337
|
+
var Section = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __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) {
|
|
6338
6338
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6339
6339
|
});
|
|
6340
6340
|
var CardHeader = function (_a) {
|
|
@@ -6345,16 +6345,16 @@ var CardFooter = function (_a) {
|
|
|
6345
6345
|
var children = _a.children;
|
|
6346
6346
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6347
6347
|
};
|
|
6348
|
-
var templateObject_1$
|
|
6348
|
+
var templateObject_1$1L;
|
|
6349
6349
|
|
|
6350
|
-
var Body = newStyled.div(templateObject_1$
|
|
6350
|
+
var Body = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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"])));
|
|
6351
6351
|
var CardBody$1 = function (_a) {
|
|
6352
6352
|
var children = _a.children;
|
|
6353
6353
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6354
6354
|
};
|
|
6355
|
-
var templateObject_1$
|
|
6355
|
+
var templateObject_1$1K;
|
|
6356
6356
|
|
|
6357
|
-
var Container$
|
|
6357
|
+
var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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) {
|
|
6358
6358
|
var flex = _a.flex;
|
|
6359
6359
|
return flex &&
|
|
6360
6360
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6369,23 +6369,23 @@ var Container$14 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
6369
6369
|
var Card$2 = function (_a) {
|
|
6370
6370
|
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;
|
|
6371
6371
|
var theme = useTheme();
|
|
6372
|
-
return (jsxRuntime.jsx(Container$
|
|
6372
|
+
return (jsxRuntime.jsx(Container$15, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6373
6373
|
};
|
|
6374
6374
|
var Card$3 = Object.assign(Card$2, {
|
|
6375
6375
|
Header: CardHeader,
|
|
6376
6376
|
Footer: CardFooter,
|
|
6377
6377
|
Body: CardBody$1,
|
|
6378
6378
|
});
|
|
6379
|
-
var templateObject_1$
|
|
6379
|
+
var templateObject_1$1J;
|
|
6380
6380
|
|
|
6381
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6382
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6383
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6381
|
+
var StyledWrapper = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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"])));
|
|
6382
|
+
var StyledContainer = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __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"])));
|
|
6383
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$Z || (templateObject_3$Z = __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) {
|
|
6384
6384
|
var color = _a.color;
|
|
6385
6385
|
return color;
|
|
6386
6386
|
});
|
|
6387
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6388
|
-
var templateObject_1$
|
|
6387
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
6388
|
+
var templateObject_1$1I, templateObject_2$1c, templateObject_3$Z, templateObject_4$N;
|
|
6389
6389
|
|
|
6390
6390
|
var Minimalistic = function (_a) {
|
|
6391
6391
|
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;
|
|
@@ -6393,28 +6393,28 @@ var Minimalistic = function (_a) {
|
|
|
6393
6393
|
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));
|
|
6394
6394
|
};
|
|
6395
6395
|
|
|
6396
|
-
var Container$
|
|
6397
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6398
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6399
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6396
|
+
var Container$14 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6397
|
+
var Title$9 = newStyled.h1(templateObject_2$1b || (templateObject_2$1b = __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; });
|
|
6398
|
+
var Details$1 = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __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; });
|
|
6399
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$M || (templateObject_4$M = __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"])));
|
|
6400
6400
|
var Simple = function (_a) {
|
|
6401
6401
|
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;
|
|
6402
6402
|
var theme = useTheme();
|
|
6403
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
6403
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$14, { 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));
|
|
6404
6404
|
};
|
|
6405
|
-
var templateObject_1$
|
|
6405
|
+
var templateObject_1$1H, templateObject_2$1b, templateObject_3$Y, templateObject_4$M;
|
|
6406
6406
|
|
|
6407
6407
|
var Bundle = {
|
|
6408
6408
|
Minimalistic: Minimalistic,
|
|
6409
6409
|
Simple: Simple,
|
|
6410
6410
|
};
|
|
6411
6411
|
|
|
6412
|
-
var Container$
|
|
6412
|
+
var Container$13 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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) {
|
|
6413
6413
|
var displayBNPL = _a.displayBNPL;
|
|
6414
6414
|
return (displayBNPL ? 'flex' : 'none');
|
|
6415
6415
|
});
|
|
6416
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6417
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6416
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
6417
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
6418
6418
|
var BuyNowPayLater = function (_a) {
|
|
6419
6419
|
var _b;
|
|
6420
6420
|
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;
|
|
@@ -6424,43 +6424,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
6424
6424
|
console.error('Icon', iconName, 'not found');
|
|
6425
6425
|
return null;
|
|
6426
6426
|
}
|
|
6427
|
-
return (jsxRuntime.jsx(Container$
|
|
6427
|
+
return (jsxRuntime.jsx(Container$13, __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));
|
|
6428
6428
|
};
|
|
6429
|
-
var templateObject_1$
|
|
6429
|
+
var templateObject_1$1G, templateObject_2$1a, templateObject_3$X;
|
|
6430
6430
|
|
|
6431
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6431
|
+
var Text$6 = newStyled.span(templateObject_1$1F || (templateObject_1$1F = __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; });
|
|
6432
6432
|
var Title$8 = function (_a) {
|
|
6433
6433
|
var title = _a.title;
|
|
6434
6434
|
var theme = useTheme();
|
|
6435
6435
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6436
6436
|
};
|
|
6437
|
-
var templateObject_1$
|
|
6437
|
+
var templateObject_1$1F;
|
|
6438
6438
|
|
|
6439
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6439
|
+
var P$3 = newStyled.p(templateObject_1$1E || (templateObject_1$1E = __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; });
|
|
6440
6440
|
var Promo = function (_a) {
|
|
6441
6441
|
var text = _a.text;
|
|
6442
6442
|
var theme = useTheme();
|
|
6443
6443
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6444
6444
|
};
|
|
6445
|
-
var templateObject_1$
|
|
6445
|
+
var templateObject_1$1E;
|
|
6446
6446
|
|
|
6447
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6447
|
+
var Text$5 = newStyled.span(templateObject_1$1D || (templateObject_1$1D = __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; });
|
|
6448
6448
|
var Description$1 = function (_a) {
|
|
6449
6449
|
var text = _a.text;
|
|
6450
6450
|
var theme = useTheme();
|
|
6451
6451
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6452
6452
|
};
|
|
6453
|
-
var templateObject_1$
|
|
6453
|
+
var templateObject_1$1D;
|
|
6454
6454
|
|
|
6455
|
-
var Container$
|
|
6455
|
+
var Container$12 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __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"); });
|
|
6456
6456
|
var CloseButton$1 = function (_a) {
|
|
6457
6457
|
var onClick = _a.onClick, size = _a.size;
|
|
6458
6458
|
var theme = useTheme();
|
|
6459
|
-
return (jsxRuntime.jsx(Container$
|
|
6459
|
+
return (jsxRuntime.jsx(Container$12, __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));
|
|
6460
6460
|
};
|
|
6461
|
-
var templateObject_1$
|
|
6461
|
+
var templateObject_1$1C;
|
|
6462
6462
|
|
|
6463
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6463
|
+
var Text$4 = newStyled.h3(templateObject_1$1B || (templateObject_1$1B = __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) {
|
|
6464
6464
|
var backgroundColor = _a.backgroundColor;
|
|
6465
6465
|
return backgroundColor;
|
|
6466
6466
|
}, function (_a) {
|
|
@@ -6475,7 +6475,7 @@ var OfferBanner = function (_a) {
|
|
|
6475
6475
|
var theme = useTheme();
|
|
6476
6476
|
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));
|
|
6477
6477
|
};
|
|
6478
|
-
var templateObject_1$
|
|
6478
|
+
var templateObject_1$1B;
|
|
6479
6479
|
|
|
6480
6480
|
var CartProductItem = {
|
|
6481
6481
|
Title: Title$8,
|
|
@@ -6485,20 +6485,20 @@ var CartProductItem = {
|
|
|
6485
6485
|
CloseButton: CloseButton$1,
|
|
6486
6486
|
};
|
|
6487
6487
|
|
|
6488
|
-
var Container$
|
|
6489
|
-
var MobileContainer = newStyled(Container$
|
|
6490
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6491
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6492
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6493
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6494
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6495
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6488
|
+
var Container$11 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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"])));
|
|
6489
|
+
var MobileContainer = newStyled(Container$11)(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6490
|
+
var DollarPart = newStyled.span(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
6491
|
+
var ClubMembersText = newStyled.span(templateObject_4$L || (templateObject_4$L = __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"])));
|
|
6492
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6493
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6494
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6495
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6496
6496
|
var ClubPriceLabel = function (_a) {
|
|
6497
6497
|
var clubPrice = _a.clubPrice;
|
|
6498
6498
|
var isMobile = useWindowDimensions().isMobile;
|
|
6499
|
-
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$
|
|
6499
|
+
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$11, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6500
6500
|
};
|
|
6501
|
-
var templateObject_1$
|
|
6501
|
+
var templateObject_1$1A, templateObject_2$19, templateObject_3$W, templateObject_4$L, templateObject_5$A, templateObject_6$w, templateObject_7$o, templateObject_8$i;
|
|
6502
6502
|
|
|
6503
6503
|
var Spacing = function (_a) {
|
|
6504
6504
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6506,10 +6506,10 @@ var Spacing = function (_a) {
|
|
|
6506
6506
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6507
6507
|
};
|
|
6508
6508
|
|
|
6509
|
-
var Container
|
|
6510
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6511
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6512
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6509
|
+
var Container$10 = newStyled('div')(templateObject_1$1z || (templateObject_1$1z = __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"])));
|
|
6510
|
+
var Content$2 = newStyled('div')(templateObject_2$18 || (templateObject_2$18 = __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"])));
|
|
6511
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$V || (templateObject_3$V = __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"])));
|
|
6512
|
+
var Bar$2 = newStyled('div')(templateObject_4$K || (templateObject_4$K = __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) {
|
|
6513
6513
|
var index = _a.index;
|
|
6514
6514
|
return "".concat(6 + 3 * index, "px");
|
|
6515
6515
|
}, function (_a) {
|
|
@@ -6518,15 +6518,15 @@ var Bar$2 = newStyled('div')(templateObject_4$I || (templateObject_4$I = __makeT
|
|
|
6518
6518
|
});
|
|
6519
6519
|
var StrengthBars = function (_a) {
|
|
6520
6520
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6521
|
-
return (jsxRuntime.jsxs(Container
|
|
6521
|
+
return (jsxRuntime.jsxs(Container$10, __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));
|
|
6522
6522
|
};
|
|
6523
|
-
var templateObject_1$
|
|
6523
|
+
var templateObject_1$1z, templateObject_2$18, templateObject_3$V, templateObject_4$K;
|
|
6524
6524
|
|
|
6525
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6526
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6527
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6528
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6529
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6525
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
6526
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$17 || (templateObject_2$17 = __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"])));
|
|
6527
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6528
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6529
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6530
6530
|
var RegularPriceTag = function () {
|
|
6531
6531
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6532
6532
|
};
|
|
@@ -6575,16 +6575,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6575
6575
|
: exports.ComponentSize.XSmall;
|
|
6576
6576
|
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));
|
|
6577
6577
|
};
|
|
6578
|
-
return (jsxRuntime.jsxs(Container$
|
|
6578
|
+
return (jsxRuntime.jsxs(Container$1i, __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]
|
|
6579
6579
|
? finalPriceArray[0]
|
|
6580
6580
|
: (_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$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6581
6581
|
};
|
|
6582
|
-
var templateObject_1$
|
|
6582
|
+
var templateObject_1$1y, templateObject_2$17, templateObject_3$U, templateObject_4$J, templateObject_5$z;
|
|
6583
6583
|
|
|
6584
|
-
var Container
|
|
6585
|
-
var templateObject_1$
|
|
6584
|
+
var Container$$ = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6585
|
+
var templateObject_1$1x;
|
|
6586
6586
|
|
|
6587
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6587
|
+
var StarContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6588
6588
|
var marginRight = _a.marginRight;
|
|
6589
6589
|
return marginRight;
|
|
6590
6590
|
});
|
|
@@ -6596,11 +6596,11 @@ var StarList = function (_a) {
|
|
|
6596
6596
|
width: theme.component.stars.element[size].width,
|
|
6597
6597
|
height: theme.component.stars.element[size].height,
|
|
6598
6598
|
};
|
|
6599
|
-
return (jsxRuntime.jsx(Container
|
|
6599
|
+
return (jsxRuntime.jsx(Container$$, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6600
6600
|
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)));
|
|
6601
6601
|
}) }, void 0));
|
|
6602
6602
|
};
|
|
6603
|
-
var templateObject_1$
|
|
6603
|
+
var templateObject_1$1w;
|
|
6604
6604
|
|
|
6605
6605
|
/* base styles & size variants */
|
|
6606
6606
|
var LabelStyles = {
|
|
@@ -6641,8 +6641,8 @@ var LabelStyles = {
|
|
|
6641
6641
|
});
|
|
6642
6642
|
},
|
|
6643
6643
|
};
|
|
6644
|
-
var Container$
|
|
6645
|
-
var templateObject_1$
|
|
6644
|
+
var Container$_ = newStyled.a(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
6645
|
+
var templateObject_1$1v;
|
|
6646
6646
|
|
|
6647
6647
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6648
6648
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6662,7 +6662,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6662
6662
|
}),
|
|
6663
6663
|
];
|
|
6664
6664
|
});
|
|
6665
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6665
|
+
var RatingLabel = newStyled.span(templateObject_1$1u || (templateObject_1$1u = __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; });
|
|
6666
6666
|
var starsNumber = 5;
|
|
6667
6667
|
var Rating = function (_a) {
|
|
6668
6668
|
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;
|
|
@@ -6683,9 +6683,9 @@ var Rating = function (_a) {
|
|
|
6683
6683
|
href: reviewsContainerId,
|
|
6684
6684
|
}
|
|
6685
6685
|
: {};
|
|
6686
|
-
return (jsxRuntime.jsxs(Container$
|
|
6686
|
+
return (jsxRuntime.jsxs(Container$_, __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: starsNumber, 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));
|
|
6687
6687
|
};
|
|
6688
|
-
var templateObject_1$
|
|
6688
|
+
var templateObject_1$1u;
|
|
6689
6689
|
|
|
6690
6690
|
var ImageContainer$6 = newStyled.div(function (_a) {
|
|
6691
6691
|
var width = _a.width, height = _a.height;
|
|
@@ -6695,10 +6695,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6695
6695
|
height: height,
|
|
6696
6696
|
});
|
|
6697
6697
|
});
|
|
6698
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6699
|
-
var Container$
|
|
6700
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6701
|
-
var Title$7 = newStyled.p(templateObject_4$
|
|
6698
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1t || (templateObject_1$1t = __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"])));
|
|
6699
|
+
var Container$Z = newStyled.a(templateObject_2$16 || (templateObject_2$16 = __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"])));
|
|
6700
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
6701
|
+
var Title$7 = newStyled.p(templateObject_4$I || (templateObject_4$I = __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; });
|
|
6702
6702
|
var getStylesBySize$c = function (size) {
|
|
6703
6703
|
switch (size) {
|
|
6704
6704
|
case exports.ComponentSize.Medium:
|
|
@@ -6724,17 +6724,17 @@ var getStylesBySize$c = function (size) {
|
|
|
6724
6724
|
};
|
|
6725
6725
|
}
|
|
6726
6726
|
};
|
|
6727
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
6727
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$y || (templateObject_5$y = __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) {
|
|
6728
6728
|
var style = _a.style;
|
|
6729
6729
|
return style.width;
|
|
6730
6730
|
});
|
|
6731
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_6$
|
|
6731
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_6$v || (templateObject_6$v = __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) {
|
|
6732
6732
|
var style = _a.style;
|
|
6733
6733
|
return style.width;
|
|
6734
6734
|
});
|
|
6735
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6736
|
-
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$
|
|
6737
|
-
var templateObject_1$
|
|
6735
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6736
|
+
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
6737
|
+
var templateObject_1$1t, templateObject_2$16, templateObject_3$T, templateObject_4$I, templateObject_5$y, templateObject_6$v, templateObject_7$n, templateObject_8$h;
|
|
6738
6738
|
|
|
6739
6739
|
var ProductItemMobile = function (_a) {
|
|
6740
6740
|
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 ? {
|
|
@@ -6796,7 +6796,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6796
6796
|
return jsx(Fragment, {}, void 0);
|
|
6797
6797
|
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));
|
|
6798
6798
|
};
|
|
6799
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6799
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Z, __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' }, 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' }, 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$Z, __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$2, __assign$1({}, discountTag, { size: exports.ComponentSize.Medium, style: {
|
|
6800
6800
|
letterSpacing: '-0.05rem',
|
|
6801
6801
|
} }), 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));
|
|
6802
6802
|
};
|
|
@@ -6809,10 +6809,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6809
6809
|
height: height,
|
|
6810
6810
|
});
|
|
6811
6811
|
});
|
|
6812
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6813
|
-
var Container$
|
|
6814
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6815
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
6812
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
6813
|
+
var Container$Y = newStyled.a(templateObject_2$15 || (templateObject_2$15 = __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"])));
|
|
6814
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$S || (templateObject_3$S = __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"])));
|
|
6815
|
+
var Title$6 = newStyled.p(templateObject_4$H || (templateObject_4$H = __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; });
|
|
6816
6816
|
var getStylesBySize$b = function (size) {
|
|
6817
6817
|
switch (size) {
|
|
6818
6818
|
case exports.ComponentSize.Medium:
|
|
@@ -6838,16 +6838,16 @@ var getStylesBySize$b = function (size) {
|
|
|
6838
6838
|
};
|
|
6839
6839
|
}
|
|
6840
6840
|
};
|
|
6841
|
-
var TopTagContainer$7 = newStyled.div(templateObject_5$
|
|
6841
|
+
var TopTagContainer$7 = newStyled.div(templateObject_5$x || (templateObject_5$x = __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) {
|
|
6842
6842
|
var style = _a.style;
|
|
6843
6843
|
return style.width;
|
|
6844
6844
|
});
|
|
6845
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6846
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_7$
|
|
6845
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$u || (templateObject_6$u = __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"])));
|
|
6846
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_7$m || (templateObject_7$m = __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) {
|
|
6847
6847
|
var style = _a.style;
|
|
6848
6848
|
return style.width;
|
|
6849
6849
|
});
|
|
6850
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
6850
|
+
var MarginTopContainer = newStyled.div(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6851
6851
|
var ProductItemTK = function (_a) {
|
|
6852
6852
|
var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
|
|
6853
6853
|
display: false,
|
|
@@ -6891,26 +6891,26 @@ var ProductItemTK = function (_a) {
|
|
|
6891
6891
|
: undefined }, void 0));
|
|
6892
6892
|
};
|
|
6893
6893
|
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)); };
|
|
6894
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6894
|
+
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Y, __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$2, { 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$Y, __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 ? (
|
|
6895
6895
|
// @ts-ignore
|
|
6896
6896
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6897
6897
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6898
6898
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6899
6899
|
} }, { 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));
|
|
6900
6900
|
};
|
|
6901
|
-
var templateObject_1$
|
|
6901
|
+
var templateObject_1$1s, templateObject_2$15, templateObject_3$S, templateObject_4$H, templateObject_5$x, templateObject_6$u, templateObject_7$m, templateObject_8$g;
|
|
6902
6902
|
|
|
6903
|
-
var Container$
|
|
6903
|
+
var Container$X = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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"])));
|
|
6904
6904
|
function withProductGrid(ProductItemComponent, data) {
|
|
6905
6905
|
function WithProductGrid(props) {
|
|
6906
|
-
return (jsxRuntime.jsx(Container$
|
|
6906
|
+
return (jsxRuntime.jsx(Container$X, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6907
6907
|
}
|
|
6908
6908
|
/* istanbul ignore next */
|
|
6909
6909
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6910
6910
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6911
6911
|
return WithProductGrid;
|
|
6912
6912
|
}
|
|
6913
|
-
var templateObject_1$
|
|
6913
|
+
var templateObject_1$1r;
|
|
6914
6914
|
|
|
6915
6915
|
var Collection = {
|
|
6916
6916
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6957,12 +6957,12 @@ var OutOfStock = function (_a) {
|
|
|
6957
6957
|
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));
|
|
6958
6958
|
};
|
|
6959
6959
|
|
|
6960
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6961
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6962
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6963
|
-
var Span = newStyled.span(templateObject_4$
|
|
6964
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6965
|
-
var Label$
|
|
6960
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6961
|
+
newStyled(lt.Label)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6962
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
6963
|
+
var Span = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6964
|
+
var OptionsContainer = newStyled.div(templateObject_5$w || (templateObject_5$w = __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"])));
|
|
6965
|
+
var Label$5 = function (_a) {
|
|
6966
6966
|
var label = _a.label, values = _a.values;
|
|
6967
6967
|
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
6968
6968
|
};
|
|
@@ -6975,27 +6975,27 @@ var ColorRadioGroup = function (_a) {
|
|
|
6975
6975
|
return (jsxRuntime.jsx(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6976
6976
|
};
|
|
6977
6977
|
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6978
|
-
Label: Label$
|
|
6978
|
+
Label: Label$5,
|
|
6979
6979
|
Option: Option,
|
|
6980
6980
|
OptionsContainer: OptionsContainer,
|
|
6981
6981
|
});
|
|
6982
|
-
var templateObject_1$
|
|
6982
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w;
|
|
6983
6983
|
|
|
6984
|
-
var Container$
|
|
6984
|
+
var Container$W = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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) {
|
|
6985
6985
|
var borderColor = _a.borderColor;
|
|
6986
6986
|
return borderColor;
|
|
6987
6987
|
}, function (_a) {
|
|
6988
6988
|
var noStock = _a.noStock;
|
|
6989
6989
|
return (noStock ? '0.4' : '1');
|
|
6990
6990
|
});
|
|
6991
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6991
|
+
var Image$2 = newStyled.img(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6992
6992
|
var PatternSelector = function (_a) {
|
|
6993
6993
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6994
6994
|
var theme = useTheme();
|
|
6995
6995
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6996
|
-
return (jsxRuntime.jsx(Container$
|
|
6996
|
+
return (jsxRuntime.jsx(Container$W, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6997
6997
|
};
|
|
6998
|
-
var templateObject_1$
|
|
6998
|
+
var templateObject_1$1p, templateObject_2$13;
|
|
6999
6999
|
|
|
7000
7000
|
var renderOptions$1 = function (selectedColor, options) {
|
|
7001
7001
|
if (options == null || options.length === 0) {
|
|
@@ -7058,26 +7058,26 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7058
7058
|
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;
|
|
7059
7059
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7060
7060
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7061
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7061
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1o || (templateObject_1$1o = __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 "])));
|
|
7062
7062
|
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(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(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));
|
|
7063
7063
|
};
|
|
7064
|
-
var templateObject_1$
|
|
7064
|
+
var templateObject_1$1o;
|
|
7065
7065
|
|
|
7066
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7067
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7068
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7066
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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'); });
|
|
7067
|
+
var Col$1 = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7068
|
+
var Row$2 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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) {
|
|
7069
7069
|
return props.rightToLeft &&
|
|
7070
7070
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7071
7071
|
});
|
|
7072
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7073
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
7074
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7072
|
+
var H5 = newStyled.h5(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7073
|
+
var H3$1 = newStyled.h3(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7074
|
+
var FreeShipping = newStyled.span(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7075
7075
|
var CrossSellCheckbox = function (_a) {
|
|
7076
7076
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7077
7077
|
var theme = useTheme();
|
|
7078
7078
|
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));
|
|
7079
7079
|
};
|
|
7080
|
-
var templateObject_1$
|
|
7080
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$Q, templateObject_4$F, templateObject_5$v, templateObject_6$t;
|
|
7081
7081
|
|
|
7082
7082
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7083
7083
|
__proto__: null,
|
|
@@ -7105,7 +7105,7 @@ var sizeMapper = (_a = {},
|
|
|
7105
7105
|
_a[exports.ComponentSize.Large] = 'large',
|
|
7106
7106
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7107
7107
|
_a);
|
|
7108
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7108
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
7109
7109
|
var wide = _a.wide;
|
|
7110
7110
|
return (wide ? '100%' : 'fit-content');
|
|
7111
7111
|
}, function (_a) {
|
|
@@ -7127,11 +7127,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1k || (templateObj
|
|
|
7127
7127
|
var theme = _a.theme;
|
|
7128
7128
|
return theme.colors.text.disabled;
|
|
7129
7129
|
});
|
|
7130
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2
|
|
7130
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7131
7131
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7132
7132
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7133
7133
|
});
|
|
7134
|
-
var templateObject_1$
|
|
7134
|
+
var templateObject_1$1m, templateObject_2$11;
|
|
7135
7135
|
|
|
7136
7136
|
var BaseCTA = function (_a) {
|
|
7137
7137
|
var _b, _c, _d;
|
|
@@ -7218,44 +7218,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7218
7218
|
} }), void 0));
|
|
7219
7219
|
};
|
|
7220
7220
|
|
|
7221
|
-
var Container$
|
|
7222
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7223
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7224
|
-
var Details = newStyled.span(templateObject_4$
|
|
7221
|
+
var Container$V = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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; });
|
|
7222
|
+
var IconContainer$4 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __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"])));
|
|
7223
|
+
var Text$3 = newStyled.p(templateObject_3$P || (templateObject_3$P = __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; });
|
|
7224
|
+
var Details = newStyled.span(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7225
7225
|
var Note = function (_a) {
|
|
7226
7226
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7227
7227
|
var theme = useTheme();
|
|
7228
|
-
return (jsxRuntime.jsxs(Container$
|
|
7228
|
+
return (jsxRuntime.jsxs(Container$V, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { 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));
|
|
7229
7229
|
};
|
|
7230
|
-
var templateObject_1$
|
|
7230
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$P, templateObject_4$E;
|
|
7231
7231
|
|
|
7232
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7232
|
+
var Title$5 = newStyled.h1(templateObject_1$1k || (templateObject_1$1k = __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) {
|
|
7233
7233
|
var theme = _a.theme;
|
|
7234
7234
|
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 ");
|
|
7235
7235
|
});
|
|
7236
|
-
var Line = newStyled.div(templateObject_2
|
|
7237
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7236
|
+
var Line = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __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; });
|
|
7237
|
+
var Row$1 = newStyled.div(templateObject_3$O || (templateObject_3$O = __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({
|
|
7238
7238
|
flexDirection: ['column', 'row'],
|
|
7239
7239
|
}));
|
|
7240
|
-
var Col = newStyled.div(templateObject_4$
|
|
7240
|
+
var Col = newStyled.div(templateObject_4$D || (templateObject_4$D = __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({
|
|
7241
7241
|
margin: ['0', '0 1.25rem'],
|
|
7242
7242
|
marginBottom: ['1.875rem', '0'],
|
|
7243
7243
|
alignItems: ['center', 'flex-start'],
|
|
7244
7244
|
textAlign: ['center', 'inherit'],
|
|
7245
7245
|
width: ['100%', 'inherit'],
|
|
7246
7246
|
}));
|
|
7247
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
7247
|
+
var IconContainer$3 = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7248
7248
|
marginRight: ['0', '0.438rem'],
|
|
7249
7249
|
marginBottom: ['10px', '0'],
|
|
7250
7250
|
width: ['auto', '1.5rem'],
|
|
7251
7251
|
}));
|
|
7252
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7252
|
+
var SectionTitle = newStyled.h1(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7253
7253
|
display: ['block', 'flex'],
|
|
7254
7254
|
}), function (_a) {
|
|
7255
7255
|
var theme = _a.theme;
|
|
7256
7256
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7257
7257
|
});
|
|
7258
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7258
|
+
var SectionDetails = newStyled.p(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7259
7259
|
var theme = _a.theme;
|
|
7260
7260
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7261
7261
|
}, function (_a) {
|
|
@@ -7266,22 +7266,22 @@ var SectionDetails = newStyled.p(templateObject_7$j || (templateObject_7$j = __m
|
|
|
7266
7266
|
})
|
|
7267
7267
|
: '';
|
|
7268
7268
|
});
|
|
7269
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
7269
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
7270
7270
|
var DeliveryDetails = function (_a) {
|
|
7271
7271
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7272
7272
|
var theme = useTheme();
|
|
7273
7273
|
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$3, __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$3, __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$3, __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));
|
|
7274
7274
|
};
|
|
7275
|
-
var templateObject_1$
|
|
7275
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$O, templateObject_4$D, templateObject_5$u, templateObject_6$s, templateObject_7$l, templateObject_8$f;
|
|
7276
7276
|
|
|
7277
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7277
|
+
var Backdrop = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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) {
|
|
7278
7278
|
var top = _a.top;
|
|
7279
7279
|
return top;
|
|
7280
7280
|
}, function (_a) {
|
|
7281
7281
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7282
7282
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7283
7283
|
});
|
|
7284
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7284
|
+
var Sidebar = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __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) {
|
|
7285
7285
|
var height = _a.height;
|
|
7286
7286
|
return height;
|
|
7287
7287
|
}, function (_a) {
|
|
@@ -7328,20 +7328,20 @@ var Drawer = function (_a) {
|
|
|
7328
7328
|
}, [isOpen, onClose, onOpen]);
|
|
7329
7329
|
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;
|
|
7330
7330
|
};
|
|
7331
|
-
var templateObject_1$
|
|
7331
|
+
var templateObject_1$1j, templateObject_2$_;
|
|
7332
7332
|
|
|
7333
7333
|
var TooltipArrow = function (_a) {
|
|
7334
7334
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7335
7335
|
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));
|
|
7336
7336
|
};
|
|
7337
7337
|
|
|
7338
|
-
var List = newStyled.ul(templateObject_1$
|
|
7339
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7340
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7341
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7342
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7343
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7344
|
-
var templateObject_1$
|
|
7338
|
+
var List = newStyled.ul(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7339
|
+
var Item$2 = newStyled.li(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
7340
|
+
var DropdownWrapper = newStyled.div(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
7341
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$C || (templateObject_4$C = __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"])));
|
|
7342
|
+
var StyledDropdown = newStyled.ul(templateObject_5$t || (templateObject_5$t = __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; });
|
|
7343
|
+
var DropdownItem = newStyled.li(templateObject_6$r || (templateObject_6$r = __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; });
|
|
7344
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$N, templateObject_4$C, templateObject_5$t, templateObject_6$r;
|
|
7345
7345
|
|
|
7346
7346
|
var DropdownListIcons = function (_a) {
|
|
7347
7347
|
var items = _a.items;
|
|
@@ -7354,13 +7354,13 @@ var Dropdown = function (_a) {
|
|
|
7354
7354
|
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));
|
|
7355
7355
|
};
|
|
7356
7356
|
|
|
7357
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7358
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7359
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7360
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7361
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7362
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7363
|
-
var templateObject_1$
|
|
7357
|
+
var DropdownContainer = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
7358
|
+
var DropdownLabel = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
7359
|
+
var SizeLabel = newStyled.span(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7360
|
+
var DetailLabel = newStyled.span(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
7361
|
+
var DropdownOptions = newStyled.div(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
7362
|
+
var DropdownOption = newStyled.div(templateObject_6$q || (templateObject_6$q = __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"])));
|
|
7363
|
+
var templateObject_1$1h, templateObject_2$Y, templateObject_3$M, templateObject_4$B, templateObject_5$s, templateObject_6$q;
|
|
7364
7364
|
|
|
7365
7365
|
var SizeDropdown = function (_a) {
|
|
7366
7366
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7383,10 +7383,10 @@ var SizeDropdown = function (_a) {
|
|
|
7383
7383
|
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));
|
|
7384
7384
|
};
|
|
7385
7385
|
|
|
7386
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7387
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7388
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7389
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7386
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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; });
|
|
7387
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$X || (templateObject_2$X = __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; });
|
|
7388
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
7389
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
7390
7390
|
var DropdownDialog = function (_a) {
|
|
7391
7391
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7392
7392
|
var theme = useTheme$1();
|
|
@@ -7395,7 +7395,7 @@ var DropdownDialog = function (_a) {
|
|
|
7395
7395
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7396
7396
|
}) }), void 0) }), void 0));
|
|
7397
7397
|
};
|
|
7398
|
-
var templateObject_1$
|
|
7398
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$A;
|
|
7399
7399
|
|
|
7400
7400
|
function FilteringDropdown(_a) {
|
|
7401
7401
|
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;
|
|
@@ -7428,29 +7428,29 @@ function FilteringDropdown(_a) {
|
|
|
7428
7428
|
}) }, void 0)] }), void 0));
|
|
7429
7429
|
}
|
|
7430
7430
|
|
|
7431
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7432
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7433
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7434
|
-
var Container$
|
|
7431
|
+
var Title$4 = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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; });
|
|
7432
|
+
var H3 = newStyled.h3(templateObject_2$W || (templateObject_2$W = __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; });
|
|
7433
|
+
var ArrowContainer = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7434
|
+
var Container$U = newStyled.div(templateObject_4$z || (templateObject_4$z = __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'); });
|
|
7435
7435
|
var Accordion = function (_a) {
|
|
7436
7436
|
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;
|
|
7437
7437
|
var theme = useTheme();
|
|
7438
7438
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7439
|
-
return (jsxRuntime.jsxs(Container$
|
|
7439
|
+
return (jsxRuntime.jsxs(Container$U, __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));
|
|
7440
7440
|
};
|
|
7441
|
-
var templateObject_1$
|
|
7442
|
-
|
|
7443
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7444
|
-
var Header$
|
|
7445
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7446
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7447
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7448
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7449
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7450
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
7451
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
7452
|
-
var MobileClearContainer = newStyled.div(templateObject_10$
|
|
7453
|
-
var templateObject_1$
|
|
7441
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$K, templateObject_4$z;
|
|
7442
|
+
|
|
7443
|
+
var SectionContent = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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; });
|
|
7444
|
+
var Header$2 = newStyled.div(templateObject_2$V || (templateObject_2$V = __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"])));
|
|
7445
|
+
var MobileHeader = newStyled.div(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
7446
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
7447
|
+
var H4 = newStyled.h4(templateObject_5$r || (templateObject_5$r = __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; });
|
|
7448
|
+
var FilterLink = newStyled.a(templateObject_6$p || (templateObject_6$p = __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; });
|
|
7449
|
+
var OptionContainer = newStyled.div(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
7450
|
+
var ClearAll = newStyled.span(templateObject_8$e || (templateObject_8$e = __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; });
|
|
7451
|
+
var MobileFooter = newStyled.div(templateObject_9$9 || (templateObject_9$9 = __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"])));
|
|
7452
|
+
var MobileClearContainer = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __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"])));
|
|
7453
|
+
var templateObject_1$1e, templateObject_2$V, templateObject_3$J, templateObject_4$y, templateObject_5$r, templateObject_6$p, templateObject_7$k, templateObject_8$e, templateObject_9$9, templateObject_10$8;
|
|
7454
7454
|
|
|
7455
7455
|
var getStylesBySize$a = function (size, theme) {
|
|
7456
7456
|
switch (size) {
|
|
@@ -7515,9 +7515,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7515
7515
|
} }), id: id }, void 0));
|
|
7516
7516
|
};
|
|
7517
7517
|
|
|
7518
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7519
|
-
var LI = newStyled.li(templateObject_2$
|
|
7520
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7518
|
+
var UL = newStyled.ul(templateObject_1$1d || (templateObject_1$1d = __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"])));
|
|
7519
|
+
var LI = newStyled.li(templateObject_2$U || (templateObject_2$U = __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; });
|
|
7520
|
+
var CloseIconContainer = newStyled.div(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
7521
7521
|
var Tags = function (_a) {
|
|
7522
7522
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7523
7523
|
var theme = useTheme();
|
|
@@ -7525,7 +7525,7 @@ var Tags = function (_a) {
|
|
|
7525
7525
|
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));
|
|
7526
7526
|
}) }), void 0));
|
|
7527
7527
|
};
|
|
7528
|
-
var templateObject_1$
|
|
7528
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I;
|
|
7529
7529
|
|
|
7530
7530
|
var Filters = function (_a) {
|
|
7531
7531
|
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;
|
|
@@ -7623,7 +7623,7 @@ var Filters = function (_a) {
|
|
|
7623
7623
|
}
|
|
7624
7624
|
return itemsSelectedNumberText;
|
|
7625
7625
|
};
|
|
7626
|
-
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$
|
|
7626
|
+
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$2, { 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) {
|
|
7627
7627
|
return item.label === '$75 And Above' ? '+$75' : item.label;
|
|
7628
7628
|
}), 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
|
|
7629
7629
|
.filter(function (filter) { return filter.isLinkOption; })
|
|
@@ -7661,8 +7661,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7661
7661
|
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));
|
|
7662
7662
|
};
|
|
7663
7663
|
|
|
7664
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7665
|
-
var Container$
|
|
7664
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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"])));
|
|
7665
|
+
var Container$T = newStyled.div(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
7666
7666
|
var FitGuarantee = function (_a) {
|
|
7667
7667
|
var _b;
|
|
7668
7668
|
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;
|
|
@@ -7673,17 +7673,17 @@ var FitGuarantee = function (_a) {
|
|
|
7673
7673
|
console.error('Icon', iconName, 'not found');
|
|
7674
7674
|
return null;
|
|
7675
7675
|
}
|
|
7676
|
-
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$
|
|
7676
|
+
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$T, __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$T, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7677
7677
|
margin: '0.1rem 0',
|
|
7678
7678
|
width: '100%',
|
|
7679
7679
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7680
7680
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7681
7681
|
} }, { 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));
|
|
7682
7682
|
};
|
|
7683
|
-
var templateObject_1$
|
|
7683
|
+
var templateObject_1$1c, templateObject_2$T;
|
|
7684
7684
|
|
|
7685
|
-
var Container$
|
|
7686
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7685
|
+
var Container$S = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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"])));
|
|
7686
|
+
var P$2 = newStyled.p(templateObject_2$S || (templateObject_2$S = __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; });
|
|
7687
7687
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7688
7688
|
border: 'none',
|
|
7689
7689
|
background: 'transparent',
|
|
@@ -7696,9 +7696,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7696
7696
|
var FitPredictor = function (_a) {
|
|
7697
7697
|
var onClick = _a.onClick;
|
|
7698
7698
|
var theme = useTheme();
|
|
7699
|
-
return (jsxs(Container$
|
|
7699
|
+
return (jsxs(Container$S, __assign$1({ theme: theme }, { children: [jsx(Container$S, { 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));
|
|
7700
7700
|
};
|
|
7701
|
-
var templateObject_1$
|
|
7701
|
+
var templateObject_1$1b, templateObject_2$S;
|
|
7702
7702
|
|
|
7703
7703
|
var Button$7 = newStyled.button(function () { return ({
|
|
7704
7704
|
background: 'transparent',
|
|
@@ -11942,14 +11942,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11942
11942
|
return Slider;
|
|
11943
11943
|
}(React__default["default"].Component);
|
|
11944
11944
|
|
|
11945
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11945
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
11946
11946
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11947
11947
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11948
11948
|
}, function (_a) {
|
|
11949
11949
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11950
11950
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11951
11951
|
});
|
|
11952
|
-
var templateObject_1$
|
|
11952
|
+
var templateObject_1$1a;
|
|
11953
11953
|
|
|
11954
11954
|
var getStylesBySize$9 = function (size) {
|
|
11955
11955
|
// rem units
|
|
@@ -12008,7 +12008,7 @@ var SliderNavigation = function (_a) {
|
|
|
12008
12008
|
} }, { 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));
|
|
12009
12009
|
};
|
|
12010
12010
|
|
|
12011
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12011
|
+
var Image$1 = newStyled.img(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
12012
12012
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12013
12013
|
return borderRadiusVariant &&
|
|
12014
12014
|
"\n border-radius: 20px;\n ";
|
|
@@ -12026,7 +12026,7 @@ var Image$1 = newStyled.img(templateObject_1$17 || (templateObject_1$17 = __make
|
|
|
12026
12026
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12027
12027
|
: 'inherit';
|
|
12028
12028
|
});
|
|
12029
|
-
var templateObject_1$
|
|
12029
|
+
var templateObject_1$19;
|
|
12030
12030
|
|
|
12031
12031
|
var ImageSmallPreview = function (_a) {
|
|
12032
12032
|
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;
|
|
@@ -12034,9 +12034,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12034
12034
|
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));
|
|
12035
12035
|
};
|
|
12036
12036
|
|
|
12037
|
-
var horizontalStyles = css(templateObject_1$
|
|
12038
|
-
var verticalStyles = css(templateObject_2$
|
|
12039
|
-
var Container$
|
|
12037
|
+
var horizontalStyles = css(templateObject_1$18 || (templateObject_1$18 = __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"])));
|
|
12038
|
+
var verticalStyles = css(templateObject_2$R || (templateObject_2$R = __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"])));
|
|
12039
|
+
var Container$R = newStyled.div(templateObject_3$H || (templateObject_3$H = __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) {
|
|
12040
12040
|
var position = _a.position;
|
|
12041
12041
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
12042
12042
|
}, function (_a) {
|
|
@@ -12044,12 +12044,12 @@ var Container$Q = newStyled.div(templateObject_3$F || (templateObject_3$F = __ma
|
|
|
12044
12044
|
return hasOverflowArrows &&
|
|
12045
12045
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12046
12046
|
});
|
|
12047
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
12048
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12049
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12050
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12051
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
12052
|
-
var templateObject_1$
|
|
12047
|
+
var Button$6 = newStyled.button(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
12048
|
+
var ArrowsContainer = newStyled.div(templateObject_5$q || (templateObject_5$q = __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"])));
|
|
12049
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
12050
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$j || (templateObject_7$j = __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"])));
|
|
12051
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$d || (templateObject_8$d = __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"])));
|
|
12052
|
+
var templateObject_1$18, templateObject_2$R, templateObject_3$H, templateObject_4$x, templateObject_5$q, templateObject_6$o, templateObject_7$j, templateObject_8$d;
|
|
12053
12053
|
|
|
12054
12054
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12055
12055
|
var loading = 'eager';
|
|
@@ -12077,7 +12077,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12077
12077
|
var element = document.querySelector(".imageListContainer");
|
|
12078
12078
|
element.scrollBy(0, 200);
|
|
12079
12079
|
};
|
|
12080
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
12080
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$R, __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: {
|
|
12081
12081
|
arrowWidth: 0.75,
|
|
12082
12082
|
arrowHeight: 1.25,
|
|
12083
12083
|
arrowPadding: 1.625,
|
|
@@ -12086,22 +12086,22 @@ var ImagePreviewList = function (_a) {
|
|
|
12086
12086
|
})) }), 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));
|
|
12087
12087
|
};
|
|
12088
12088
|
|
|
12089
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
12090
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
12091
|
-
var templateObject_1$
|
|
12089
|
+
var ProgressContainer = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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); });
|
|
12090
|
+
var ProgressFiller = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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; });
|
|
12091
|
+
var templateObject_1$17, templateObject_2$Q;
|
|
12092
12092
|
|
|
12093
12093
|
var ProgressBar$1 = function (_a) {
|
|
12094
12094
|
var progress = _a.progress, hide = _a.hide;
|
|
12095
12095
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12096
12096
|
};
|
|
12097
12097
|
|
|
12098
|
-
var Container$
|
|
12099
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
12100
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
12101
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
12102
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
12103
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
12104
|
-
var templateObject_1$
|
|
12098
|
+
var Container$Q = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
12099
|
+
var HTMLVideo = newStyled.video(templateObject_2$P || (templateObject_2$P = __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; });
|
|
12100
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
12101
|
+
var PlayContainer = newStyled.div(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
12102
|
+
var PauseContainer = newStyled.div(templateObject_5$p || (templateObject_5$p = __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"])));
|
|
12103
|
+
var MuteButton = newStyled.button(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
12104
|
+
var templateObject_1$16, templateObject_2$P, templateObject_3$G, templateObject_4$w, templateObject_5$p, templateObject_6$n;
|
|
12105
12105
|
|
|
12106
12106
|
var Video$1 = function (_a) {
|
|
12107
12107
|
var _b, _c, _d, _e;
|
|
@@ -12147,7 +12147,7 @@ var Video$1 = function (_a) {
|
|
|
12147
12147
|
setVideoProgress(videoRef.current.currentTime);
|
|
12148
12148
|
}
|
|
12149
12149
|
};
|
|
12150
|
-
return (jsxRuntime.jsxs(Container$
|
|
12150
|
+
return (jsxRuntime.jsxs(Container$Q, __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));
|
|
12151
12151
|
};
|
|
12152
12152
|
|
|
12153
12153
|
var propTypes = {exports: {}};
|
|
@@ -13741,39 +13741,39 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13741
13741
|
afterZoomOut: PropTypes.func
|
|
13742
13742
|
} : {};
|
|
13743
13743
|
|
|
13744
|
-
var Container$
|
|
13744
|
+
var Container$P = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
13745
13745
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13746
13746
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13747
13747
|
});
|
|
13748
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13748
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13749
13749
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13750
13750
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13751
13751
|
}, function (_a) {
|
|
13752
13752
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13753
13753
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13754
13754
|
});
|
|
13755
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13755
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13756
13756
|
var isCTAHidden = _a.isCTAHidden;
|
|
13757
13757
|
return (isCTAHidden ? '60px' : '120px');
|
|
13758
13758
|
});
|
|
13759
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13760
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13761
|
-
var ImageStyled = newStyled(Image$3)(templateObject_6$
|
|
13759
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
13760
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$o || (templateObject_5$o = __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"])));
|
|
13761
|
+
var ImageStyled = newStyled(Image$3)(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13762
13762
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13763
13763
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13764
13764
|
});
|
|
13765
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$
|
|
13765
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13766
13766
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13767
13767
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13768
13768
|
});
|
|
13769
|
-
var templateObject_1$
|
|
13769
|
+
var templateObject_1$15, templateObject_2$O, templateObject_3$F, templateObject_4$v, templateObject_5$o, templateObject_6$m, templateObject_7$i;
|
|
13770
13770
|
|
|
13771
13771
|
var ImageProductSlide$1 = function (_a) {
|
|
13772
13772
|
var _b;
|
|
13773
13773
|
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;
|
|
13774
13774
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13775
13775
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13776
|
-
return (jsxRuntime.jsxs(Container$
|
|
13776
|
+
return (jsxRuntime.jsxs(Container$P, __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: {
|
|
13777
13777
|
alt: content.alt,
|
|
13778
13778
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13779
13779
|
loading: 'eager',
|
|
@@ -13781,8 +13781,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13781
13781
|
}, 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$1, { 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));
|
|
13782
13782
|
};
|
|
13783
13783
|
|
|
13784
|
-
var Container$
|
|
13785
|
-
var templateObject_1$
|
|
13784
|
+
var Container$O = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
13785
|
+
var templateObject_1$14;
|
|
13786
13786
|
|
|
13787
13787
|
var getInitialIndex = function (images, selectedValue) {
|
|
13788
13788
|
if (selectedValue) {
|
|
@@ -13808,7 +13808,7 @@ var ProductGallery = function (_a) {
|
|
|
13808
13808
|
setActiveIndex(index);
|
|
13809
13809
|
};
|
|
13810
13810
|
var selectedImage = images[activeIndex];
|
|
13811
|
-
return (jsxRuntime.jsxs(Container$
|
|
13811
|
+
return (jsxRuntime.jsxs(Container$O, { 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));
|
|
13812
13812
|
};
|
|
13813
13813
|
|
|
13814
13814
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13830,7 +13830,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13830
13830
|
};
|
|
13831
13831
|
}
|
|
13832
13832
|
};
|
|
13833
|
-
var Container$
|
|
13833
|
+
var Container$N = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
13834
13834
|
var backgroundColor = _a.backgroundColor;
|
|
13835
13835
|
return backgroundColor;
|
|
13836
13836
|
}, function (_a) {
|
|
@@ -13858,11 +13858,11 @@ var Container$M = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __
|
|
|
13858
13858
|
var IconButton = function (_a) {
|
|
13859
13859
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13860
13860
|
var theme = useTheme();
|
|
13861
|
-
return (jsxRuntime.jsx(Container$
|
|
13861
|
+
return (jsxRuntime.jsx(Container$N, __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));
|
|
13862
13862
|
};
|
|
13863
|
-
var templateObject_1$
|
|
13863
|
+
var templateObject_1$13;
|
|
13864
13864
|
|
|
13865
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13865
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$12 || (templateObject_1$12 = __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; });
|
|
13866
13866
|
var AmazonButton = function (_a) {
|
|
13867
13867
|
var onClick = _a.onClick;
|
|
13868
13868
|
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));
|
|
@@ -13871,9 +13871,9 @@ var PaypalButton = function (_a) {
|
|
|
13871
13871
|
var onClick = _a.onClick;
|
|
13872
13872
|
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));
|
|
13873
13873
|
};
|
|
13874
|
-
var templateObject_1$
|
|
13874
|
+
var templateObject_1$12;
|
|
13875
13875
|
|
|
13876
|
-
var Container$
|
|
13876
|
+
var Container$M = newStyled.div(function (props) { return ({
|
|
13877
13877
|
height: 'auto',
|
|
13878
13878
|
textAlign: 'center',
|
|
13879
13879
|
justifyContent: 'center',
|
|
@@ -13923,12 +13923,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13923
13923
|
textAlign: 'center',
|
|
13924
13924
|
lineHeight: '18px',
|
|
13925
13925
|
};
|
|
13926
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
13926
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$M, __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));
|
|
13927
13927
|
};
|
|
13928
13928
|
|
|
13929
|
-
var Container$
|
|
13930
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13931
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13929
|
+
var Container$L = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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'); });
|
|
13930
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$N || (templateObject_2$N = __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'); });
|
|
13931
|
+
var StyledTitle = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13932
13932
|
var titlePosition = _a.titlePosition;
|
|
13933
13933
|
return titlePosition == 'center' &&
|
|
13934
13934
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13936,24 +13936,24 @@ var StyledTitle = newStyled.div(templateObject_3$C || (templateObject_3$C = __ma
|
|
|
13936
13936
|
var ImageCardWithDescription = function (_a) {
|
|
13937
13937
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13938
13938
|
var isMobile = useWindowDimensions().isMobile;
|
|
13939
|
-
return (jsxRuntime.jsxs(Container$
|
|
13939
|
+
return (jsxRuntime.jsxs(Container$L, __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));
|
|
13940
13940
|
};
|
|
13941
|
-
var templateObject_1
|
|
13941
|
+
var templateObject_1$11, templateObject_2$N, templateObject_3$E;
|
|
13942
13942
|
|
|
13943
|
-
var Label$
|
|
13943
|
+
var Label$4 = newStyled.span(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
13944
13944
|
var color = _a.color;
|
|
13945
13945
|
return color;
|
|
13946
13946
|
});
|
|
13947
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13947
|
+
var MandatoryIcon = newStyled.span(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13948
13948
|
var color = _a.color;
|
|
13949
13949
|
return color;
|
|
13950
13950
|
});
|
|
13951
13951
|
var InputLabel = function (_a) {
|
|
13952
13952
|
var label = _a.label, isDisabled = _a.isDisabled, isRequired = _a.isRequired;
|
|
13953
13953
|
var theme = useTheme();
|
|
13954
|
-
return (jsxRuntime.jsxs(Label$
|
|
13954
|
+
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));
|
|
13955
13955
|
};
|
|
13956
|
-
var templateObject_1$
|
|
13956
|
+
var templateObject_1$10, templateObject_2$M;
|
|
13957
13957
|
|
|
13958
13958
|
var containerByStatus = function (theme, status) {
|
|
13959
13959
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13962,12 +13962,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13962
13962
|
return theme.colors.semantic.urgent.color;
|
|
13963
13963
|
return '';
|
|
13964
13964
|
};
|
|
13965
|
-
var Container$
|
|
13965
|
+
var Container$K = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13966
13966
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13967
13967
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13968
13968
|
});
|
|
13969
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13970
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13969
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$L || (templateObject_2$L = __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"])));
|
|
13970
|
+
var StyledInput = newStyled.input(templateObject_3$D || (templateObject_3$D = __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) {
|
|
13971
13971
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13972
13972
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13973
13973
|
}, function (_a) {
|
|
@@ -14022,11 +14022,11 @@ var StyledInput = newStyled.input(templateObject_3$B || (templateObject_3$B = __
|
|
|
14022
14022
|
return hasValue &&
|
|
14023
14023
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14024
14024
|
});
|
|
14025
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14025
|
+
var InputWrapper = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14026
14026
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14027
14027
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14028
14028
|
});
|
|
14029
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14029
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
14030
14030
|
var theme = _a.theme;
|
|
14031
14031
|
return theme.component.input.placeholderColor;
|
|
14032
14032
|
}, function (_a) {
|
|
@@ -14039,8 +14039,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$l || (templateObject_5
|
|
|
14039
14039
|
var theme = _a.theme;
|
|
14040
14040
|
return theme.component.input.lineHeight;
|
|
14041
14041
|
});
|
|
14042
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14043
|
-
var templateObject_1
|
|
14042
|
+
var ClearInput = newStyled.div(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
14043
|
+
var templateObject_1$$, templateObject_2$L, templateObject_3$D, templateObject_4$u, templateObject_5$n, templateObject_6$l;
|
|
14044
14044
|
|
|
14045
14045
|
var BaseInput = function (_a) {
|
|
14046
14046
|
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"]);
|
|
@@ -14063,7 +14063,7 @@ var BaseInput = function (_a) {
|
|
|
14063
14063
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
14064
14064
|
}, [status]);
|
|
14065
14065
|
var hasValue = Boolean(value);
|
|
14066
|
-
return (jsxRuntime.jsxs(Container$
|
|
14066
|
+
return (jsxRuntime.jsxs(Container$K, __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) {
|
|
14067
14067
|
onChange(event.target.value, event);
|
|
14068
14068
|
}, 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 () {
|
|
14069
14069
|
onChange('', { target: { value: '' } });
|
|
@@ -14084,11 +14084,11 @@ var Button$5 = function (_a) {
|
|
|
14084
14084
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14085
14085
|
};
|
|
14086
14086
|
|
|
14087
|
-
var Container$
|
|
14087
|
+
var Container$J = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
14088
14088
|
var theme = _a.theme;
|
|
14089
14089
|
return theme.component.inputCustom.input.borderRadius;
|
|
14090
14090
|
});
|
|
14091
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14091
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$K || (templateObject_2$K = __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) {
|
|
14092
14092
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14093
14093
|
return defaultRounded
|
|
14094
14094
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14103,23 +14103,23 @@ var Custom = function (_a) {
|
|
|
14103
14103
|
text: text,
|
|
14104
14104
|
disabled: rest.disabled,
|
|
14105
14105
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14106
|
-
return (jsxRuntime.jsx(Container$
|
|
14106
|
+
return (jsxRuntime.jsx(Container$J, __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$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14107
14107
|
};
|
|
14108
|
-
var templateObject_1$
|
|
14108
|
+
var templateObject_1$_, templateObject_2$K;
|
|
14109
14109
|
|
|
14110
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14110
|
+
var SuccessContainer = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14111
14111
|
var size = _a.size;
|
|
14112
14112
|
return (size === 'small' ? '36px' : '');
|
|
14113
14113
|
});
|
|
14114
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14115
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14114
|
+
var SuccessMessage = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
14115
|
+
var SuccessText = newStyled.span(templateObject_3$C || (templateObject_3$C = __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"])));
|
|
14116
14116
|
var Success = function (_a) {
|
|
14117
14117
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14118
14118
|
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));
|
|
14119
14119
|
};
|
|
14120
|
-
var templateObject_1$
|
|
14120
|
+
var templateObject_1$Z, templateObject_2$J, templateObject_3$C;
|
|
14121
14121
|
|
|
14122
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14122
|
+
var ButtonContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
14123
14123
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14124
14124
|
return status === exports.InputValidationType.Empty &&
|
|
14125
14125
|
type === 'primary' &&
|
|
@@ -14136,16 +14136,16 @@ var BasePlusButton = function (_a) {
|
|
|
14136
14136
|
}
|
|
14137
14137
|
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));
|
|
14138
14138
|
};
|
|
14139
|
-
var templateObject_1$
|
|
14139
|
+
var templateObject_1$Y;
|
|
14140
14140
|
|
|
14141
|
-
var Container$
|
|
14142
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14141
|
+
var Container$I = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14142
|
+
var IconContainer$2 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
14143
14143
|
var BasePlusIcon = function (_a) {
|
|
14144
14144
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14145
14145
|
var theme = useTheme();
|
|
14146
|
-
return (jsxRuntime.jsx(Container$
|
|
14146
|
+
return (jsxRuntime.jsx(Container$I, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14147
14147
|
};
|
|
14148
|
-
var templateObject_1$
|
|
14148
|
+
var templateObject_1$X, templateObject_2$I;
|
|
14149
14149
|
|
|
14150
14150
|
var Input$3 = {
|
|
14151
14151
|
Simple: BaseInput,
|
|
@@ -14190,7 +14190,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14190
14190
|
}, [preventTouch, ref, touchStart]);
|
|
14191
14191
|
}
|
|
14192
14192
|
|
|
14193
|
-
var Container$
|
|
14193
|
+
var Container$H = newStyled.div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
14194
14194
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14195
14195
|
return borderRadiusVariant &&
|
|
14196
14196
|
"\n border-radius: 40px;\n ";
|
|
@@ -14199,11 +14199,11 @@ var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __ma
|
|
|
14199
14199
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14200
14200
|
});
|
|
14201
14201
|
// max-height: 31.875rem;
|
|
14202
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14203
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14204
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_4$
|
|
14205
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
14206
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
14202
|
+
var TopTagContainer$5 = newStyled.div(templateObject_2$H || (templateObject_2$H = __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'); });
|
|
14203
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14204
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14205
|
+
var NavButtonContainer$2 = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14206
|
+
var Button$4 = newStyled.button(templateObject_6$k || (templateObject_6$k = __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"])));
|
|
14207
14207
|
var settings$1 = {
|
|
14208
14208
|
dots: true,
|
|
14209
14209
|
infinite: false,
|
|
@@ -14260,7 +14260,7 @@ var ImageProductSlide = function (_a) {
|
|
|
14260
14260
|
}
|
|
14261
14261
|
}
|
|
14262
14262
|
}, [contents, selectedValue]);
|
|
14263
|
-
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$
|
|
14263
|
+
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$H, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
14264
14264
|
var _a;
|
|
14265
14265
|
var activeSlide = contents[e];
|
|
14266
14266
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14280,16 +14280,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14280
14280
|
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));
|
|
14281
14281
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14282
14282
|
};
|
|
14283
|
-
var templateObject_1$
|
|
14283
|
+
var templateObject_1$W, templateObject_2$H, templateObject_3$B, templateObject_4$t, templateObject_5$m, templateObject_6$k;
|
|
14284
14284
|
|
|
14285
|
-
var Container$
|
|
14285
|
+
var Container$G = newStyled.div(templateObject_1$V || (templateObject_1$V = __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"])));
|
|
14286
14286
|
var ProductGalleryMobile = function (_a) {
|
|
14287
14287
|
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;
|
|
14288
14288
|
var _e = React$2.useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
14289
14289
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14290
|
-
return (jsxRuntime.jsx(Container$
|
|
14290
|
+
return (jsxRuntime.jsx(Container$G, __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));
|
|
14291
14291
|
};
|
|
14292
|
-
var templateObject_1$
|
|
14292
|
+
var templateObject_1$V;
|
|
14293
14293
|
|
|
14294
14294
|
function _extends() {
|
|
14295
14295
|
_extends = Object.assign || function (target) {
|
|
@@ -14556,27 +14556,27 @@ function useSwipeable(options) {
|
|
|
14556
14556
|
return handlers;
|
|
14557
14557
|
}
|
|
14558
14558
|
|
|
14559
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14559
|
+
var Button$3 = newStyled.button(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
14560
14560
|
var ArrowButton = function (_a) {
|
|
14561
14561
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14562
14562
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14563
14563
|
};
|
|
14564
|
-
var templateObject_1$
|
|
14564
|
+
var templateObject_1$U;
|
|
14565
14565
|
|
|
14566
|
-
var Container$
|
|
14566
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __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"])));
|
|
14567
14567
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14568
14568
|
var SlideDots = function (_a) {
|
|
14569
14569
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14570
14570
|
var theme = useTheme();
|
|
14571
|
-
return (jsxRuntime.jsx(Container$
|
|
14571
|
+
return (jsxRuntime.jsx(Container$F, __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
|
|
14572
14572
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14573
14573
|
: 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));
|
|
14574
14574
|
};
|
|
14575
|
-
var templateObject_1$
|
|
14575
|
+
var templateObject_1$T;
|
|
14576
14576
|
|
|
14577
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14578
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14579
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14577
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$S || (templateObject_1$S = __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"])));
|
|
14578
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14579
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14580
14580
|
var SlideNavigation = function (_a) {
|
|
14581
14581
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14582
14582
|
var theme = useTheme();
|
|
@@ -14588,23 +14588,23 @@ var SlideNavigation = function (_a) {
|
|
|
14588
14588
|
onNavigate(selectedIndex + 1);
|
|
14589
14589
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14590
14590
|
};
|
|
14591
|
-
var templateObject_1$
|
|
14591
|
+
var templateObject_1$S, templateObject_2$G, templateObject_3$A;
|
|
14592
14592
|
|
|
14593
|
-
var Container$
|
|
14593
|
+
var Container$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __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) {
|
|
14594
14594
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14595
14595
|
return borderRadiusVariant &&
|
|
14596
14596
|
"\n border-radius: 40px;\n ";
|
|
14597
14597
|
});
|
|
14598
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14599
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14598
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$F || (templateObject_2$F = __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'); });
|
|
14599
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14600
14600
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14601
14601
|
var _b, _c;
|
|
14602
14602
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14603
|
-
return (jsxRuntime.jsxs(Container$
|
|
14603
|
+
return (jsxRuntime.jsxs(Container$E, __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));
|
|
14604
14604
|
});
|
|
14605
|
-
var templateObject_1$
|
|
14605
|
+
var templateObject_1$R, templateObject_2$F, templateObject_3$z;
|
|
14606
14606
|
|
|
14607
|
-
var Container$
|
|
14607
|
+
var Container$D = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
14608
14608
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14609
14609
|
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;
|
|
14610
14610
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14626,11 +14626,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14626
14626
|
React$2.useEffect(function () {
|
|
14627
14627
|
setSelectedImage(images[index]);
|
|
14628
14628
|
}, [index, images]);
|
|
14629
|
-
return (jsxRuntime.jsxs(Container$
|
|
14629
|
+
return (jsxRuntime.jsxs(Container$D, __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));
|
|
14630
14630
|
};
|
|
14631
|
-
var templateObject_1$
|
|
14631
|
+
var templateObject_1$Q;
|
|
14632
14632
|
|
|
14633
|
-
var Container$
|
|
14633
|
+
var Container$C = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
14634
14634
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14635
14635
|
return borderRadiusVariant &&
|
|
14636
14636
|
"\n border-radius: 40px;\n ";
|
|
@@ -14639,14 +14639,14 @@ var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __ma
|
|
|
14639
14639
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14640
14640
|
});
|
|
14641
14641
|
// max-height: 31.875rem;
|
|
14642
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14643
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14644
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14645
|
-
var Video = newStyled.div(templateObject_5$
|
|
14646
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14647
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14648
|
-
var NavButtonContainer$1 = newStyled.div(templateObject_8$
|
|
14649
|
-
var Button$2 = newStyled.button(templateObject_9$
|
|
14642
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$E || (templateObject_2$E = __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'); });
|
|
14643
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14644
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
14645
|
+
var Video = newStyled.div(templateObject_5$l || (templateObject_5$l = __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"])));
|
|
14646
|
+
var VideoTag = newStyled.div(templateObject_6$j || (templateObject_6$j = __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"])));
|
|
14647
|
+
var Text$2 = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14648
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14649
|
+
var Button$2 = newStyled.button(templateObject_9$8 || (templateObject_9$8 = __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"])));
|
|
14650
14650
|
var settings = {
|
|
14651
14651
|
dots: true,
|
|
14652
14652
|
infinite: false,
|
|
@@ -14691,7 +14691,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14691
14691
|
}
|
|
14692
14692
|
}
|
|
14693
14693
|
}, [images, selectedValue]);
|
|
14694
|
-
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$
|
|
14694
|
+
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$C, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
14695
14695
|
var _a;
|
|
14696
14696
|
var activeSlide = images[e];
|
|
14697
14697
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14704,14 +14704,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14704
14704
|
} }, 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));
|
|
14705
14705
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14706
14706
|
};
|
|
14707
|
-
var templateObject_1$
|
|
14707
|
+
var templateObject_1$P, templateObject_2$E, templateObject_3$y, templateObject_4$s, templateObject_5$l, templateObject_6$j, templateObject_7$h, templateObject_8$c, templateObject_9$8;
|
|
14708
14708
|
|
|
14709
|
-
var Container$
|
|
14709
|
+
var Container$B = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
14710
14710
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14711
14711
|
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;
|
|
14712
|
-
return (jsxRuntime.jsx(Container$
|
|
14712
|
+
return (jsxRuntime.jsx(Container$B, __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));
|
|
14713
14713
|
};
|
|
14714
|
-
var templateObject_1$
|
|
14714
|
+
var templateObject_1$O;
|
|
14715
14715
|
|
|
14716
14716
|
var __defProp$1 = Object.defineProperty;
|
|
14717
14717
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14844,21 +14844,21 @@ var Portal = function (_a) {
|
|
|
14844
14844
|
var visibleStyle = function (_a) {
|
|
14845
14845
|
var opened = _a.opened;
|
|
14846
14846
|
return opened
|
|
14847
|
-
? css(templateObject_1$
|
|
14847
|
+
? css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14848
14848
|
};
|
|
14849
14849
|
var transformStyle = function (_a) {
|
|
14850
14850
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14851
14851
|
return opened
|
|
14852
|
-
? css(templateObject_3$
|
|
14852
|
+
? css(templateObject_3$x || (templateObject_3$x = __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$r || (templateObject_4$r = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14853
14853
|
};
|
|
14854
|
-
var Container$
|
|
14854
|
+
var Container$A = newStyled.div(templateObject_6$i || (templateObject_6$i = __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) {
|
|
14855
14855
|
var width = _a.width;
|
|
14856
14856
|
return width
|
|
14857
|
-
? css(templateObject_5$
|
|
14857
|
+
? css(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14858
14858
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14859
14859
|
});
|
|
14860
14860
|
}, visibleStyle, transformStyle);
|
|
14861
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14861
|
+
var Overlay = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"])), visibleStyle);
|
|
14862
14862
|
var Modal = function (_a) {
|
|
14863
14863
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d;
|
|
14864
14864
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14868,7 +14868,7 @@ var Modal = function (_a) {
|
|
|
14868
14868
|
}
|
|
14869
14869
|
close();
|
|
14870
14870
|
};
|
|
14871
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14871
|
+
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 () {
|
|
14872
14872
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14873
14873
|
onDismiss();
|
|
14874
14874
|
} }, void 0)] }), void 0));
|
|
@@ -14899,9 +14899,9 @@ var useModal = function (id) {
|
|
|
14899
14899
|
close: close,
|
|
14900
14900
|
}); }, [close, open, opened]);
|
|
14901
14901
|
};
|
|
14902
|
-
var templateObject_1$
|
|
14902
|
+
var templateObject_1$N, templateObject_2$D, templateObject_3$x, templateObject_4$r, templateObject_5$k, templateObject_6$i, templateObject_7$g;
|
|
14903
14903
|
|
|
14904
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14904
|
+
var Bar$1 = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14905
14905
|
var height = _a.height;
|
|
14906
14906
|
return height || '0.5rem';
|
|
14907
14907
|
}, function (_a) {
|
|
@@ -14940,7 +14940,7 @@ var BarContainer = newStyled.div({
|
|
|
14940
14940
|
padding: '0 16px',
|
|
14941
14941
|
position: 'relative',
|
|
14942
14942
|
});
|
|
14943
|
-
var Container$
|
|
14943
|
+
var Container$z = newStyled.div(function (_a) {
|
|
14944
14944
|
var backgroundColor = _a.backgroundColor;
|
|
14945
14945
|
return ({
|
|
14946
14946
|
width: '475px',
|
|
@@ -14953,7 +14953,7 @@ var Container$y = newStyled.div(function (_a) {
|
|
|
14953
14953
|
background: backgroundColor,
|
|
14954
14954
|
});
|
|
14955
14955
|
});
|
|
14956
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
14956
|
+
var MessageContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
14957
14957
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
14958
14958
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
14959
14959
|
};
|
|
@@ -14979,21 +14979,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14979
14979
|
}
|
|
14980
14980
|
return (jsxRuntime.jsxs(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to get ", jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0));
|
|
14981
14981
|
};
|
|
14982
|
-
return (jsxRuntime.jsxs(Container$
|
|
14982
|
+
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));
|
|
14983
14983
|
};
|
|
14984
|
-
var templateObject_1$
|
|
14984
|
+
var templateObject_1$M, templateObject_2$C;
|
|
14985
14985
|
|
|
14986
|
-
var Container$
|
|
14986
|
+
var Container$y = newStyled.div(templateObject_1$L || (templateObject_1$L = __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) {
|
|
14987
14987
|
var theme = _a.theme;
|
|
14988
14988
|
return theme.component.orderBar.backgroundColor;
|
|
14989
14989
|
});
|
|
14990
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14990
|
+
var H1 = newStyled.h1(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
14991
14991
|
var OrderBar = function (_a) {
|
|
14992
14992
|
var message = _a.message, color = _a.color;
|
|
14993
14993
|
var theme = useTheme();
|
|
14994
|
-
return (jsxRuntime.jsxs(Container$
|
|
14994
|
+
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));
|
|
14995
14995
|
};
|
|
14996
|
-
var templateObject_1$
|
|
14996
|
+
var templateObject_1$L, templateObject_2$B;
|
|
14997
14997
|
|
|
14998
14998
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14999
14999
|
background: props.bgColor,
|
|
@@ -15017,15 +15017,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
15017
15017
|
justifyContent: 'center',
|
|
15018
15018
|
gap: '10px',
|
|
15019
15019
|
});
|
|
15020
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
15020
|
+
var StyledContent = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
15021
15021
|
var bgColor = _a.bgColor;
|
|
15022
15022
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
15023
15023
|
}, function (_a) {
|
|
15024
15024
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
15025
15025
|
return width;
|
|
15026
15026
|
});
|
|
15027
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
15028
|
-
var templateObject_1$
|
|
15027
|
+
var StyledController = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
15028
|
+
var templateObject_1$K, templateObject_2$A;
|
|
15029
15029
|
|
|
15030
15030
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
15031
15031
|
var background = _a.background, width = _a.width;
|
|
@@ -15066,6 +15066,97 @@ var BasicAccordion = function (_a) {
|
|
|
15066
15066
|
} }), void 0));
|
|
15067
15067
|
};
|
|
15068
15068
|
|
|
15069
|
+
var TableElement$3 = newStyled.table(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
15070
|
+
var TableCell$3 = newStyled.td(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
15071
|
+
var TableHead$3 = newStyled.th(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
15072
|
+
var Label$3 = newStyled('div')(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
15073
|
+
newStyled(Label$3)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
15074
|
+
newStyled(Label$3)(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
15075
|
+
var Container$x = newStyled('div')(templateObject_7$f || (templateObject_7$f = __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"])));
|
|
15076
|
+
newStyled('span')(templateObject_8$b || (templateObject_8$b = __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"])));
|
|
15077
|
+
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __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"])));
|
|
15078
|
+
var TableRow$3 = newStyled.tr(templateObject_10$7 || (templateObject_10$7 = __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"])));
|
|
15079
|
+
var Header$1 = newStyled('div')(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"], ["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"])));
|
|
15080
|
+
var Parent = newStyled('div')(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"])));
|
|
15081
|
+
var Arrow = newStyled('div')(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"])));
|
|
15082
|
+
var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
15083
|
+
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
15084
|
+
});
|
|
15085
|
+
var templateObject_1$J, templateObject_2$z, templateObject_3$w, templateObject_4$q, templateObject_5$j, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2;
|
|
15086
|
+
|
|
15087
|
+
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
15088
|
+
// TODO: Refactor this color logic
|
|
15089
|
+
var getCellColor$2 = function (index, cell, isLight) {
|
|
15090
|
+
if (index == 0) {
|
|
15091
|
+
return isLight ? '#fff6ef' : '#f6f0e7';
|
|
15092
|
+
}
|
|
15093
|
+
switch (cell) {
|
|
15094
|
+
case 'XS':
|
|
15095
|
+
return '#f5bab0';
|
|
15096
|
+
case 'S':
|
|
15097
|
+
return '#f7a08b';
|
|
15098
|
+
case 'M':
|
|
15099
|
+
return '#ffe1b8';
|
|
15100
|
+
case 'L':
|
|
15101
|
+
return '#f5bab0';
|
|
15102
|
+
case 'XL':
|
|
15103
|
+
return '#8bbeea';
|
|
15104
|
+
case '2XL':
|
|
15105
|
+
return '#b1d7c3';
|
|
15106
|
+
case '3XL':
|
|
15107
|
+
return '#e7a4f7';
|
|
15108
|
+
case '4XL':
|
|
15109
|
+
return '#e7c9b2';
|
|
15110
|
+
default:
|
|
15111
|
+
return '';
|
|
15112
|
+
}
|
|
15113
|
+
};
|
|
15114
|
+
|
|
15115
|
+
var SizeChartTableV3 = function (_a) {
|
|
15116
|
+
var _b, _c;
|
|
15117
|
+
var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
15118
|
+
var containerRef = React$2.useRef(null);
|
|
15119
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
15120
|
+
var _d = React$2.useState(false), isAtScrollEnd = _d[0], setIsAtScrollEnd = _d[1];
|
|
15121
|
+
var _e = (_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 = _e[0], yLabel = _e[1];
|
|
15122
|
+
var isMultilabel = xLabel && yLabel;
|
|
15123
|
+
var trimmedXLabel = trimLabel(xLabel);
|
|
15124
|
+
var trimmedYLabel = trimLabel(yLabel);
|
|
15125
|
+
React$2.useEffect(function () {
|
|
15126
|
+
var _a;
|
|
15127
|
+
var handleScroll = function () {
|
|
15128
|
+
var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
15129
|
+
var maxScroll = scrollWidth - clientWidth;
|
|
15130
|
+
var isAtEnd = scrollLeft >= maxScroll * 0.92;
|
|
15131
|
+
setIsAtScrollEnd(function (prevState) {
|
|
15132
|
+
if (isAtEnd !== prevState) {
|
|
15133
|
+
return isAtEnd;
|
|
15134
|
+
}
|
|
15135
|
+
return prevState;
|
|
15136
|
+
});
|
|
15137
|
+
};
|
|
15138
|
+
(_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll);
|
|
15139
|
+
return function () { var _a; return (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScroll); };
|
|
15140
|
+
}, []);
|
|
15141
|
+
// Generate unique ids for each cell
|
|
15142
|
+
var tableContentWithIds = tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, rowIndex) {
|
|
15143
|
+
return row === null || row === void 0 ? void 0 : row.map(function (cell, cellIndex) { return ({
|
|
15144
|
+
id: "".concat(rowIndex, "-").concat(cellIndex),
|
|
15145
|
+
value: cell,
|
|
15146
|
+
}); });
|
|
15147
|
+
});
|
|
15148
|
+
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: {
|
|
15149
|
+
backgroundColor: getCellColor$2(index, cell.value, true),
|
|
15150
|
+
} }, { 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));
|
|
15151
|
+
};
|
|
15152
|
+
var ArrowTip = function (_a) {
|
|
15153
|
+
var _b = _a.isRight, isRight = _b === void 0 ? true : _b;
|
|
15154
|
+
return (jsxRuntime.jsx(Arrow, __assign$1({ style: {
|
|
15155
|
+
left: isRight ? '85%' : '12%',
|
|
15156
|
+
} }, { children: isRight ? (jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: "white" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, { fill: "white" }, void 0)) }), void 0));
|
|
15157
|
+
};
|
|
15158
|
+
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]; };
|
|
15159
|
+
|
|
15069
15160
|
var htmlReactParser = {exports: {}};
|
|
15070
15161
|
|
|
15071
15162
|
var lib$2 = {};
|
|
@@ -18845,13 +18936,13 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18845
18936
|
HTMLReactParser$1.attributesToProps;
|
|
18846
18937
|
HTMLReactParser$1.Element;
|
|
18847
18938
|
|
|
18848
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18849
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18850
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18851
|
-
var Label$2 = newStyled.div(templateObject_4$
|
|
18852
|
-
var Check = newStyled.div(templateObject_5$
|
|
18853
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18854
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18939
|
+
var Container$w = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
18940
|
+
var Card$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
18941
|
+
var Tag$1 = newStyled.div(templateObject_3$v || (templateObject_3$v = __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"])));
|
|
18942
|
+
var Label$2 = newStyled.div(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
18943
|
+
var Check = 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"])));
|
|
18944
|
+
var IconContainer$1 = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18945
|
+
var IconPlaceholder = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18855
18946
|
var DiscountContainer = newStyled.div(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18856
18947
|
var PackSelector = function (_a) {
|
|
18857
18948
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -18882,14 +18973,14 @@ var PackCard = function (_a) {
|
|
|
18882
18973
|
currency: currencyCode || 'USD',
|
|
18883
18974
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18884
18975
|
};
|
|
18885
|
-
var templateObject_1$
|
|
18976
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$v, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$e, templateObject_8$a;
|
|
18886
18977
|
|
|
18887
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18888
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18889
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18978
|
+
var Container$v = newStyled.div(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
18979
|
+
var IconContainer = newStyled.div(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
18980
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18890
18981
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18891
18982
|
}));
|
|
18892
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18983
|
+
var PageNumber = newStyled.span(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
18893
18984
|
var bold = _a.bold;
|
|
18894
18985
|
return (bold ? '700' : '500');
|
|
18895
18986
|
}, function (_a) {
|
|
@@ -18906,7 +18997,7 @@ var PageNumber = newStyled.span(templateObject_4$n || (templateObject_4$n = __ma
|
|
|
18906
18997
|
var background = _a.background;
|
|
18907
18998
|
return background || 'unset';
|
|
18908
18999
|
});
|
|
18909
|
-
var templateObject_1$
|
|
19000
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$u, templateObject_4$o;
|
|
18910
19001
|
|
|
18911
19002
|
var Pagination = function (_a) {
|
|
18912
19003
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18971,7 +19062,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18971
19062
|
: 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));
|
|
18972
19063
|
};
|
|
18973
19064
|
|
|
18974
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
19065
|
+
var Container$u = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18975
19066
|
var width = _a.width;
|
|
18976
19067
|
return width;
|
|
18977
19068
|
}, function (_a) {
|
|
@@ -18989,12 +19080,12 @@ var PaymentMethod = function (_a) {
|
|
|
18989
19080
|
var theme = useTheme();
|
|
18990
19081
|
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));
|
|
18991
19082
|
};
|
|
18992
|
-
var templateObject_1$
|
|
19083
|
+
var templateObject_1$G;
|
|
18993
19084
|
|
|
18994
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
19085
|
+
var Container$t = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18995
19086
|
var IMAGE_WIDTH = '63px';
|
|
18996
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18997
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
19087
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$w || (templateObject_2$w = __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);
|
|
19088
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
18998
19089
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18999
19090
|
}), IMAGE_WIDTH);
|
|
19000
19091
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -19017,7 +19108,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
19017
19108
|
margin: margin,
|
|
19018
19109
|
});
|
|
19019
19110
|
});
|
|
19020
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
19111
|
+
var PriceContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
19021
19112
|
var withTag = _a.withTag; _a.theme;
|
|
19022
19113
|
return withTag
|
|
19023
19114
|
? mediaQueries({
|
|
@@ -19026,15 +19117,15 @@ var PriceContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = _
|
|
|
19026
19117
|
})
|
|
19027
19118
|
: 'justify-content: end';
|
|
19028
19119
|
});
|
|
19029
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
19030
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
19120
|
+
var Quantity = newStyled.div(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
19121
|
+
var StyledSpan = newStyled.span(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
19031
19122
|
var SimpleOrderItem = function (_a) {
|
|
19032
19123
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19033
19124
|
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;
|
|
19034
19125
|
var theme = useTheme();
|
|
19035
19126
|
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));
|
|
19036
19127
|
};
|
|
19037
|
-
var templateObject_1$
|
|
19128
|
+
var templateObject_1$F, templateObject_2$w, templateObject_3$t, templateObject_4$n, templateObject_5$h, templateObject_6$f;
|
|
19038
19129
|
|
|
19039
19130
|
var P$1 = newStyled.p(function (_a) {
|
|
19040
19131
|
var color = _a.color;
|
|
@@ -19048,7 +19139,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
19048
19139
|
margin: '0.938rem 4.188rem',
|
|
19049
19140
|
});
|
|
19050
19141
|
});
|
|
19051
|
-
var Bar = newStyled.div(templateObject_1$
|
|
19142
|
+
var Bar = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
19052
19143
|
var height = _a.height;
|
|
19053
19144
|
return height || '0.5rem';
|
|
19054
19145
|
}, function (_a) {
|
|
@@ -19093,12 +19184,12 @@ var ProgressBar = function (_a) {
|
|
|
19093
19184
|
var theme = useTheme();
|
|
19094
19185
|
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));
|
|
19095
19186
|
};
|
|
19096
|
-
var templateObject_1$
|
|
19187
|
+
var templateObject_1$E;
|
|
19097
19188
|
|
|
19098
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
19099
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19100
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19101
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19189
|
+
var Container$r = newStyled.div(templateObject_1$D || (templateObject_1$D = __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; });
|
|
19190
|
+
var Item$1 = newStyled.span(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
19191
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$s || (templateObject_3$s = __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"])));
|
|
19192
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$m || (templateObject_4$m = __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)'; });
|
|
19102
19193
|
var QuantityPicker = function (_a) {
|
|
19103
19194
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
19104
19195
|
var theme = useTheme();
|
|
@@ -19123,7 +19214,7 @@ var QuantityPicker = function (_a) {
|
|
|
19123
19214
|
}, [value, clamp]);
|
|
19124
19215
|
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));
|
|
19125
19216
|
};
|
|
19126
|
-
var templateObject_1$
|
|
19217
|
+
var templateObject_1$D, templateObject_2$v, templateObject_3$s, templateObject_4$m;
|
|
19127
19218
|
|
|
19128
19219
|
/* base styles & size variants */
|
|
19129
19220
|
var CustomRadioStyles$1 = {
|
|
@@ -19192,9 +19283,9 @@ var ContainerStyles$1 = {
|
|
|
19192
19283
|
},
|
|
19193
19284
|
};
|
|
19194
19285
|
|
|
19195
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19286
|
+
var Wrapper$3 = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19196
19287
|
var Container$q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19197
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19288
|
+
var Input$2 = newStyled.input(templateObject_2$u || (templateObject_2$u = __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) {
|
|
19198
19289
|
var disabled = _a.disabled;
|
|
19199
19290
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19200
19291
|
});
|
|
@@ -19202,7 +19293,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19202
19293
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19203
19294
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19204
19295
|
]; });
|
|
19205
|
-
var StyledLabel$1 = newStyled(Label$
|
|
19296
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
19206
19297
|
var RadioPrimary = function (_a) {
|
|
19207
19298
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d;
|
|
19208
19299
|
var theme = useTheme();
|
|
@@ -19212,7 +19303,7 @@ var RadioPrimary = function (_a) {
|
|
|
19212
19303
|
};
|
|
19213
19304
|
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));
|
|
19214
19305
|
};
|
|
19215
|
-
var templateObject_1$
|
|
19306
|
+
var templateObject_1$C, templateObject_2$u, templateObject_3$r;
|
|
19216
19307
|
|
|
19217
19308
|
var RadioGroupInput = function (_a) {
|
|
19218
19309
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19291,9 +19382,9 @@ var ContainerStyles = {
|
|
|
19291
19382
|
},
|
|
19292
19383
|
};
|
|
19293
19384
|
|
|
19294
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19385
|
+
var Wrapper$2 = newStyled.div(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
19295
19386
|
var Container$p = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19296
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19387
|
+
var Input$1 = newStyled.input(templateObject_2$t || (templateObject_2$t = __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) {
|
|
19297
19388
|
var disabled = _a.disabled;
|
|
19298
19389
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19299
19390
|
});
|
|
@@ -19301,7 +19392,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19301
19392
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19302
19393
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19303
19394
|
]; });
|
|
19304
|
-
var StyledLabel = newStyled(Label$
|
|
19395
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19305
19396
|
var theme = _a.theme;
|
|
19306
19397
|
return theme.component.radio.textSize;
|
|
19307
19398
|
}, function (_a) {
|
|
@@ -19317,7 +19408,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19317
19408
|
};
|
|
19318
19409
|
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));
|
|
19319
19410
|
};
|
|
19320
|
-
var templateObject_1$
|
|
19411
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$q;
|
|
19321
19412
|
|
|
19322
19413
|
var ClubRadioGroupInput = function (_a) {
|
|
19323
19414
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19345,17 +19436,17 @@ function formatDate(date, format) {
|
|
|
19345
19436
|
}
|
|
19346
19437
|
}
|
|
19347
19438
|
|
|
19348
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19349
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19350
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19351
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19352
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19353
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19354
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19439
|
+
var Container$o = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
19440
|
+
var Content$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
19441
|
+
var StarsContent = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19442
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
19443
|
+
var DateText$1 = newStyled.span(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
19444
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
19445
|
+
var VerifiedText = newStyled.h1(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
19355
19446
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
19356
19447
|
var ReviewDescription = newStyled.div(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
19357
19448
|
var ImageContainer$2 = newStyled.div(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
19358
|
-
var ImageWrapper$
|
|
19449
|
+
var ImageWrapper$3 = newStyled(Image$3)(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
19359
19450
|
var VideoWrapper = newStyled.video(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
19360
19451
|
var ProductContainer = newStyled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"], ["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"])));
|
|
19361
19452
|
var ProductTitle = newStyled.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"], ["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"])));
|
|
@@ -19384,26 +19475,26 @@ var Review$1 = function (_a) {
|
|
|
19384
19475
|
}
|
|
19385
19476
|
}, [opened]);
|
|
19386
19477
|
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 &&
|
|
19387
|
-
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$
|
|
19478
|
+
(!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));
|
|
19388
19479
|
};
|
|
19389
|
-
var templateObject_1$
|
|
19480
|
+
var templateObject_1$A, templateObject_2$s, templateObject_3$p, templateObject_4$l, templateObject_5$g, templateObject_6$e, templateObject_7$d, templateObject_8$9, templateObject_9$6, templateObject_10$6, 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;
|
|
19390
19481
|
|
|
19391
19482
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19392
19483
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19393
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
19394
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19395
|
-
var Content = newStyled.div(templateObject_3$
|
|
19396
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19397
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19398
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19399
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19484
|
+
var Container$n = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
19485
|
+
var Heading = newStyled.div(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
19486
|
+
var Content = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19487
|
+
var ReviewContainer = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19488
|
+
var DateText = newStyled.span(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19489
|
+
var VariantText = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19490
|
+
var ReviewerName = newStyled.h2(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
19400
19491
|
var ReviewTitle = newStyled.h3(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19401
19492
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
19402
19493
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
19403
19494
|
var ImagesContainer = newStyled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
19404
19495
|
var Images = newStyled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
19405
19496
|
var ImageSpace = newStyled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
19406
|
-
var ImageWrapper$
|
|
19497
|
+
var ImageWrapper$2 = newStyled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n & img {\n object-fit: cover;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"], ["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n & img {\n object-fit: cover;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"])));
|
|
19407
19498
|
var HelpfulContainerDesktop = newStyled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n margin-top: ", ";\n\n @media (max-width: 768px) {\n display: none;\n }\n"], ["\n display: flex;\n margin-top: ", ";\n\n @media (max-width: 768px) {\n display: none;\n }\n"])), function (_a) {
|
|
19408
19499
|
var showMoreDesktop = _a.showMoreDesktop;
|
|
19409
19500
|
return (showMoreDesktop ? '12px' : '50px');
|
|
@@ -19440,17 +19531,17 @@ var Review = function (_a) {
|
|
|
19440
19531
|
__html: showMoreDesktop
|
|
19441
19532
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19442
19533
|
: description,
|
|
19443
|
-
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$
|
|
19534
|
+
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19444
19535
|
};
|
|
19445
|
-
var templateObject_1$
|
|
19446
|
-
|
|
19447
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19448
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19449
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19450
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19451
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19452
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19453
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
19536
|
+
var templateObject_1$z, templateObject_2$r, templateObject_3$o, templateObject_4$k, templateObject_5$f, templateObject_6$d, templateObject_7$c, templateObject_8$8, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19537
|
+
|
|
19538
|
+
var Container$m = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
19539
|
+
var ReviewsContainer = newStyled.div(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
19540
|
+
var ReviewsCount = newStyled.div(templateObject_3$n || (templateObject_3$n = __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"])));
|
|
19541
|
+
var ReviewsStars = newStyled.div(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
19542
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
19543
|
+
var ReviewsImages = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
19544
|
+
var SummaryItem = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
19454
19545
|
var backgroundUrl = _a.backgroundUrl;
|
|
19455
19546
|
return "url(".concat(backgroundUrl, ")");
|
|
19456
19547
|
});
|
|
@@ -19460,17 +19551,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19460
19551
|
var theme = useTheme();
|
|
19461
19552
|
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));
|
|
19462
19553
|
};
|
|
19463
|
-
var templateObject_1$
|
|
19554
|
+
var templateObject_1$y, templateObject_2$q, templateObject_3$n, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$b;
|
|
19464
19555
|
|
|
19465
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19466
|
-
var Text = newStyled.p(templateObject_2$
|
|
19556
|
+
var Container$l = newStyled.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
19557
|
+
var Text = newStyled.p(templateObject_2$p || (templateObject_2$p = __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; });
|
|
19467
19558
|
var ScrollToTop = function (_a) {
|
|
19468
19559
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19469
19560
|
var theme = useTheme();
|
|
19470
19561
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19471
19562
|
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));
|
|
19472
19563
|
};
|
|
19473
|
-
var templateObject_1$
|
|
19564
|
+
var templateObject_1$x, templateObject_2$p;
|
|
19474
19565
|
|
|
19475
19566
|
var Input = newStyled.input(function (props) { return ({
|
|
19476
19567
|
padding: props.theme.component.input.padding,
|
|
@@ -19501,7 +19592,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19501
19592
|
},
|
|
19502
19593
|
}); });
|
|
19503
19594
|
|
|
19504
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19595
|
+
var Container$k = newStyled.div(templateObject_1$w || (templateObject_1$w = __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({
|
|
19505
19596
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19506
19597
|
}));
|
|
19507
19598
|
var Description = newStyled.div({
|
|
@@ -19520,7 +19611,7 @@ var ProductItem = function (_a) {
|
|
|
19520
19611
|
var theme = useTheme();
|
|
19521
19612
|
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));
|
|
19522
19613
|
};
|
|
19523
|
-
var templateObject_1$
|
|
19614
|
+
var templateObject_1$w;
|
|
19524
19615
|
|
|
19525
19616
|
var Container$j = newStyled.div({
|
|
19526
19617
|
display: 'flex',
|
|
@@ -19536,7 +19627,7 @@ var Ul = newStyled.ul({
|
|
|
19536
19627
|
margin: '0px',
|
|
19537
19628
|
padding: '0px',
|
|
19538
19629
|
});
|
|
19539
|
-
var Li = newStyled.li(templateObject_1$
|
|
19630
|
+
var Li = newStyled.li(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
19540
19631
|
padding: [0, '0rem 1rem'],
|
|
19541
19632
|
borderRadius: [0, '0.5rem'],
|
|
19542
19633
|
}));
|
|
@@ -19548,12 +19639,12 @@ var Anchor = newStyled.a({
|
|
|
19548
19639
|
padding: 0,
|
|
19549
19640
|
textDecoration: 'none',
|
|
19550
19641
|
});
|
|
19551
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19642
|
+
var Container$i = newStyled.div(templateObject_2$o || (templateObject_2$o = __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({
|
|
19552
19643
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19553
19644
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19554
19645
|
borderRadius: ['0', '0.5rem'],
|
|
19555
19646
|
}));
|
|
19556
|
-
var Header = newStyled.div(templateObject_3$
|
|
19647
|
+
var Header = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19557
19648
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19558
19649
|
}));
|
|
19559
19650
|
var ResultsPanel = function (_a) {
|
|
@@ -19561,9 +19652,9 @@ var ResultsPanel = function (_a) {
|
|
|
19561
19652
|
var theme = useTheme();
|
|
19562
19653
|
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));
|
|
19563
19654
|
};
|
|
19564
|
-
var templateObject_1$
|
|
19655
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$m;
|
|
19565
19656
|
|
|
19566
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19657
|
+
var Button$1 = newStyled.button(templateObject_1$u || (templateObject_1$u = __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({
|
|
19567
19658
|
right: ['1rem', '7.75rem'],
|
|
19568
19659
|
top: ['0.75rem', '0.75rem'],
|
|
19569
19660
|
}));
|
|
@@ -19572,7 +19663,7 @@ var ClearButton = function (_a) {
|
|
|
19572
19663
|
var theme = useTheme();
|
|
19573
19664
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19574
19665
|
};
|
|
19575
|
-
var templateObject_1$
|
|
19666
|
+
var templateObject_1$u;
|
|
19576
19667
|
|
|
19577
19668
|
var SearchIconContainer = newStyled.div({
|
|
19578
19669
|
display: 'flex',
|
|
@@ -19582,7 +19673,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19582
19673
|
background: 'white',
|
|
19583
19674
|
alignSelf: 'center',
|
|
19584
19675
|
});
|
|
19585
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19676
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19586
19677
|
var SearchControl = function (_a) {
|
|
19587
19678
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19588
19679
|
var theme = useTheme();
|
|
@@ -19598,7 +19689,7 @@ var SearchControl = function (_a) {
|
|
|
19598
19689
|
}
|
|
19599
19690
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19600
19691
|
};
|
|
19601
|
-
var templateObject_1$
|
|
19692
|
+
var templateObject_1$t;
|
|
19602
19693
|
|
|
19603
19694
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19604
19695
|
var reducer = function (state, action) {
|
|
@@ -19665,20 +19756,20 @@ var SearchBar = function (_a) {
|
|
|
19665
19756
|
} }, 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));
|
|
19666
19757
|
};
|
|
19667
19758
|
|
|
19668
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19669
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19670
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19671
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19672
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19759
|
+
var Container$g = newStyled.div(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
19760
|
+
var BackArrow = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19761
|
+
var BoldSpan = newStyled.span(templateObject_3$l || (templateObject_3$l = __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"])));
|
|
19762
|
+
var NormalSpan = newStyled.span(templateObject_4$i || (templateObject_4$i = __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"])));
|
|
19763
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$d || (templateObject_5$d = __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"])));
|
|
19673
19764
|
var SearchNavigation = function (_a) {
|
|
19674
19765
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19675
19766
|
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) {
|
|
19676
19767
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19677
19768
|
}) }, void 0)] }, void 0));
|
|
19678
19769
|
};
|
|
19679
|
-
var templateObject_1$
|
|
19770
|
+
var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$d;
|
|
19680
19771
|
|
|
19681
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19772
|
+
var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __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) {
|
|
19682
19773
|
var alignCenter = _a.alignCenter;
|
|
19683
19774
|
return alignCenter &&
|
|
19684
19775
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19688,26 +19779,26 @@ var Container$f = newStyled.div(templateObject_1$q || (templateObject_1$q = __ma
|
|
|
19688
19779
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19689
19780
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19690
19781
|
});
|
|
19691
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19692
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19782
|
+
var TitleText = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19783
|
+
var BannerText = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19693
19784
|
var ShortBanner = function (_a) {
|
|
19694
19785
|
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;
|
|
19695
19786
|
var theme = useTheme();
|
|
19696
19787
|
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));
|
|
19697
19788
|
};
|
|
19698
|
-
var templateObject_1$
|
|
19699
|
-
|
|
19700
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19701
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19702
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19703
|
-
var Label$1 = newStyled('div')(templateObject_4$
|
|
19704
|
-
var TopLabel$1 = newStyled(Label$1)(templateObject_5$
|
|
19705
|
-
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$
|
|
19706
|
-
var Container$e = newStyled('div')(templateObject_7$
|
|
19789
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$k;
|
|
19790
|
+
|
|
19791
|
+
var TableElement$2 = newStyled.table(templateObject_1$q || (templateObject_1$q = __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; });
|
|
19792
|
+
var TableCell$2 = newStyled.td(templateObject_2$l || (templateObject_2$l = __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; });
|
|
19793
|
+
var TableHead$2 = newStyled.th(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19794
|
+
var Label$1 = newStyled('div')(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
19795
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19796
|
+
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19797
|
+
var Container$e = newStyled('div')(templateObject_7$a || (templateObject_7$a = __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"])));
|
|
19707
19798
|
var LabelText$1 = newStyled('span')(templateObject_8$7 || (templateObject_8$7 = __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"])));
|
|
19708
19799
|
var Column$1 = newStyled('div')(templateObject_9$4 || (templateObject_9$4 = __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"])));
|
|
19709
19800
|
var TableRow$2 = newStyled.tr(templateObject_10$4 || (templateObject_10$4 = __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; });
|
|
19710
|
-
var templateObject_1$
|
|
19801
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$h, templateObject_5$c, templateObject_6$b, templateObject_7$a, templateObject_8$7, templateObject_9$4, templateObject_10$4;
|
|
19711
19802
|
|
|
19712
19803
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19713
19804
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19748,16 +19839,16 @@ var SizeChartTable = function (_a) {
|
|
|
19748
19839
|
}, 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));
|
|
19749
19840
|
};
|
|
19750
19841
|
|
|
19751
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19752
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19753
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19754
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
19842
|
+
var TableElement$1 = newStyled.table(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19843
|
+
var TableCell$1 = newStyled.td(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19844
|
+
var TableHead$1 = newStyled.th(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19845
|
+
var TableRow$1 = newStyled.tr(templateObject_4$g || (templateObject_4$g = __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; });
|
|
19755
19846
|
var SizeTable = function (_a) {
|
|
19756
19847
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19757
19848
|
var theme = useTheme();
|
|
19758
19849
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19759
19850
|
};
|
|
19760
|
-
var templateObject_1$
|
|
19851
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$g;
|
|
19761
19852
|
|
|
19762
19853
|
var getStylesBySize$7 = function (size) {
|
|
19763
19854
|
switch (size) {
|
|
@@ -19784,7 +19875,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19784
19875
|
} });
|
|
19785
19876
|
};
|
|
19786
19877
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19787
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19878
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19788
19879
|
};
|
|
19789
19880
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19790
19881
|
if (disabled)
|
|
@@ -19800,23 +19891,23 @@ var TextButton = function (_a) {
|
|
|
19800
19891
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19801
19892
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
19802
19893
|
};
|
|
19803
|
-
var templateObject_1$
|
|
19894
|
+
var templateObject_1$o;
|
|
19804
19895
|
|
|
19805
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19806
|
-
var P = newStyled.p(templateObject_2$
|
|
19807
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19896
|
+
var Container$d = newStyled.div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
19897
|
+
var P = newStyled.p(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19898
|
+
var PercentageSpan = newStyled.span(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
19808
19899
|
var SizeFitGuide = function (_a) {
|
|
19809
19900
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19810
19901
|
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));
|
|
19811
19902
|
};
|
|
19812
|
-
var templateObject_1$
|
|
19903
|
+
var templateObject_1$n, templateObject_2$j, templateObject_3$h;
|
|
19813
19904
|
|
|
19814
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19905
|
+
var ButtonsContainer = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19815
19906
|
var inline = _a.inline;
|
|
19816
19907
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19817
19908
|
});
|
|
19818
|
-
var Row = newStyled.div(templateObject_2$
|
|
19819
|
-
var templateObject_1$
|
|
19909
|
+
var Row = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19910
|
+
var templateObject_1$m, templateObject_2$i;
|
|
19820
19911
|
|
|
19821
19912
|
var SizeSelector = function (_a) {
|
|
19822
19913
|
var _b;
|
|
@@ -19838,7 +19929,7 @@ var SizeSelector = function (_a) {
|
|
|
19838
19929
|
}) }), void 0)] }), void 0));
|
|
19839
19930
|
};
|
|
19840
19931
|
|
|
19841
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19932
|
+
var TabContainer = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19842
19933
|
var titleSize = _a.titleSize;
|
|
19843
19934
|
return titleSize;
|
|
19844
19935
|
}, function (_a) {
|
|
@@ -19855,18 +19946,18 @@ var Tab = function (_a) {
|
|
|
19855
19946
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19856
19947
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19857
19948
|
};
|
|
19858
|
-
var templateObject_1$
|
|
19949
|
+
var templateObject_1$l;
|
|
19859
19950
|
|
|
19860
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19861
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19951
|
+
var Container$c = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19952
|
+
var TabList = newStyled.div(templateObject_2$h || (templateObject_2$h = __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) {
|
|
19862
19953
|
var backgroundColor = _a.backgroundColor;
|
|
19863
19954
|
return backgroundColor;
|
|
19864
19955
|
}, function (_a) {
|
|
19865
19956
|
var borderColor = _a.borderColor;
|
|
19866
19957
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19867
19958
|
});
|
|
19868
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19869
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19959
|
+
var TabContent = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19960
|
+
var TabSeparator = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19870
19961
|
var Tabs = function (_a) {
|
|
19871
19962
|
var _b;
|
|
19872
19963
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -19877,14 +19968,14 @@ var Tabs = function (_a) {
|
|
|
19877
19968
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19878
19969
|
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));
|
|
19879
19970
|
};
|
|
19880
|
-
var templateObject_1$
|
|
19971
|
+
var templateObject_1$k, templateObject_2$h, templateObject_3$g, templateObject_4$f;
|
|
19881
19972
|
|
|
19882
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19973
|
+
var Container$b = newStyled.div(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
19883
19974
|
var Tag = function (_a) {
|
|
19884
19975
|
var text = _a.text, className = _a.className;
|
|
19885
19976
|
return jsxRuntime.jsx(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19886
19977
|
};
|
|
19887
|
-
var templateObject_1$
|
|
19978
|
+
var templateObject_1$j;
|
|
19888
19979
|
|
|
19889
19980
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19890
19981
|
switch (size) {
|
|
@@ -19995,9 +20086,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19995
20086
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19996
20087
|
};
|
|
19997
20088
|
|
|
19998
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19999
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
20000
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
20089
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
20090
|
+
var VideoOverlay = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
20091
|
+
var FullscreenVideo = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
20001
20092
|
var ImageVideo = function (_a) {
|
|
20002
20093
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
20003
20094
|
var video = React$2.useRef(null);
|
|
@@ -20005,7 +20096,7 @@ var ImageVideo = function (_a) {
|
|
|
20005
20096
|
var handleOnClick = function () {
|
|
20006
20097
|
setOpened(true);
|
|
20007
20098
|
};
|
|
20008
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ImageWrapper, { children: [jsxRuntime.jsx(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxRuntime.jsxs(VideoOverlay, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsxRuntime.jsx(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxRuntime.jsxs(FullscreenVideo, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", style: {
|
|
20099
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ImageWrapper$1, { children: [jsxRuntime.jsx(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxRuntime.jsxs(VideoOverlay, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsxRuntime.jsx(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxRuntime.jsxs(FullscreenVideo, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", style: {
|
|
20009
20100
|
position: 'absolute',
|
|
20010
20101
|
top: '10px',
|
|
20011
20102
|
right: '10px',
|
|
@@ -20017,12 +20108,12 @@ var ImageVideo = function (_a) {
|
|
|
20017
20108
|
height: '100%',
|
|
20018
20109
|
} }, void 0)] }, void 0))] }, void 0));
|
|
20019
20110
|
};
|
|
20020
|
-
var templateObject_1$
|
|
20111
|
+
var templateObject_1$i, templateObject_2$g, templateObject_3$f;
|
|
20021
20112
|
|
|
20022
|
-
var ContainerDesktop = css(templateObject_1$
|
|
20023
|
-
var ContainerMobile = css(templateObject_2$
|
|
20024
|
-
var Container$a = newStyled.div(templateObject_3$
|
|
20025
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
20113
|
+
var ContainerDesktop = css(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
20114
|
+
var ContainerMobile = css(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
20115
|
+
var Container$a = newStyled.div(templateObject_3$e || (templateObject_3$e = __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);
|
|
20116
|
+
var TextContainer = newStyled.div(templateObject_4$e || (templateObject_4$e = __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"])));
|
|
20026
20117
|
var TextWithImage = function (_a) {
|
|
20027
20118
|
var _b, _c, _d, _e;
|
|
20028
20119
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -20052,25 +20143,25 @@ var TextWithImage = function (_a) {
|
|
|
20052
20143
|
},
|
|
20053
20144
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
20054
20145
|
};
|
|
20055
|
-
var templateObject_1$
|
|
20146
|
+
var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$e;
|
|
20056
20147
|
|
|
20057
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
20148
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20058
20149
|
var timerColor = _a.timerColor;
|
|
20059
20150
|
return timerColor || '';
|
|
20060
20151
|
});
|
|
20061
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
20152
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"], ["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"])), function (_a) {
|
|
20062
20153
|
var timerColor = _a.timerColor;
|
|
20063
20154
|
return timerColor || '';
|
|
20064
20155
|
});
|
|
20065
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
20156
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
20066
20157
|
var theme = _a.theme;
|
|
20067
20158
|
return theme.colors.shades.white.color;
|
|
20068
20159
|
}, function (_a) {
|
|
20069
20160
|
var theme = _a.theme;
|
|
20070
20161
|
return theme.colors.shades.white.color;
|
|
20071
20162
|
});
|
|
20072
|
-
var Unit = newStyled.p(templateObject_4$
|
|
20073
|
-
var templateObject_1$
|
|
20163
|
+
var Unit = newStyled.p(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"], ["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"])));
|
|
20164
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$d;
|
|
20074
20165
|
|
|
20075
20166
|
var HRS = 'HRS';
|
|
20076
20167
|
var MIN = 'MIN';
|
|
@@ -20113,14 +20204,14 @@ var Timer = function (_a) {
|
|
|
20113
20204
|
|
|
20114
20205
|
var slideInAnimation = function (distanceFromTop) {
|
|
20115
20206
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20116
|
-
return keyframes(templateObject_1$
|
|
20207
|
+
return keyframes(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20117
20208
|
};
|
|
20118
20209
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20119
20210
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20120
|
-
return keyframes(templateObject_2$
|
|
20211
|
+
return keyframes(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20121
20212
|
};
|
|
20122
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20123
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20213
|
+
var ToastContainer = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"])));
|
|
20214
|
+
var ToastContent = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n position: fixed;\n top: ", "; \n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"], ["\n position: fixed;\n top: ", "; \n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"])), function (_a) {
|
|
20124
20215
|
var distanceFromTop = _a.distanceFromTop;
|
|
20125
20216
|
return distanceFromTop || '124px';
|
|
20126
20217
|
}, function (_a) {
|
|
@@ -20133,12 +20224,12 @@ var ToastContent = newStyled.div(templateObject_4$b || (templateObject_4$b = __m
|
|
|
20133
20224
|
var distanceFromTop = _a.distanceFromTop;
|
|
20134
20225
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20135
20226
|
});
|
|
20136
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20227
|
+
var ToastText = newStyled.p(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"], ["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"])), function (_a) {
|
|
20137
20228
|
var severity = _a.severity;
|
|
20138
20229
|
return severity === 'error' ? '#C64844' : '#292929';
|
|
20139
20230
|
});
|
|
20140
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
20141
|
-
var templateObject_1$
|
|
20231
|
+
var CloseIcon = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20232
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$c, templateObject_4$c, templateObject_5$b, templateObject_6$a;
|
|
20142
20233
|
|
|
20143
20234
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20144
20235
|
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
@@ -20158,9 +20249,9 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
20158
20249
|
});
|
|
20159
20250
|
Toast.displayName = 'Toast';
|
|
20160
20251
|
|
|
20161
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20162
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20163
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20252
|
+
var Wrapper$1 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
20253
|
+
var GrandTotal = newStyled.h1(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
20254
|
+
var Currency = newStyled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
20164
20255
|
var theme = _a.theme;
|
|
20165
20256
|
return theme.component.total.basicTotal.currency.color;
|
|
20166
20257
|
}, function (_a) {
|
|
@@ -20173,21 +20264,21 @@ var Currency = newStyled.span(templateObject_3$a || (templateObject_3$a = __make
|
|
|
20173
20264
|
var theme = _a.theme;
|
|
20174
20265
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20175
20266
|
});
|
|
20176
|
-
var Container$9 = newStyled.div(templateObject_4$
|
|
20267
|
+
var Container$9 = newStyled.div(templateObject_4$b || (templateObject_4$b = __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) {
|
|
20177
20268
|
var highlightColor = _a.highlightColor;
|
|
20178
20269
|
return highlightColor;
|
|
20179
20270
|
});
|
|
20180
|
-
var TotalContainer = newStyled(Container$9)(templateObject_5$
|
|
20271
|
+
var TotalContainer = newStyled(Container$9)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20181
20272
|
var showTotalLabel = _a.showTotalLabel;
|
|
20182
20273
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20183
20274
|
});
|
|
20184
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20185
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
20275
|
+
var DiscountText = newStyled.h3(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
20276
|
+
var DiscountAmount = newStyled.h3(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
20186
20277
|
var theme = _a.theme;
|
|
20187
20278
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20188
20279
|
});
|
|
20189
20280
|
var TotalLabel = newStyled(Text$7)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20190
|
-
var templateObject_1$
|
|
20281
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$b, templateObject_5$a, templateObject_6$9, templateObject_7$9, templateObject_8$6;
|
|
20191
20282
|
|
|
20192
20283
|
var Total = function (_a) {
|
|
20193
20284
|
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;
|
|
@@ -20195,19 +20286,19 @@ var Total = function (_a) {
|
|
|
20195
20286
|
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));
|
|
20196
20287
|
};
|
|
20197
20288
|
|
|
20198
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20289
|
+
var Wrapper = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20199
20290
|
var color = _a.color;
|
|
20200
20291
|
return color;
|
|
20201
20292
|
});
|
|
20202
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20203
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20293
|
+
var ItemContainer = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
20294
|
+
var Item = newStyled.h4(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
20204
20295
|
var theme = _a.theme;
|
|
20205
20296
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20206
20297
|
}, function (_a) {
|
|
20207
20298
|
var theme = _a.theme;
|
|
20208
20299
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20209
20300
|
});
|
|
20210
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20301
|
+
var CouponItem = newStyled(Item)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20211
20302
|
var color = _a.color;
|
|
20212
20303
|
return color;
|
|
20213
20304
|
});
|
|
@@ -20220,26 +20311,26 @@ var Subtotal = function (_a) {
|
|
|
20220
20311
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20221
20312
|
})] }), void 0));
|
|
20222
20313
|
};
|
|
20223
|
-
var templateObject_1$
|
|
20314
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$a;
|
|
20224
20315
|
|
|
20225
20316
|
var Totals = {
|
|
20226
20317
|
Total: Total,
|
|
20227
20318
|
Subtotal: Subtotal,
|
|
20228
20319
|
};
|
|
20229
20320
|
|
|
20230
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
20231
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20232
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20233
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20234
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20235
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
20321
|
+
var Container$8 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20322
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20323
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __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; });
|
|
20324
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$9 || (templateObject_4$9 = __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'); });
|
|
20325
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
20326
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
20236
20327
|
return props.finishedTrack
|
|
20237
20328
|
? props.finishedTrackColor
|
|
20238
20329
|
: props.activeTrack
|
|
20239
20330
|
? props.activeTrackColor
|
|
20240
20331
|
: '';
|
|
20241
20332
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
20242
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
20333
|
+
var CheckpointStatusMessage = newStyled.span(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"], ["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"])));
|
|
20243
20334
|
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20244
20335
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20245
20336
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20279,17 +20370,17 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20279
20370
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20280
20371
|
})] }), void 0));
|
|
20281
20372
|
};
|
|
20282
|
-
var templateObject_1$
|
|
20283
|
-
|
|
20284
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20285
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20286
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20287
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20288
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20289
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
20373
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$9, templateObject_5$9, templateObject_6$8, templateObject_7$8, templateObject_8$5, templateObject_9$3, templateObject_10$3, templateObject_11$2;
|
|
20374
|
+
|
|
20375
|
+
var Container$7 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20376
|
+
var CheckpointContainer = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20377
|
+
var CheckpointDate = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __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; });
|
|
20378
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$8 || (templateObject_4$8 = __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'); });
|
|
20379
|
+
var CheckpointStatus = newStyled.p(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
20380
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20290
20381
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20291
20382
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20292
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
20383
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
20293
20384
|
var LastCheckpointTrack = newStyled.div(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
20294
20385
|
var TrackingProgress = function (_a) {
|
|
20295
20386
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
@@ -20319,9 +20410,9 @@ var TrackingProgress = function (_a) {
|
|
|
20319
20410
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20320
20411
|
})] }), void 0));
|
|
20321
20412
|
};
|
|
20322
|
-
var templateObject_1$
|
|
20413
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4$8, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$4;
|
|
20323
20414
|
|
|
20324
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20415
|
+
var TimerContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
20325
20416
|
var textPosition = _a.textPosition;
|
|
20326
20417
|
return textPosition;
|
|
20327
20418
|
}, function (_a) {
|
|
@@ -20334,7 +20425,7 @@ var TimerContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = _
|
|
|
20334
20425
|
var borderRadius = _a.borderRadius;
|
|
20335
20426
|
return borderRadius || '8px';
|
|
20336
20427
|
});
|
|
20337
|
-
var templateObject_1$
|
|
20428
|
+
var templateObject_1$a;
|
|
20338
20429
|
|
|
20339
20430
|
var getDefaultCountdown = function () {
|
|
20340
20431
|
var tomorrowDate = new Date();
|
|
@@ -20350,7 +20441,7 @@ var HurryUp = function (_a) {
|
|
|
20350
20441
|
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));
|
|
20351
20442
|
};
|
|
20352
20443
|
|
|
20353
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
20444
|
+
var Container$6 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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) {
|
|
20354
20445
|
var size = _a.size;
|
|
20355
20446
|
return (size ? size : '100%');
|
|
20356
20447
|
}, function (_a) {
|
|
@@ -20364,7 +20455,7 @@ var borderSize = {
|
|
|
20364
20455
|
large: '3px',
|
|
20365
20456
|
};
|
|
20366
20457
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20367
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20458
|
+
var StyledSpinner = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
20368
20459
|
var size = _a.size;
|
|
20369
20460
|
return borderSize[size];
|
|
20370
20461
|
}, function (_a) {
|
|
@@ -20377,13 +20468,52 @@ var StyledSpinner = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __
|
|
|
20377
20468
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20378
20469
|
return duration;
|
|
20379
20470
|
});
|
|
20380
|
-
var templateObject_1$
|
|
20471
|
+
var templateObject_1$9, templateObject_2$8;
|
|
20381
20472
|
|
|
20382
20473
|
var Spinner = function (_a) {
|
|
20383
20474
|
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;
|
|
20384
20475
|
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));
|
|
20385
20476
|
};
|
|
20386
20477
|
|
|
20478
|
+
var ContainerWrapper$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"], ["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"])));
|
|
20479
|
+
var ImageWrapper = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"])));
|
|
20480
|
+
var ImageComponent = newStyled(Image$3)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px auto;\n max-height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px auto;\n max-height: 123px;\n }\n"])));
|
|
20481
|
+
var RightComponentWrapper = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n width: 185px;\n gap: 0px;\n padding: 0px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n width: 185px;\n gap: 0px;\n padding: 0px;\n }\n"])));
|
|
20482
|
+
var TitleWrapper = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
20483
|
+
var SubTitleWrapper = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"])));
|
|
20484
|
+
var ButtonsWrapper = newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20485
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$7, templateObject_4$7, templateObject_5$7, templateObject_6$6, templateObject_7$6;
|
|
20486
|
+
|
|
20487
|
+
function CartItemCard(_a) {
|
|
20488
|
+
var style = _a.style, className = _a.className, children = _a.children;
|
|
20489
|
+
return (jsxRuntime.jsx(ContainerWrapper$1, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20490
|
+
}
|
|
20491
|
+
var CartItemImage = function (_a) {
|
|
20492
|
+
var alt = _a.alt, src = _a.src, className = _a.className, sizes = _a.sizes;
|
|
20493
|
+
return (jsxRuntime.jsx(ImageWrapper, { children: jsxRuntime.jsx(ImageComponent, { alt: alt, src: src, className: className, sizes: sizes }, void 0) }, void 0));
|
|
20494
|
+
};
|
|
20495
|
+
var BodyContent = function (_a) {
|
|
20496
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
20497
|
+
return (jsxRuntime.jsx(RightComponentWrapper, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20498
|
+
};
|
|
20499
|
+
var TitleContent = function (_a) {
|
|
20500
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
20501
|
+
return (jsxRuntime.jsx(TitleWrapper, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20502
|
+
};
|
|
20503
|
+
var SubTitleContent = function (_a) {
|
|
20504
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
20505
|
+
return (jsxRuntime.jsx(SubTitleWrapper, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20506
|
+
};
|
|
20507
|
+
var ButtonsContent = function (_a) {
|
|
20508
|
+
var children = _a.children, className = _a.className, style = _a.style;
|
|
20509
|
+
return (jsxRuntime.jsx(ButtonsWrapper, __assign$1({ style: style, className: className }, { children: children }), void 0));
|
|
20510
|
+
};
|
|
20511
|
+
BodyContent.TitleContent = TitleContent;
|
|
20512
|
+
BodyContent.SubTitleContent = SubTitleContent;
|
|
20513
|
+
BodyContent.ButtonsContent = ButtonsContent;
|
|
20514
|
+
CartItemCard.CartItemImageContent = CartItemImage;
|
|
20515
|
+
CartItemCard.BodyContent = BodyContent;
|
|
20516
|
+
|
|
20387
20517
|
var radioIds = {
|
|
20388
20518
|
oneTime: {
|
|
20389
20519
|
id: 'one-time-purchase',
|
|
@@ -20964,6 +21094,7 @@ exports.BuyNowPayLater = BuyNowPayLater;
|
|
|
20964
21094
|
exports.CacheProvider = CacheProvider;
|
|
20965
21095
|
exports.CancellationFlowAccordionContentPerPartner = CancellationFlowAccordionContentPerPartner;
|
|
20966
21096
|
exports.Card = Card$3;
|
|
21097
|
+
exports.CartItemCard = CartItemCard;
|
|
20967
21098
|
exports.CartProductItem = CartProductItem;
|
|
20968
21099
|
exports.CategorySquareTag = CategorySquareTag;
|
|
20969
21100
|
exports.CategoryTag = CategoryTag;
|
|
@@ -21040,6 +21171,7 @@ exports.SimpleOrderItem = SimpleOrderItem;
|
|
|
21040
21171
|
exports.SingleColorPicker = SingleColorPicker;
|
|
21041
21172
|
exports.SizeChartTable = SizeChartTable;
|
|
21042
21173
|
exports.SizeChartTableV2 = SizeChartTableV2;
|
|
21174
|
+
exports.SizeChartTableV3 = SizeChartTableV3;
|
|
21043
21175
|
exports.SizeDropdown = SizeDropdown;
|
|
21044
21176
|
exports.SizeFitGuide = SizeFitGuide;
|
|
21045
21177
|
exports.SizeSelector = SizeSelector;
|