@trafilea/afrodita-components 6.45.5 → 6.46.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +20 -2
- package/build/index.esm.js +694 -669
- package/build/index.esm.js.map +1 -1
- package/build/index.js +694 -668
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3215,7 +3215,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3215
3215
|
};
|
|
3216
3216
|
}
|
|
3217
3217
|
};
|
|
3218
|
-
var Container$
|
|
3218
|
+
var Container$1r = newStyled.div(templateObject_1$2r || (templateObject_1$2r = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3219
3219
|
var backgroundColor = _a.backgroundColor;
|
|
3220
3220
|
return backgroundColor;
|
|
3221
3221
|
}, function (_a) {
|
|
@@ -3237,7 +3237,7 @@ var Container$1q = newStyled.div(templateObject_1$2q || (templateObject_1$2q = _
|
|
|
3237
3237
|
var size = _a.size;
|
|
3238
3238
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3239
3239
|
});
|
|
3240
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3240
|
+
var H3$2 = newStyled.h3(templateObject_2$1K || (templateObject_2$1K = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3241
3241
|
var textColor = _a.textColor;
|
|
3242
3242
|
return textColor;
|
|
3243
3243
|
}, function (_a) {
|
|
@@ -3252,9 +3252,9 @@ var H3$2 = newStyled.h3(templateObject_2$1J || (templateObject_2$1J = __makeTemp
|
|
|
3252
3252
|
var ClubOfferTag = function (_a) {
|
|
3253
3253
|
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;
|
|
3254
3254
|
var theme = useTheme();
|
|
3255
|
-
return (jsxRuntime.jsx(Container$
|
|
3255
|
+
return (jsxRuntime.jsx(Container$1r, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3256
3256
|
};
|
|
3257
|
-
var templateObject_1$
|
|
3257
|
+
var templateObject_1$2r, templateObject_2$1K;
|
|
3258
3258
|
|
|
3259
3259
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3260
3260
|
var _a, _b, _c;
|
|
@@ -3285,7 +3285,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3285
3285
|
};
|
|
3286
3286
|
}
|
|
3287
3287
|
};
|
|
3288
|
-
var Container$
|
|
3288
|
+
var Container$1q = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3289
3289
|
var backgroundColor = _a.backgroundColor;
|
|
3290
3290
|
return backgroundColor;
|
|
3291
3291
|
}, function (_a) {
|
|
@@ -3307,7 +3307,7 @@ var Container$1p = newStyled.div(templateObject_1$2p || (templateObject_1$2p = _
|
|
|
3307
3307
|
var size = _a.size;
|
|
3308
3308
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3309
3309
|
});
|
|
3310
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
3310
|
+
var H3$1 = newStyled.h3(templateObject_2$1J || (templateObject_2$1J = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3311
3311
|
var textColor = _a.textColor;
|
|
3312
3312
|
return textColor;
|
|
3313
3313
|
}, function (_a) {
|
|
@@ -3322,9 +3322,9 @@ var H3$1 = newStyled.h3(templateObject_2$1I || (templateObject_2$1I = __makeTemp
|
|
|
3322
3322
|
var DiscountTag$3 = function (_a) {
|
|
3323
3323
|
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;
|
|
3324
3324
|
var theme = useTheme();
|
|
3325
|
-
return (jsxRuntime.jsx(Container$
|
|
3325
|
+
return (jsxRuntime.jsx(Container$1q, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3326
3326
|
};
|
|
3327
|
-
var templateObject_1$
|
|
3327
|
+
var templateObject_1$2q, templateObject_2$1J;
|
|
3328
3328
|
|
|
3329
3329
|
var Viewports = {
|
|
3330
3330
|
mobile: 'mobile',
|
|
@@ -3433,8 +3433,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3433
3433
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3434
3434
|
}
|
|
3435
3435
|
};
|
|
3436
|
-
var Container$
|
|
3437
|
-
var Price = newStyled.p(templateObject_2$
|
|
3436
|
+
var Container$1p = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3437
|
+
var Price = newStyled.p(templateObject_2$1I || (templateObject_2$1I = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
3438
3438
|
var weight = _a.weight;
|
|
3439
3439
|
return (weight ? weight : '400');
|
|
3440
3440
|
}, function (_a) {
|
|
@@ -3458,7 +3458,7 @@ var Price = newStyled.p(templateObject_2$1H || (templateObject_2$1H = __makeTemp
|
|
|
3458
3458
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3459
3459
|
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3460
3460
|
});
|
|
3461
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3461
|
+
var TagContainer = newStyled.div(templateObject_3$1k || (templateObject_3$1k = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3462
3462
|
var _b;
|
|
3463
3463
|
var size = _a.size;
|
|
3464
3464
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3489,11 +3489,11 @@ var PriceLabel$1 = function (_a) {
|
|
|
3489
3489
|
: exports.ComponentSize.XSmall;
|
|
3490
3490
|
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));
|
|
3491
3491
|
};
|
|
3492
|
-
return (jsxRuntime.jsxs(Container$
|
|
3492
|
+
return (jsxRuntime.jsxs(Container$1p, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3493
3493
|
};
|
|
3494
|
-
var templateObject_1$
|
|
3494
|
+
var templateObject_1$2p, templateObject_2$1I, templateObject_3$1k;
|
|
3495
3495
|
|
|
3496
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3496
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2o || (templateObject_1$2o = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3497
3497
|
var PriceLabelV2$1 = function (_a) {
|
|
3498
3498
|
var _b;
|
|
3499
3499
|
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"]);
|
|
@@ -3546,7 +3546,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3546
3546
|
var savetoString = saveto.toFixed(2);
|
|
3547
3547
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3548
3548
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3549
|
-
return (jsxRuntime.jsxs(Container$
|
|
3549
|
+
return (jsxRuntime.jsxs(Container$1p, __assign$1({}, rest, { id: "priceLabelV2" }, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$3, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
3550
3550
|
? finalPriceArray[0]
|
|
3551
3551
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
3552
3552
|
marginTop: '-6px',
|
|
@@ -3562,11 +3562,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3562
3562
|
lineHeight: '22px',
|
|
3563
3563
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3564
3564
|
};
|
|
3565
|
-
var templateObject_1$
|
|
3565
|
+
var templateObject_1$2o;
|
|
3566
3566
|
|
|
3567
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3568
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3569
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3567
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2n || (templateObject_1$2n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3568
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1H || (templateObject_2$1H = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3569
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1j || (templateObject_3$1j = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3570
3570
|
var PriceLabelV3 = function (_a) {
|
|
3571
3571
|
var _b;
|
|
3572
3572
|
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"]);
|
|
@@ -3621,7 +3621,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
3621
3621
|
return null;
|
|
3622
3622
|
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));
|
|
3623
3623
|
};
|
|
3624
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$
|
|
3624
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$1p, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$1p, { 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: {
|
|
3625
3625
|
marginTop: '-5px',
|
|
3626
3626
|
} }, 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: {
|
|
3627
3627
|
marginTop: '-6px',
|
|
@@ -3637,9 +3637,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3637
3637
|
lineHeight: '22px',
|
|
3638
3638
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3639
3639
|
};
|
|
3640
|
-
var templateObject_1$
|
|
3640
|
+
var templateObject_1$2n, templateObject_2$1H, templateObject_3$1j;
|
|
3641
3641
|
|
|
3642
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3642
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2m || (templateObject_1$2m = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3643
3643
|
var PriceLabel = function (_a) {
|
|
3644
3644
|
var _b;
|
|
3645
3645
|
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"]);
|
|
@@ -3667,15 +3667,15 @@ var PriceLabel = function (_a) {
|
|
|
3667
3667
|
};
|
|
3668
3668
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
3669
3669
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
3670
|
-
return (jsxRuntime.jsxs(Container$
|
|
3670
|
+
return (jsxRuntime.jsxs(Container$1p, __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: {
|
|
3671
3671
|
marginTop: '-5px',
|
|
3672
3672
|
} }, 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: {
|
|
3673
3673
|
marginTop: '-6px',
|
|
3674
3674
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3675
3675
|
};
|
|
3676
|
-
var templateObject_1$
|
|
3676
|
+
var templateObject_1$2m;
|
|
3677
3677
|
|
|
3678
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3678
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2l || (templateObject_1$2l = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3679
3679
|
var PriceLabelV2 = function (_a) {
|
|
3680
3680
|
var _b;
|
|
3681
3681
|
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"]);
|
|
@@ -3706,13 +3706,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
3706
3706
|
var finalPriceString = finalPriceArray[0]
|
|
3707
3707
|
? finalPriceArray[0]
|
|
3708
3708
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3709
|
-
return (jsxRuntime.jsxs(Container$
|
|
3709
|
+
return (jsxRuntime.jsxs(Container$1p, __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));
|
|
3710
3710
|
};
|
|
3711
|
-
var templateObject_1$
|
|
3711
|
+
var templateObject_1$2l;
|
|
3712
3712
|
|
|
3713
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
3714
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3715
|
-
var templateObject_1$
|
|
3713
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$2k || (templateObject_1$2k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"])));
|
|
3714
|
+
var ImgWrapper = newStyled.div(templateObject_2$1G || (templateObject_2$1G = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"])));
|
|
3715
|
+
var templateObject_1$2k, templateObject_2$1G;
|
|
3716
3716
|
|
|
3717
3717
|
var ClubPriceMemberLabel = function (_a) {
|
|
3718
3718
|
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"]);
|
|
@@ -3721,13 +3721,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3721
3721
|
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));
|
|
3722
3722
|
};
|
|
3723
3723
|
|
|
3724
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3724
|
+
var HorizontalDivider = newStyled.div(templateObject_1$2j || (templateObject_1$2j = __makeTemplateObject(["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"], ["\n border: unset;\n outline: unset;\n background-color: var(--colors-shades-100-color);\n height: 1px;\n width: ", ";\n margin: 4% auto;\n"])), function (_a) {
|
|
3725
3725
|
var width = _a.width;
|
|
3726
3726
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3727
3727
|
});
|
|
3728
|
-
var templateObject_1$
|
|
3728
|
+
var templateObject_1$2j;
|
|
3729
3729
|
|
|
3730
|
-
var Container$
|
|
3730
|
+
var Container$1o = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3731
3731
|
var height = _a.height;
|
|
3732
3732
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3733
3733
|
}, function (_a) {
|
|
@@ -3752,11 +3752,11 @@ var Container$1n = newStyled.div(templateObject_1$2h || (templateObject_1$2h = _
|
|
|
3752
3752
|
var SkeletonBox = function (_a) {
|
|
3753
3753
|
var width = _a.width, height = _a.height;
|
|
3754
3754
|
var theme = useTheme();
|
|
3755
|
-
return jsxRuntime.jsx(Container$
|
|
3755
|
+
return jsxRuntime.jsx(Container$1o, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3756
3756
|
};
|
|
3757
|
-
var templateObject_1$
|
|
3757
|
+
var templateObject_1$2i;
|
|
3758
3758
|
|
|
3759
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3759
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2h || (templateObject_1$2h = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3760
3760
|
var width = _a.width;
|
|
3761
3761
|
return width;
|
|
3762
3762
|
}, function (_a) {
|
|
@@ -3772,7 +3772,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2g || (templateObject_1$2g
|
|
|
3772
3772
|
var opacity = _a.opacity;
|
|
3773
3773
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3774
3774
|
});
|
|
3775
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3775
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1F || (templateObject_2$1F = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3776
3776
|
var width = _a.width;
|
|
3777
3777
|
return width;
|
|
3778
3778
|
}, function (_a) {
|
|
@@ -3785,7 +3785,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1E || (templateObject_2$
|
|
|
3785
3785
|
var opacity = _a.opacity;
|
|
3786
3786
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3787
3787
|
});
|
|
3788
|
-
var templateObject_1$
|
|
3788
|
+
var templateObject_1$2h, templateObject_2$1F;
|
|
3789
3789
|
|
|
3790
3790
|
/* eslint-disable no-undef */
|
|
3791
3791
|
var cache = new Map();
|
|
@@ -3961,7 +3961,7 @@ var buildImageUrl = function (_a) {
|
|
|
3961
3961
|
}
|
|
3962
3962
|
};
|
|
3963
3963
|
|
|
3964
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3964
|
+
var Img$1 = newStyled.img(templateObject_1$2g || (templateObject_1$2g = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3965
3965
|
var Image$3 = function (_a) {
|
|
3966
3966
|
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"]);
|
|
3967
3967
|
var config = useTheme().config;
|
|
@@ -3970,15 +3970,15 @@ var Image$3 = function (_a) {
|
|
|
3970
3970
|
: src;
|
|
3971
3971
|
return (jsxRuntime.jsx(Img$1, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, decoding: decoding, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3972
3972
|
};
|
|
3973
|
-
var templateObject_1$
|
|
3973
|
+
var templateObject_1$2g;
|
|
3974
3974
|
|
|
3975
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
3976
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3977
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
3975
|
+
var LabelWrapper = newStyled.label(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"])));
|
|
3976
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1E || (templateObject_2$1E = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
3977
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1i || (templateObject_3$1i = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])), function (_a) {
|
|
3978
3978
|
var $color = _a.$color;
|
|
3979
3979
|
return $color;
|
|
3980
3980
|
});
|
|
3981
|
-
var templateObject_1$
|
|
3981
|
+
var templateObject_1$2f, templateObject_2$1E, templateObject_3$1i;
|
|
3982
3982
|
|
|
3983
3983
|
var ToggleComponent = function (_a) {
|
|
3984
3984
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c;
|
|
@@ -4434,7 +4434,7 @@ var MyAccount = /*#__PURE__*/Object.freeze({
|
|
|
4434
4434
|
|
|
4435
4435
|
var AddressInformation = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/address_information" }), void 0)); };
|
|
4436
4436
|
|
|
4437
|
-
var Benefits$
|
|
4437
|
+
var Benefits$2 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/benefits" }), void 0); };
|
|
4438
4438
|
|
|
4439
4439
|
var ClubMembership = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/club_membership" }), void 0)); };
|
|
4440
4440
|
|
|
@@ -4493,7 +4493,7 @@ var UserV2 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, pro
|
|
|
4493
4493
|
var Navigation = /*#__PURE__*/Object.freeze({
|
|
4494
4494
|
__proto__: null,
|
|
4495
4495
|
AddressInformation: AddressInformation,
|
|
4496
|
-
Benefits: Benefits$
|
|
4496
|
+
Benefits: Benefits$2,
|
|
4497
4497
|
ClubMembership: ClubMembership,
|
|
4498
4498
|
Ellipsis: Ellipsis,
|
|
4499
4499
|
EllipsisHorizontal: EllipsisHorizontal,
|
|
@@ -4654,6 +4654,8 @@ var KlarnaLogo = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({},
|
|
|
4654
4654
|
|
|
4655
4655
|
var LightBulb = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/light_bulb" }), void 0); };
|
|
4656
4656
|
|
|
4657
|
+
var LoadingTrafisizy = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/loading_trafisizy" }), void 0); };
|
|
4658
|
+
|
|
4657
4659
|
var Minus = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/minus" }), void 0); };
|
|
4658
4660
|
|
|
4659
4661
|
var Moon = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/moon" }), void 0); };
|
|
@@ -4712,6 +4714,7 @@ var PDP = /*#__PURE__*/Object.freeze({
|
|
|
4712
4714
|
Hours: Hours,
|
|
4713
4715
|
KlarnaLogo: KlarnaLogo,
|
|
4714
4716
|
LightBulb: LightBulb,
|
|
4717
|
+
LoadingTrafisizy: LoadingTrafisizy,
|
|
4715
4718
|
Minus: Minus,
|
|
4716
4719
|
Moon: Moon,
|
|
4717
4720
|
NewClock: NewClock,
|
|
@@ -4839,14 +4842,14 @@ function jsxs(type, props, key) {
|
|
|
4839
4842
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4840
4843
|
// `variants` styles that are consistent through all themes.
|
|
4841
4844
|
var TAGS = {
|
|
4842
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4843
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4844
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4845
|
-
display1: newStyled.h1(templateObject_4$
|
|
4846
|
-
display2: newStyled.h2(templateObject_5$
|
|
4847
|
-
display3: newStyled.h3(templateObject_6$
|
|
4848
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4849
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4845
|
+
hero1: newStyled.h1(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject([""], [""]))),
|
|
4846
|
+
hero2: newStyled.h2(templateObject_2$1D || (templateObject_2$1D = __makeTemplateObject([""], [""]))),
|
|
4847
|
+
hero3: newStyled.h3(templateObject_3$1h || (templateObject_3$1h = __makeTemplateObject([""], [""]))),
|
|
4848
|
+
display1: newStyled.h1(templateObject_4$11 || (templateObject_4$11 = __makeTemplateObject([""], [""]))),
|
|
4849
|
+
display2: newStyled.h2(templateObject_5$O || (templateObject_5$O = __makeTemplateObject([""], [""]))),
|
|
4850
|
+
display3: newStyled.h3(templateObject_6$G || (templateObject_6$G = __makeTemplateObject([""], [""]))),
|
|
4851
|
+
heading1: newStyled.h1(templateObject_7$x || (templateObject_7$x = __makeTemplateObject([""], [""]))),
|
|
4852
|
+
heading2: newStyled.h2(templateObject_8$q || (templateObject_8$q = __makeTemplateObject([""], [""]))),
|
|
4850
4853
|
heading3: newStyled.h3(templateObject_9$d || (templateObject_9$d = __makeTemplateObject([""], [""]))),
|
|
4851
4854
|
heading4: newStyled.h4(templateObject_10$c || (templateObject_10$c = __makeTemplateObject([""], [""]))),
|
|
4852
4855
|
heading5: newStyled.h5(templateObject_11$8 || (templateObject_11$8 = __makeTemplateObject([""], [""]))),
|
|
@@ -4979,17 +4982,17 @@ var DEFAULTS = {
|
|
|
4979
4982
|
size: 'regular',
|
|
4980
4983
|
},
|
|
4981
4984
|
};
|
|
4982
|
-
var templateObject_1$
|
|
4983
|
-
|
|
4984
|
-
var Container$
|
|
4985
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
4986
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4987
|
-
var Label$7 = newStyled.div(templateObject_4
|
|
4988
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4989
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4985
|
+
var templateObject_1$2e, templateObject_2$1D, templateObject_3$1h, templateObject_4$11, templateObject_5$O, templateObject_6$G, templateObject_7$x, templateObject_8$q, templateObject_9$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4986
|
+
|
|
4987
|
+
var Container$1n = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4988
|
+
var Card$4 = newStyled.div(templateObject_2$1C || (templateObject_2$1C = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4989
|
+
var Tag$2 = newStyled.div(templateObject_3$1g || (templateObject_3$1g = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4990
|
+
var Label$7 = newStyled.div(templateObject_4$10 || (templateObject_4$10 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
4991
|
+
var Check$1 = newStyled.div(templateObject_5$N || (templateObject_5$N = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4992
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$F || (templateObject_6$F = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4990
4993
|
var PackSelectorV2 = function (_a) {
|
|
4991
4994
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4992
|
-
return (jsxRuntime.jsx(Container$
|
|
4995
|
+
return (jsxRuntime.jsx(Container$1n, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4993
4996
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4994
4997
|
}) }), void 0));
|
|
4995
4998
|
};
|
|
@@ -5011,27 +5014,27 @@ var PackCard$1 = function (_a) {
|
|
|
5011
5014
|
currency: currencyCode || 'USD',
|
|
5012
5015
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5013
5016
|
};
|
|
5014
|
-
var templateObject_1$
|
|
5017
|
+
var templateObject_1$2d, templateObject_2$1C, templateObject_3$1g, templateObject_4$10, templateObject_5$N, templateObject_6$F;
|
|
5015
5018
|
|
|
5016
|
-
var Container$
|
|
5017
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
5019
|
+
var Container$1m = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5020
|
+
var DropContainer = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5018
5021
|
var DropList = function (_a) {
|
|
5019
5022
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5020
|
-
return (jsxRuntime.jsx(Container$
|
|
5023
|
+
return (jsxRuntime.jsx(Container$1m, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5021
5024
|
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));
|
|
5022
5025
|
}) }, void 0));
|
|
5023
5026
|
};
|
|
5024
|
-
var templateObject_1$
|
|
5027
|
+
var templateObject_1$2c, templateObject_2$1B;
|
|
5025
5028
|
|
|
5026
5029
|
var DROPS_TOTAL = 5;
|
|
5027
|
-
var Container$
|
|
5028
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5029
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
5030
|
+
var Container$1l = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5031
|
+
var Title$b = newStyled.p(templateObject_2$1A || (templateObject_2$1A = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
5032
|
+
var Description$3 = newStyled.p(templateObject_3$1f || (templateObject_3$1f = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
5030
5033
|
var AbsorbencyLevel = function (_a) {
|
|
5031
5034
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5032
|
-
return (jsxRuntime.jsxs(Container$
|
|
5035
|
+
return (jsxRuntime.jsxs(Container$1l, { 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));
|
|
5033
5036
|
};
|
|
5034
|
-
var templateObject_1$
|
|
5037
|
+
var templateObject_1$2b, templateObject_2$1A, templateObject_3$1f;
|
|
5035
5038
|
|
|
5036
5039
|
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(`
|
|
5037
5040
|
`),"","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(`
|
|
@@ -5107,7 +5110,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5107
5110
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5108
5111
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5109
5112
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5110
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5113
|
+
var StyledContent$1 = newStyled.button(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
5111
5114
|
var Accordion$1 = function (_a) {
|
|
5112
5115
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, testId = _a.testId;
|
|
5113
5116
|
var theme = useTheme();
|
|
@@ -5131,9 +5134,9 @@ var Accordion$1 = function (_a) {
|
|
|
5131
5134
|
} }, { 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));
|
|
5132
5135
|
} }), void 0));
|
|
5133
5136
|
};
|
|
5134
|
-
var templateObject_1$
|
|
5137
|
+
var templateObject_1$2a;
|
|
5135
5138
|
|
|
5136
|
-
var Container$
|
|
5139
|
+
var Container$1k = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5137
5140
|
var AccordionOptions = function (_a) {
|
|
5138
5141
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5139
5142
|
var _b = React$2.useState({
|
|
@@ -5146,7 +5149,7 @@ var AccordionOptions = function (_a) {
|
|
|
5146
5149
|
}
|
|
5147
5150
|
return false;
|
|
5148
5151
|
};
|
|
5149
|
-
return (jsxRuntime.jsx(Container$
|
|
5152
|
+
return (jsxRuntime.jsx(Container$1k, { children: accordions.map(function (accordion, index) {
|
|
5150
5153
|
var forceOpenValue = getForceOpen(index);
|
|
5151
5154
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
5152
5155
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -5157,7 +5160,7 @@ var AccordionOptions = function (_a) {
|
|
|
5157
5160
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5158
5161
|
}) }, void 0));
|
|
5159
5162
|
};
|
|
5160
|
-
var templateObject_1$
|
|
5163
|
+
var templateObject_1$29;
|
|
5161
5164
|
|
|
5162
5165
|
/**
|
|
5163
5166
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5293,27 +5296,27 @@ var isValidDate = function (value) {
|
|
|
5293
5296
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5294
5297
|
};
|
|
5295
5298
|
|
|
5296
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5297
|
-
var FlexContainer$4 = newStyled.div(templateObject_2$
|
|
5298
|
-
var templateObject_1$
|
|
5299
|
+
var Bold = newStyled.span(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5300
|
+
var FlexContainer$4 = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
5301
|
+
var templateObject_1$28, templateObject_2$1z;
|
|
5299
5302
|
|
|
5300
|
-
var Container$
|
|
5303
|
+
var Container$1j = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
5301
5304
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5302
5305
|
return width;
|
|
5303
5306
|
}, function (_a) {
|
|
5304
5307
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5305
5308
|
return height;
|
|
5306
5309
|
});
|
|
5307
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5308
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5309
|
-
var RightSide = newStyled.div(templateObject_4
|
|
5310
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5311
|
-
var templateObject_1$
|
|
5310
|
+
var FlexCentered = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5311
|
+
var LeftSide = newStyled.div(templateObject_3$1e || (templateObject_3$1e = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5312
|
+
var RightSide = newStyled.div(templateObject_4$$ || (templateObject_4$$ = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5313
|
+
var FlexStart = newStyled.div(templateObject_5$M || (templateObject_5$M = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5314
|
+
var templateObject_1$27, templateObject_2$1y, templateObject_3$1e, templateObject_4$$, templateObject_5$M;
|
|
5312
5315
|
|
|
5313
5316
|
var CouponCard = function (_a) {
|
|
5314
5317
|
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;
|
|
5315
5318
|
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
5316
|
-
return (jsxRuntime.jsxs(Container$
|
|
5319
|
+
return (jsxRuntime.jsxs(Container$1j, __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 () {
|
|
5317
5320
|
onClickRedeemOfferHandler && onClickRedeemOfferHandler();
|
|
5318
5321
|
setShowCoupon(function (prev) { return !prev; });
|
|
5319
5322
|
} }, 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: {
|
|
@@ -5461,14 +5464,14 @@ var sizeOptions = [
|
|
|
5461
5464
|
},
|
|
5462
5465
|
];
|
|
5463
5466
|
|
|
5464
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5465
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5467
|
+
var ErrorText = newStyled.h3(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
5468
|
+
var ErrorContainer = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
5466
5469
|
var Error$1 = function (_a) {
|
|
5467
5470
|
var error = _a.error;
|
|
5468
5471
|
var theme = useTheme();
|
|
5469
5472
|
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));
|
|
5470
5473
|
};
|
|
5471
|
-
var templateObject_1$
|
|
5474
|
+
var templateObject_1$26, templateObject_2$1x;
|
|
5472
5475
|
|
|
5473
5476
|
var BaseSelectButton = function (_a) {
|
|
5474
5477
|
var children = _a.children, as = _a.as;
|
|
@@ -5485,7 +5488,7 @@ function BaseSelectOption(_a) {
|
|
|
5485
5488
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5486
5489
|
}
|
|
5487
5490
|
|
|
5488
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5491
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5489
5492
|
function BaseSelect(_a) {
|
|
5490
5493
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5491
5494
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5495,7 +5498,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5495
5498
|
Options: BaseSelectOptions,
|
|
5496
5499
|
Option: BaseSelectOption,
|
|
5497
5500
|
});
|
|
5498
|
-
var templateObject_1$
|
|
5501
|
+
var templateObject_1$25;
|
|
5499
5502
|
|
|
5500
5503
|
var CustomButton = newStyled.button(function (_a) {
|
|
5501
5504
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5534,7 +5537,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5534
5537
|
});
|
|
5535
5538
|
});
|
|
5536
5539
|
// TODO Remove this when we find the real solution
|
|
5537
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5540
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5538
5541
|
var open = _a.open;
|
|
5539
5542
|
return open &&
|
|
5540
5543
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5554,7 +5557,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5554
5557
|
} }), void 0));
|
|
5555
5558
|
};
|
|
5556
5559
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5557
|
-
var templateObject_1$
|
|
5560
|
+
var templateObject_1$24;
|
|
5558
5561
|
|
|
5559
5562
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5560
5563
|
var theme = _a.theme;
|
|
@@ -5721,7 +5724,7 @@ var CustomCheckboxStyles = {
|
|
|
5721
5724
|
},
|
|
5722
5725
|
};
|
|
5723
5726
|
|
|
5724
|
-
var Container$
|
|
5727
|
+
var Container$1i = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
5725
5728
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5726
5729
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5727
5730
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5732,7 +5735,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5732
5735
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5733
5736
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5734
5737
|
]; });
|
|
5735
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5738
|
+
var Input$5 = newStyled.input(templateObject_2$1w || (templateObject_2$1w = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
5736
5739
|
var disabled = _a.disabled;
|
|
5737
5740
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5738
5741
|
});
|
|
@@ -5746,9 +5749,9 @@ var Checkbox = function (_a) {
|
|
|
5746
5749
|
}
|
|
5747
5750
|
onChange(e.target.checked);
|
|
5748
5751
|
};
|
|
5749
|
-
return (jsxRuntime.jsxs(Container$
|
|
5752
|
+
return (jsxRuntime.jsxs(Container$1i, { 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: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5750
5753
|
};
|
|
5751
|
-
var templateObject_1$
|
|
5754
|
+
var templateObject_1$23, templateObject_2$1w;
|
|
5752
5755
|
|
|
5753
5756
|
var CustomOption = newStyled.li(function (_a) {
|
|
5754
5757
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5797,9 +5800,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5797
5800
|
Option: BaseDropdownOption,
|
|
5798
5801
|
});
|
|
5799
5802
|
|
|
5800
|
-
var Container$
|
|
5801
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5802
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5803
|
+
var Container$1h = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject([""], [""])));
|
|
5804
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
5805
|
+
var SelectedOption = newStyled.span(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5803
5806
|
var fontWeight = _a.fontWeight;
|
|
5804
5807
|
return fontWeight || '';
|
|
5805
5808
|
});
|
|
@@ -5832,10 +5835,10 @@ function SimpleDropdown(_a) {
|
|
|
5832
5835
|
}
|
|
5833
5836
|
setSelectedValue(value);
|
|
5834
5837
|
}, [value, options, initialValue]);
|
|
5835
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5838
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$1h : React$2.Fragment;
|
|
5836
5839
|
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));
|
|
5837
5840
|
}
|
|
5838
|
-
var templateObject_1$
|
|
5841
|
+
var templateObject_1$22, templateObject_2$1v, templateObject_3$1d;
|
|
5839
5842
|
|
|
5840
5843
|
/* base styles & size variants */
|
|
5841
5844
|
var CustomRadioStyles$2 = {
|
|
@@ -5900,9 +5903,9 @@ var ContainerStyles$2 = {
|
|
|
5900
5903
|
},
|
|
5901
5904
|
};
|
|
5902
5905
|
|
|
5903
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5904
|
-
var Container$
|
|
5905
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5906
|
+
var Wrapper$7 = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5907
|
+
var Container$1g = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5908
|
+
var Input$4 = newStyled.input(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5906
5909
|
var disabled = _a.disabled;
|
|
5907
5910
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5908
5911
|
});
|
|
@@ -5910,14 +5913,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5910
5913
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5911
5914
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5912
5915
|
]; });
|
|
5913
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5916
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$1c || (templateObject_3$1c = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5914
5917
|
var theme = _a.theme;
|
|
5915
5918
|
return theme.component.radio.textSize;
|
|
5916
5919
|
}, function (_a) {
|
|
5917
5920
|
var theme = _a.theme;
|
|
5918
5921
|
return theme.component.radio.lineHeight;
|
|
5919
5922
|
});
|
|
5920
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5923
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$_ || (templateObject_4$_ = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n\n color: ", ";\n"])), function (_a) {
|
|
5921
5924
|
var theme = _a.theme;
|
|
5922
5925
|
return theme.component.radio.textSize;
|
|
5923
5926
|
}, function (_a) {
|
|
@@ -5934,9 +5937,9 @@ var RadioInput = function (_a) {
|
|
|
5934
5937
|
var value = event.currentTarget.value;
|
|
5935
5938
|
onChange({ value: value, label: label });
|
|
5936
5939
|
};
|
|
5937
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5940
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$1g, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsxs(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5938
5941
|
};
|
|
5939
|
-
var templateObject_1$
|
|
5942
|
+
var templateObject_1$21, templateObject_2$1u, templateObject_3$1c, templateObject_4$_;
|
|
5940
5943
|
|
|
5941
5944
|
var useOnClickOutside = function (ref, handler) {
|
|
5942
5945
|
React$2.useEffect(function () {
|
|
@@ -6029,7 +6032,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6029
6032
|
}
|
|
6030
6033
|
};
|
|
6031
6034
|
|
|
6032
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
6035
|
+
var Wrapper$6 = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
6033
6036
|
var position = _a.position;
|
|
6034
6037
|
return getWrapperFlexDirection(position);
|
|
6035
6038
|
}, function (_a) {
|
|
@@ -6039,7 +6042,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __ma
|
|
|
6039
6042
|
var disableHover = _a.disableHover;
|
|
6040
6043
|
return (disableHover ? 0 : 1);
|
|
6041
6044
|
});
|
|
6042
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6045
|
+
var TooltipContainer = newStyled.div(templateObject_2$1t || (templateObject_2$1t = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
6043
6046
|
var position = _a.position;
|
|
6044
6047
|
return getContainerFlexDirection(position);
|
|
6045
6048
|
}, function (_a) {
|
|
@@ -6067,14 +6070,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1s || (templateObject_2$1s
|
|
|
6067
6070
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6068
6071
|
return actual === expected ? margin : '0';
|
|
6069
6072
|
};
|
|
6070
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
6073
|
+
var ContentWrapper = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
6071
6074
|
var borderColor = _a.borderColor;
|
|
6072
6075
|
return borderColor;
|
|
6073
6076
|
}, function (_a) {
|
|
6074
6077
|
var backgroundColor = _a.backgroundColor;
|
|
6075
6078
|
return backgroundColor;
|
|
6076
6079
|
});
|
|
6077
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
6080
|
+
var TooltipText = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
|
|
6078
6081
|
var theme = _a.theme;
|
|
6079
6082
|
return theme.component.autoship.tooltip.text.alignment;
|
|
6080
6083
|
}, function (_a) {
|
|
@@ -6084,17 +6087,17 @@ var TooltipText = newStyled.div(templateObject_4$Y || (templateObject_4$Y = __ma
|
|
|
6084
6087
|
var color = _a.color;
|
|
6085
6088
|
return color;
|
|
6086
6089
|
});
|
|
6087
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
6088
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
6090
|
+
var TopSection = newStyled.div(templateObject_5$L || (templateObject_5$L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
6091
|
+
var Title$a = newStyled.h1(templateObject_6$E || (templateObject_6$E = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
6089
6092
|
var color = _a.color;
|
|
6090
6093
|
return color;
|
|
6091
6094
|
});
|
|
6092
|
-
var IconContainer$6 = newStyled.div(templateObject_7$
|
|
6093
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
6095
|
+
var IconContainer$6 = newStyled.div(templateObject_7$w || (templateObject_7$w = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
6096
|
+
var CloseToolTip = newStyled.button(templateObject_8$p || (templateObject_8$p = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
6094
6097
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6095
6098
|
return right;
|
|
6096
6099
|
});
|
|
6097
|
-
var templateObject_1$
|
|
6100
|
+
var templateObject_1$20, templateObject_2$1t, templateObject_3$1b, templateObject_4$Z, templateObject_5$L, templateObject_6$E, templateObject_7$w, templateObject_8$p;
|
|
6098
6101
|
|
|
6099
6102
|
var Tooltip = function (_a) {
|
|
6100
6103
|
var _b;
|
|
@@ -6137,8 +6140,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
6137
6140
|
};
|
|
6138
6141
|
};
|
|
6139
6142
|
|
|
6140
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6141
|
-
var ContainerBase$
|
|
6143
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6144
|
+
var ContainerBase$4 = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6142
6145
|
var selected = _a.selected, theme = _a.theme;
|
|
6143
6146
|
return selected
|
|
6144
6147
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6152,21 +6155,21 @@ var ContainerBase$3 = newStyled.div(templateObject_2$1r || (templateObject_2$1r
|
|
|
6152
6155
|
var theme = _a.theme;
|
|
6153
6156
|
return theme.colors.pallete.primary.color;
|
|
6154
6157
|
});
|
|
6155
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$
|
|
6158
|
+
var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_3$1a || (templateObject_3$1a = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
6156
6159
|
var onClick = _a.onClick;
|
|
6157
6160
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6158
6161
|
});
|
|
6159
|
-
var SubscriptionContainer$
|
|
6160
|
-
var SubscriptionHeader$
|
|
6162
|
+
var SubscriptionContainer$4 = newStyled(ContainerBase$4)(templateObject_4$Y || (templateObject_4$Y = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6163
|
+
var SubscriptionHeader$4 = newStyled.div(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6161
6164
|
var theme = _a.theme;
|
|
6162
6165
|
return theme.colors.shades[200].color;
|
|
6163
6166
|
}, function (_a) {
|
|
6164
6167
|
var theme = _a.theme;
|
|
6165
6168
|
return theme.colors.pallete.primary.color;
|
|
6166
6169
|
});
|
|
6167
|
-
var BenefitsContainer$3 = newStyled.div(templateObject_6$
|
|
6168
|
-
var Benefit$4 = newStyled.div(templateObject_7$
|
|
6169
|
-
var BenefitText$3 = newStyled(Text$7)(templateObject_8$
|
|
6170
|
+
var BenefitsContainer$3 = newStyled.div(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6171
|
+
var Benefit$4 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
6172
|
+
var BenefitText$3 = newStyled(Text$7)(templateObject_8$o || (templateObject_8$o = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6170
6173
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$c || (templateObject_9$c = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
6171
6174
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
6172
6175
|
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"])));
|
|
@@ -6174,8 +6177,8 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
|
|
|
6174
6177
|
var selected = _a.selected, theme = _a.theme;
|
|
6175
6178
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6176
6179
|
});
|
|
6177
|
-
var Container$
|
|
6178
|
-
var templateObject_1$
|
|
6180
|
+
var Container$1f = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
|
|
6181
|
+
var templateObject_1$1$, templateObject_2$1s, templateObject_3$1a, templateObject_4$Y, templateObject_5$K, templateObject_6$D, templateObject_7$v, templateObject_8$o, templateObject_9$c, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
|
|
6179
6182
|
|
|
6180
6183
|
var radioIds$2 = {
|
|
6181
6184
|
oneTime: {
|
|
@@ -6225,17 +6228,17 @@ var Autoship = function (_a) {
|
|
|
6225
6228
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6226
6229
|
};
|
|
6227
6230
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6228
|
-
return (jsxRuntime.jsxs(Container$
|
|
6231
|
+
return (jsxRuntime.jsxs(Container$1f, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SinglePurchaseContainer$3, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$2.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds$2.oneTime.id, id: radioIds$2.oneTime.id, value: radioIds$2.oneTime.id, checked: radioIds$2.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer$4, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader$4, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds$2.autoship.id, id: radioIds$2.autoship.id, value: radioIds$2.autoship.id, checked: radioIds$2.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$2.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer$3, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$4, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6229
6232
|
? benefitsColor.selected
|
|
6230
6233
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$3, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6231
6234
|
};
|
|
6232
6235
|
|
|
6233
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
6236
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6234
6237
|
var theme = _a.theme;
|
|
6235
6238
|
return theme.name === 'TheSpaDr' &&
|
|
6236
6239
|
"\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 ";
|
|
6237
6240
|
});
|
|
6238
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
6241
|
+
var DiscountTag$2 = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
6239
6242
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6240
6243
|
return isSelected
|
|
6241
6244
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6251,7 +6254,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6251
6254
|
}
|
|
6252
6255
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6253
6256
|
};
|
|
6254
|
-
var ContainerBase$
|
|
6257
|
+
var ContainerBase$3 = newStyled.div(templateObject_3$19 || (templateObject_3$19 = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6255
6258
|
var selected = _a.selected, theme = _a.theme;
|
|
6256
6259
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6257
6260
|
}, function (_a) {
|
|
@@ -6263,32 +6266,32 @@ var ContainerBase$2 = newStyled.div(templateObject_3$18 || (templateObject_3$18
|
|
|
6263
6266
|
var theme = _a.theme;
|
|
6264
6267
|
return theme.colors.pallete.primary.color;
|
|
6265
6268
|
});
|
|
6266
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$
|
|
6269
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$3)(templateObject_4$X || (templateObject_4$X = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
6267
6270
|
var onClick = _a.onClick;
|
|
6268
6271
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6269
6272
|
});
|
|
6270
|
-
var SubscriptionContainer$
|
|
6271
|
-
var SubscriptionHeader$
|
|
6273
|
+
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_5$J || (templateObject_5$J = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6274
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_6$C || (templateObject_6$C = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6272
6275
|
var theme = _a.theme;
|
|
6273
6276
|
return theme.colors.shades[200].color;
|
|
6274
6277
|
}, function (_a) {
|
|
6275
6278
|
var theme = _a.theme;
|
|
6276
6279
|
return theme.colors.pallete.primary.color;
|
|
6277
6280
|
});
|
|
6278
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_7$
|
|
6279
|
-
var Benefit$3 = newStyled.div(templateObject_8$
|
|
6281
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_7$u || (templateObject_7$u = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6282
|
+
var Benefit$3 = newStyled.div(templateObject_8$n || (templateObject_8$n = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6280
6283
|
var BenefitText$2 = newStyled(Text$7)(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6281
6284
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$a || (templateObject_10$a = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
6282
6285
|
var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
6283
6286
|
var selected = _a.selected, theme = _a.theme;
|
|
6284
6287
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6285
6288
|
});
|
|
6286
|
-
var Container$
|
|
6289
|
+
var Container$1e = newStyled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
6287
6290
|
var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
6288
6291
|
var theme = _a.theme;
|
|
6289
6292
|
return theme.component.autoship.tooltip.margin;
|
|
6290
6293
|
});
|
|
6291
|
-
var templateObject_1$
|
|
6294
|
+
var templateObject_1$1_, templateObject_2$1r, templateObject_3$19, templateObject_4$X, templateObject_5$J, templateObject_6$C, templateObject_7$u, templateObject_8$n, templateObject_9$b, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
6292
6295
|
|
|
6293
6296
|
var radioIds$1 = {
|
|
6294
6297
|
oneTime: {
|
|
@@ -6348,7 +6351,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6348
6351
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6349
6352
|
};
|
|
6350
6353
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6351
|
-
return (jsxRuntime.jsxs(Container$
|
|
6354
|
+
return (jsxRuntime.jsxs(Container$1e, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$3, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag$2, __assign$1({ isSelected: radioIds$1.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader$3, { children: [jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$1.autoship.id) }, void 0), jsxRuntime.jsx(TooltipWrapper$1, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsxRuntime.jsx(StyledPrice$2, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer$2, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$3, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
6352
6355
|
? benefitsColor.selected
|
|
6353
6356
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$2, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(FlexContainer$2, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery 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: ["Delivery Every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer$2, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$2, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6354
6357
|
};
|
|
@@ -6367,13 +6370,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6367
6370
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6368
6371
|
_a$2);
|
|
6369
6372
|
|
|
6370
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6371
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6372
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6373
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6374
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6375
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6376
|
-
var templateObject_1$
|
|
6373
|
+
var CustomerDetails = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject([""], [""])));
|
|
6374
|
+
var CustomerInfo = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6375
|
+
var Name = newStyled.h4(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
6376
|
+
var StarIconContainer = newStyled.div(templateObject_4$W || (templateObject_4$W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6377
|
+
var Description$2 = newStyled.p(templateObject_5$I || (templateObject_5$I = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6378
|
+
var ReviewDays = newStyled.span(templateObject_6$B || (templateObject_6$B = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6379
|
+
var templateObject_1$1Z, templateObject_2$1q, templateObject_3$18, templateObject_4$W, templateObject_5$I, templateObject_6$B;
|
|
6377
6380
|
|
|
6378
6381
|
var NameWithStars = function (_a) {
|
|
6379
6382
|
var name = _a.name, size = _a.size;
|
|
@@ -6391,10 +6394,10 @@ var ResultFeedback = function (_a) {
|
|
|
6391
6394
|
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));
|
|
6392
6395
|
};
|
|
6393
6396
|
|
|
6394
|
-
var Container$
|
|
6395
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6396
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6397
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6397
|
+
var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
6398
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
6399
|
+
var ImageCard = newStyled.div(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
6400
|
+
var UserInfoText = newStyled.div(templateObject_4$V || (templateObject_4$V = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6398
6401
|
var theme = _a.theme;
|
|
6399
6402
|
return theme.colors.pallete.secondary.color;
|
|
6400
6403
|
}, function (_a) {
|
|
@@ -6404,7 +6407,7 @@ var UserInfoText = newStyled.div(templateObject_4$U || (templateObject_4$U = __m
|
|
|
6404
6407
|
var theme = _a.theme, size = _a.size;
|
|
6405
6408
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6406
6409
|
});
|
|
6407
|
-
var templateObject_1$
|
|
6410
|
+
var templateObject_1$1Y, templateObject_2$1p, templateObject_3$17, templateObject_4$V;
|
|
6408
6411
|
|
|
6409
6412
|
/* base styles & size variants */
|
|
6410
6413
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6479,10 +6482,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6479
6482
|
var stylesBySize = getStylesBySize$d(size, theme);
|
|
6480
6483
|
var infoText = buildInfoText(name, age, months);
|
|
6481
6484
|
var Component = componentByVariant[variant];
|
|
6482
|
-
return (jsxRuntime.jsxs(Container$
|
|
6485
|
+
return (jsxRuntime.jsxs(Container$1d, __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));
|
|
6483
6486
|
};
|
|
6484
6487
|
|
|
6485
|
-
var Section = newStyled.div(templateObject_1$
|
|
6488
|
+
var Section = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
6486
6489
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6487
6490
|
});
|
|
6488
6491
|
var CardHeader = function (_a) {
|
|
@@ -6493,16 +6496,16 @@ var CardFooter = function (_a) {
|
|
|
6493
6496
|
var children = _a.children;
|
|
6494
6497
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6495
6498
|
};
|
|
6496
|
-
var templateObject_1$
|
|
6499
|
+
var templateObject_1$1X;
|
|
6497
6500
|
|
|
6498
|
-
var Body$1 = newStyled.div(templateObject_1$
|
|
6501
|
+
var Body$1 = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
6499
6502
|
var CardBody$1 = function (_a) {
|
|
6500
6503
|
var children = _a.children;
|
|
6501
6504
|
return jsxRuntime.jsx(Body$1, { children: children }, void 0);
|
|
6502
6505
|
};
|
|
6503
|
-
var templateObject_1$
|
|
6506
|
+
var templateObject_1$1W;
|
|
6504
6507
|
|
|
6505
|
-
var Container$
|
|
6508
|
+
var Container$1c = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
6506
6509
|
var flex = _a.flex;
|
|
6507
6510
|
return flex &&
|
|
6508
6511
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6517,23 +6520,23 @@ var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = _
|
|
|
6517
6520
|
var Card$2 = function (_a) {
|
|
6518
6521
|
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;
|
|
6519
6522
|
var theme = useTheme();
|
|
6520
|
-
return (jsxRuntime.jsx(Container$
|
|
6523
|
+
return (jsxRuntime.jsx(Container$1c, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6521
6524
|
};
|
|
6522
6525
|
var Card$3 = Object.assign(Card$2, {
|
|
6523
6526
|
Header: CardHeader,
|
|
6524
6527
|
Footer: CardFooter,
|
|
6525
6528
|
Body: CardBody$1,
|
|
6526
6529
|
});
|
|
6527
|
-
var templateObject_1$
|
|
6530
|
+
var templateObject_1$1V;
|
|
6528
6531
|
|
|
6529
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6530
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6531
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6532
|
+
var StyledWrapper = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
6533
|
+
var StyledContainer = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6534
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
6532
6535
|
var color = _a.color;
|
|
6533
6536
|
return color;
|
|
6534
6537
|
});
|
|
6535
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6536
|
-
var templateObject_1$
|
|
6538
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6539
|
+
var templateObject_1$1U, templateObject_2$1o, templateObject_3$16, templateObject_4$U;
|
|
6537
6540
|
|
|
6538
6541
|
var Minimalistic = function (_a) {
|
|
6539
6542
|
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;
|
|
@@ -6541,28 +6544,28 @@ var Minimalistic = function (_a) {
|
|
|
6541
6544
|
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));
|
|
6542
6545
|
};
|
|
6543
6546
|
|
|
6544
|
-
var Container$
|
|
6545
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6546
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6547
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6547
|
+
var Container$1b = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6548
|
+
var Title$9 = newStyled.h1(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
6549
|
+
var Details$1 = newStyled.span(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6550
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$T || (templateObject_4$T = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
6548
6551
|
var Simple = function (_a) {
|
|
6549
6552
|
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;
|
|
6550
6553
|
var theme = useTheme();
|
|
6551
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
6554
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$1b, { 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));
|
|
6552
6555
|
};
|
|
6553
|
-
var templateObject_1$
|
|
6556
|
+
var templateObject_1$1T, templateObject_2$1n, templateObject_3$15, templateObject_4$T;
|
|
6554
6557
|
|
|
6555
6558
|
var Bundle = {
|
|
6556
6559
|
Minimalistic: Minimalistic,
|
|
6557
6560
|
Simple: Simple,
|
|
6558
6561
|
};
|
|
6559
6562
|
|
|
6560
|
-
var Container$
|
|
6563
|
+
var Container$1a = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
6561
6564
|
var displayBNPL = _a.displayBNPL;
|
|
6562
6565
|
return (displayBNPL ? 'flex' : 'none');
|
|
6563
6566
|
});
|
|
6564
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6565
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6567
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"])));
|
|
6568
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$14 || (templateObject_3$14 = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6566
6569
|
var BuyNowPayLater = function (_a) {
|
|
6567
6570
|
var _b;
|
|
6568
6571
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize, _f = _a.bnplWithAfterPay, bnplWithAfterPay = _f === void 0 ? false : _f, textTemplate = _a.textTemplate;
|
|
@@ -6582,48 +6585,48 @@ var BuyNowPayLater = function (_a) {
|
|
|
6582
6585
|
else {
|
|
6583
6586
|
dynamicText = "or 4 interest-free payments of ";
|
|
6584
6587
|
}
|
|
6585
|
-
return (jsxRuntime.jsx(Container$
|
|
6588
|
+
return (jsxRuntime.jsx(Container$1a, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: [jsxRuntime.jsxs("div", { children: [dynamicText, jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold", style: {
|
|
6586
6589
|
display: 'inline',
|
|
6587
6590
|
fontSize: fontSize,
|
|
6588
6591
|
paddingLeft: '0.25rem',
|
|
6589
6592
|
paddingRight: '0.25rem',
|
|
6590
6593
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsxRuntime.jsx(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsxRuntime.jsx(IconComponent, { width: !bnplWithAfterPay ? 3.2 : 5.3, height: 2, fill: iconColor, style: { position: 'relative', left: bnplWithAfterPay ? '1rem' : '0' } }, void 0) }), void 0))] }), void 0) }), void 0));
|
|
6591
6594
|
};
|
|
6592
|
-
var templateObject_1$
|
|
6595
|
+
var templateObject_1$1S, templateObject_2$1m, templateObject_3$14;
|
|
6593
6596
|
|
|
6594
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6597
|
+
var Text$6 = newStyled.span(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6595
6598
|
var Title$8 = function (_a) {
|
|
6596
6599
|
var title = _a.title;
|
|
6597
6600
|
var theme = useTheme();
|
|
6598
6601
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6599
6602
|
};
|
|
6600
|
-
var templateObject_1$
|
|
6603
|
+
var templateObject_1$1R;
|
|
6601
6604
|
|
|
6602
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6605
|
+
var P$4 = newStyled.p(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6603
6606
|
var Promo = function (_a) {
|
|
6604
6607
|
var text = _a.text;
|
|
6605
6608
|
var theme = useTheme();
|
|
6606
6609
|
return (jsxRuntime.jsx(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6607
6610
|
};
|
|
6608
|
-
var templateObject_1$
|
|
6611
|
+
var templateObject_1$1Q;
|
|
6609
6612
|
|
|
6610
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6613
|
+
var Text$5 = newStyled.span(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6611
6614
|
var Description$1 = function (_a) {
|
|
6612
6615
|
var text = _a.text;
|
|
6613
6616
|
var theme = useTheme();
|
|
6614
6617
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6615
6618
|
};
|
|
6616
|
-
var templateObject_1$
|
|
6619
|
+
var templateObject_1$1P;
|
|
6617
6620
|
|
|
6618
|
-
var Container$
|
|
6621
|
+
var Container$19 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6619
6622
|
var CloseButton$1 = function (_a) {
|
|
6620
6623
|
var onClick = _a.onClick, size = _a.size;
|
|
6621
6624
|
var theme = useTheme();
|
|
6622
|
-
return (jsxRuntime.jsx(Container$
|
|
6625
|
+
return (jsxRuntime.jsx(Container$19, __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));
|
|
6623
6626
|
};
|
|
6624
|
-
var templateObject_1$
|
|
6627
|
+
var templateObject_1$1O;
|
|
6625
6628
|
|
|
6626
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6629
|
+
var Text$4 = newStyled.h3(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
6627
6630
|
var backgroundColor = _a.backgroundColor;
|
|
6628
6631
|
return backgroundColor;
|
|
6629
6632
|
}, function (_a) {
|
|
@@ -6638,7 +6641,7 @@ var OfferBanner = function (_a) {
|
|
|
6638
6641
|
var theme = useTheme();
|
|
6639
6642
|
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));
|
|
6640
6643
|
};
|
|
6641
|
-
var templateObject_1$
|
|
6644
|
+
var templateObject_1$1N;
|
|
6642
6645
|
|
|
6643
6646
|
var CartProductItem = {
|
|
6644
6647
|
Title: Title$8,
|
|
@@ -6648,20 +6651,20 @@ var CartProductItem = {
|
|
|
6648
6651
|
CloseButton: CloseButton$1,
|
|
6649
6652
|
};
|
|
6650
6653
|
|
|
6651
|
-
var Container$
|
|
6652
|
-
var MobileContainer = newStyled(Container$
|
|
6653
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6654
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6655
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6656
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6657
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6658
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6654
|
+
var Container$18 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
6655
|
+
var MobileContainer = newStyled(Container$18)(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6656
|
+
var DollarPart = newStyled.span(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6657
|
+
var ClubMembersText = newStyled.span(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6658
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$H || (templateObject_5$H = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6659
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$A || (templateObject_6$A = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6660
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$t || (templateObject_7$t = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6661
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$m || (templateObject_8$m = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6659
6662
|
var ClubPriceLabel = function (_a) {
|
|
6660
6663
|
var clubPrice = _a.clubPrice;
|
|
6661
6664
|
var isMobile = useWindowDimensions().isMobile;
|
|
6662
|
-
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$
|
|
6665
|
+
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$18, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6663
6666
|
};
|
|
6664
|
-
var templateObject_1$
|
|
6667
|
+
var templateObject_1$1M, templateObject_2$1l, templateObject_3$13, templateObject_4$S, templateObject_5$H, templateObject_6$A, templateObject_7$t, templateObject_8$m;
|
|
6665
6668
|
|
|
6666
6669
|
var Spacing = function (_a) {
|
|
6667
6670
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6669,10 +6672,10 @@ var Spacing = function (_a) {
|
|
|
6669
6672
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6670
6673
|
};
|
|
6671
6674
|
|
|
6672
|
-
var Container$
|
|
6673
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6674
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6675
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6675
|
+
var Container$17 = newStyled('div')(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6676
|
+
var Content$2 = newStyled('div')(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6677
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6678
|
+
var Bar$2 = newStyled('div')(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6676
6679
|
var index = _a.index;
|
|
6677
6680
|
return "".concat(6 + 3 * index, "px");
|
|
6678
6681
|
}, function (_a) {
|
|
@@ -6681,12 +6684,12 @@ var Bar$2 = newStyled('div')(templateObject_4$Q || (templateObject_4$Q = __makeT
|
|
|
6681
6684
|
});
|
|
6682
6685
|
var StrengthBars = function (_a) {
|
|
6683
6686
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6684
|
-
return (jsxRuntime.jsxs(Container$
|
|
6687
|
+
return (jsxRuntime.jsxs(Container$17, __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));
|
|
6685
6688
|
};
|
|
6686
|
-
var templateObject_1$
|
|
6689
|
+
var templateObject_1$1L, templateObject_2$1k, templateObject_3$12, templateObject_4$R;
|
|
6687
6690
|
|
|
6688
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6689
|
-
var templateObject_1$
|
|
6691
|
+
var Benefit$2 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
6692
|
+
var templateObject_1$1K;
|
|
6690
6693
|
|
|
6691
6694
|
var style = ".benefit{font-size:14px;line-height:22px;display:inline-block;margin:0;@media screen and (max-width:768px){font-size:12px;line-height:16px;}}";
|
|
6692
6695
|
|
|
@@ -6708,10 +6711,10 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6708
6711
|
|
|
6709
6712
|
var STARTS_NUMBER = 5;
|
|
6710
6713
|
|
|
6711
|
-
var Container$
|
|
6712
|
-
var templateObject_1$
|
|
6714
|
+
var Container$16 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6715
|
+
var templateObject_1$1J;
|
|
6713
6716
|
|
|
6714
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6717
|
+
var StarContainer = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6715
6718
|
var marginRight = _a.marginRight;
|
|
6716
6719
|
return marginRight;
|
|
6717
6720
|
});
|
|
@@ -6723,11 +6726,11 @@ var StarList = function (_a) {
|
|
|
6723
6726
|
width: theme.component.stars.element[size].width,
|
|
6724
6727
|
height: theme.component.stars.element[size].height,
|
|
6725
6728
|
};
|
|
6726
|
-
return (jsxRuntime.jsx(Container$
|
|
6729
|
+
return (jsxRuntime.jsx(Container$16, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6727
6730
|
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)));
|
|
6728
6731
|
}) }, void 0));
|
|
6729
6732
|
};
|
|
6730
|
-
var templateObject_1$
|
|
6733
|
+
var templateObject_1$1I;
|
|
6731
6734
|
|
|
6732
6735
|
/* base styles & size variants */
|
|
6733
6736
|
var LabelStyles = {
|
|
@@ -6775,7 +6778,7 @@ var LabelStyles = {
|
|
|
6775
6778
|
});
|
|
6776
6779
|
},
|
|
6777
6780
|
};
|
|
6778
|
-
var Container$
|
|
6781
|
+
var Container$15 = newStyled.a(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6779
6782
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6780
6783
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6781
6784
|
return [
|
|
@@ -6794,8 +6797,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6794
6797
|
}),
|
|
6795
6798
|
];
|
|
6796
6799
|
});
|
|
6797
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6798
|
-
var templateObject_1$
|
|
6800
|
+
var RatingLabel = newStyled.span(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6801
|
+
var templateObject_1$1H, templateObject_2$1j;
|
|
6799
6802
|
|
|
6800
6803
|
var Rating = function (_a) {
|
|
6801
6804
|
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;
|
|
@@ -6816,19 +6819,19 @@ var Rating = function (_a) {
|
|
|
6816
6819
|
href: reviewsContainerId,
|
|
6817
6820
|
}
|
|
6818
6821
|
: {};
|
|
6819
|
-
return (jsxRuntime.jsxs(Container$
|
|
6822
|
+
return (jsxRuntime.jsxs(Container$15, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6820
6823
|
};
|
|
6821
6824
|
|
|
6822
|
-
var ImageWrapper$4 = newStyled.div(templateObject_1$
|
|
6825
|
+
var ImageWrapper$4 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n"], ["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n"])), function (_a) {
|
|
6823
6826
|
var width = _a.width;
|
|
6824
6827
|
return width;
|
|
6825
6828
|
});
|
|
6826
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6827
|
-
var RatingText = newStyled.span(templateObject_3$
|
|
6829
|
+
var RatingWrapper = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"], ["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"])));
|
|
6830
|
+
var RatingText = newStyled.span(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"], ["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"])), function (_a) {
|
|
6828
6831
|
var fontSize = _a.fontSize;
|
|
6829
6832
|
return fontSize;
|
|
6830
6833
|
});
|
|
6831
|
-
var templateObject_1$
|
|
6834
|
+
var templateObject_1$1G, templateObject_2$1i, templateObject_3$11;
|
|
6832
6835
|
|
|
6833
6836
|
var OfferAtCartImage = function (_a) {
|
|
6834
6837
|
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width;
|
|
@@ -6875,9 +6878,9 @@ var getDropdownOptions = function (frequency) {
|
|
|
6875
6878
|
}); });
|
|
6876
6879
|
};
|
|
6877
6880
|
|
|
6878
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
6879
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_2$
|
|
6880
|
-
var templateObject_1$
|
|
6881
|
+
var Benefit$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6882
|
+
var BenefitText$1 = newStyled(Text$7)(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6883
|
+
var templateObject_1$1F, templateObject_2$1h;
|
|
6881
6884
|
|
|
6882
6885
|
var BenefitsList = function (_a) {
|
|
6883
6886
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6888,23 +6891,23 @@ var BenefitsList = function (_a) {
|
|
|
6888
6891
|
}) }, void 0));
|
|
6889
6892
|
};
|
|
6890
6893
|
|
|
6891
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6894
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6892
6895
|
var timerColor = _a.timerColor;
|
|
6893
6896
|
return timerColor || '';
|
|
6894
6897
|
});
|
|
6895
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
6898
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"], ["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"])), function (_a) {
|
|
6896
6899
|
var timerColor = _a.timerColor;
|
|
6897
6900
|
return timerColor || '';
|
|
6898
6901
|
});
|
|
6899
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3
|
|
6902
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
6900
6903
|
var theme = _a.theme;
|
|
6901
6904
|
return theme.colors.shades.white.color;
|
|
6902
6905
|
}, function (_a) {
|
|
6903
6906
|
var theme = _a.theme;
|
|
6904
6907
|
return theme.colors.shades.white.color;
|
|
6905
6908
|
});
|
|
6906
|
-
var Unit = newStyled.p(templateObject_4$
|
|
6907
|
-
var templateObject_1$
|
|
6909
|
+
var Unit = newStyled.p(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"], ["\n font-size: 8px;\n font-weight: 400;\n line-height: 8px;\n margin: 0;\n"])));
|
|
6910
|
+
var templateObject_1$1E, templateObject_2$1g, templateObject_3$10, templateObject_4$Q;
|
|
6908
6911
|
|
|
6909
6912
|
var HRS = 'HRS';
|
|
6910
6913
|
var MIN = 'MIN';
|
|
@@ -6945,7 +6948,7 @@ var Timer = function (_a) {
|
|
|
6945
6948
|
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
6946
6949
|
};
|
|
6947
6950
|
|
|
6948
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
6951
|
+
var TimerContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
6949
6952
|
var textPosition = _a.textPosition;
|
|
6950
6953
|
return textPosition;
|
|
6951
6954
|
}, function (_a) {
|
|
@@ -6958,7 +6961,7 @@ var TimerContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C =
|
|
|
6958
6961
|
var borderRadius = _a.borderRadius;
|
|
6959
6962
|
return borderRadius || '8px';
|
|
6960
6963
|
});
|
|
6961
|
-
var templateObject_1$
|
|
6964
|
+
var templateObject_1$1D;
|
|
6962
6965
|
|
|
6963
6966
|
var getDefaultCountdown = function () {
|
|
6964
6967
|
var tomorrowDate = new Date();
|
|
@@ -6974,7 +6977,7 @@ var HurryUp = function (_a) {
|
|
|
6974
6977
|
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));
|
|
6975
6978
|
};
|
|
6976
6979
|
|
|
6977
|
-
var Container$
|
|
6980
|
+
var Container$14 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
6978
6981
|
var size = _a.size;
|
|
6979
6982
|
return (size ? size : '100%');
|
|
6980
6983
|
}, function (_a) {
|
|
@@ -6989,7 +6992,7 @@ var borderSize = {
|
|
|
6989
6992
|
large: '3px',
|
|
6990
6993
|
};
|
|
6991
6994
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
6992
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
6995
|
+
var StyledSpinner = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
6993
6996
|
var size = _a.size;
|
|
6994
6997
|
return borderSize[size];
|
|
6995
6998
|
}, function (_a) {
|
|
@@ -7002,29 +7005,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1e || (templateObject_2$1e =
|
|
|
7002
7005
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
7003
7006
|
return duration;
|
|
7004
7007
|
});
|
|
7005
|
-
var templateObject_1$
|
|
7008
|
+
var templateObject_1$1C, templateObject_2$1f;
|
|
7006
7009
|
|
|
7007
7010
|
var Spinner = function (_a) {
|
|
7008
7011
|
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;
|
|
7009
|
-
return (jsxRuntime.jsx(Container$
|
|
7012
|
+
return (jsxRuntime.jsx(Container$14, __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));
|
|
7010
7013
|
};
|
|
7011
7014
|
|
|
7012
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
7013
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
7014
|
-
var templateObject_1$
|
|
7015
|
+
var ProgressContainer = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
7016
|
+
var ProgressFiller = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
7017
|
+
var templateObject_1$1B, templateObject_2$1e;
|
|
7015
7018
|
|
|
7016
7019
|
var ProgressBar$1 = function (_a) {
|
|
7017
7020
|
var progress = _a.progress, hide = _a.hide;
|
|
7018
7021
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
7019
7022
|
};
|
|
7020
7023
|
|
|
7021
|
-
var Container$
|
|
7022
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
7023
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3
|
|
7024
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
7025
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
7026
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
7027
|
-
var templateObject_1$
|
|
7024
|
+
var Container$13 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
7025
|
+
var HTMLVideo = newStyled.video(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
7026
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
7027
|
+
var PlayContainer = newStyled.div(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
7028
|
+
var PauseContainer = newStyled.div(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
7029
|
+
var MuteButton = newStyled.button(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
7030
|
+
var templateObject_1$1A, templateObject_2$1d, templateObject_3$$, templateObject_4$P, templateObject_5$G, templateObject_6$z;
|
|
7028
7031
|
|
|
7029
7032
|
var Video$1 = function (_a) {
|
|
7030
7033
|
var _b, _c, _d, _e;
|
|
@@ -7074,14 +7077,14 @@ var Video$1 = function (_a) {
|
|
|
7074
7077
|
setVideoProgress(videoRef.current.currentTime);
|
|
7075
7078
|
}
|
|
7076
7079
|
};
|
|
7077
|
-
return (jsxRuntime.jsxs(Container$
|
|
7080
|
+
return (jsxRuntime.jsxs(Container$13, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxRuntime.jsxs(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({}, rest, { muted: isMuted, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
7078
7081
|
};
|
|
7079
7082
|
|
|
7080
|
-
var LikeCount = newStyled.span(templateObject_1$
|
|
7083
|
+
var LikeCount = newStyled.span(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n color: ", ";\n font-weight: 600;\n\n &.like-count {\n transition: color 0.2s ease;\n }\n"])), function (_a) {
|
|
7081
7084
|
var theme = _a.theme;
|
|
7082
7085
|
return theme.colors.shades.black.color;
|
|
7083
7086
|
});
|
|
7084
|
-
var LikeBtnContainer = newStyled.button(templateObject_2$
|
|
7087
|
+
var LikeBtnContainer = newStyled.button(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n position: ", ";\n top: ", ";\n right: ", ";\n z-index: ", ";\n padding: ", ";\n box-sizing: ", ";\n background-color: transparent;\n border: none;\n"], ["\n position: ", ";\n top: ", ";\n right: ", ";\n z-index: ", ";\n padding: ", ";\n box-sizing: ", ";\n background-color: transparent;\n border: none;\n"])), function (_a) {
|
|
7085
7088
|
var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
|
|
7086
7089
|
return position;
|
|
7087
7090
|
}, function (_a) {
|
|
@@ -7100,7 +7103,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1b || (templateObject_2
|
|
|
7100
7103
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
7101
7104
|
return boxSizing;
|
|
7102
7105
|
});
|
|
7103
|
-
var templateObject_1$
|
|
7106
|
+
var templateObject_1$1z, templateObject_2$1c;
|
|
7104
7107
|
|
|
7105
7108
|
var getStylesBySize$c = function (size) {
|
|
7106
7109
|
switch (size) {
|
|
@@ -7121,7 +7124,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7121
7124
|
};
|
|
7122
7125
|
}
|
|
7123
7126
|
};
|
|
7124
|
-
var Container$
|
|
7127
|
+
var Container$12 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n box-shadow: ", ";\n\n padding: ", ";\n gap: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
7125
7128
|
var backgroundColor = _a.backgroundColor;
|
|
7126
7129
|
return backgroundColor;
|
|
7127
7130
|
}, function (_a) {
|
|
@@ -7162,9 +7165,9 @@ var IconButton = function (_a) {
|
|
|
7162
7165
|
var _b, _c;
|
|
7163
7166
|
var children = _a.children, disabled = _a.disabled, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d, onClick = _a.onClick, backgroundColor = _a.backgroundColor, _e = _a.dataTestId, dataTestId = _e === void 0 ? 'Container' : _e, _f = _a.hasText, hasText = _f === void 0 ? false : _f, boxShadow = _a.boxShadow, _g = _a.rounded, rounded = _g === void 0 ? true : _g, width = _a.width, border = _a.border;
|
|
7164
7167
|
var theme = useTheme();
|
|
7165
|
-
return (jsxRuntime.jsx(Container$
|
|
7168
|
+
return (jsxRuntime.jsx(Container$12, __assign$1({ border: border, width: width, className: disabled ? 'disabled' : '', backgroundColor: (_b = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.active) !== null && _b !== void 0 ? _b : theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: (_c = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.hover) !== null && _c !== void 0 ? _c : theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": dataTestId, onClick: disabled ? function () { } : onClick, hasText: hasText, boxShadow: boxShadow, rounded: rounded }, { children: children }), void 0));
|
|
7166
7169
|
};
|
|
7167
|
-
var templateObject_1$
|
|
7170
|
+
var templateObject_1$1y;
|
|
7168
7171
|
|
|
7169
7172
|
var LikeButton = function (_a) {
|
|
7170
7173
|
var _b;
|
|
@@ -7177,11 +7180,11 @@ var LikeButton = function (_a) {
|
|
|
7177
7180
|
return (jsxRuntime.jsx(LikeBtnContainer, __assign$1({ className: className }, containerProps, { children: jsxRuntime.jsxs(IconButton, __assign$1({ onClick: onClick, backgroundColor: background, hasText: !!likes, boxShadow: "0 6px 16px rgba(0, 0, 0, 0.12)" }, { children: [jsxRuntime.jsx(Icon$1, { name: isLiked ? 'actions/like_solid' : 'actions/like', fill: isLiked ? iconFill.solid : (_b = iconFill.regular) !== null && _b !== void 0 ? _b : iconFill.solid, width: "24px", height: "24px" }, void 0), !!likes && jsxRuntime.jsx(LikeCount, __assign$1({ className: "like-count" }, { children: likes }), void 0)] }), isLiked.toString()) }), void 0));
|
|
7178
7181
|
};
|
|
7179
7182
|
|
|
7180
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
7181
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
7182
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
7183
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
7184
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
7183
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
7184
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
7185
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7186
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7187
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
7185
7188
|
var RegularPriceTag = function () {
|
|
7186
7189
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
7187
7190
|
};
|
|
@@ -7231,11 +7234,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
7231
7234
|
: exports.ComponentSize.XSmall;
|
|
7232
7235
|
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));
|
|
7233
7236
|
};
|
|
7234
|
-
return (jsxRuntime.jsxs(Container$
|
|
7237
|
+
return (jsxRuntime.jsxs(Container$1p, __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, { label: theme.label.member }, 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]
|
|
7235
7238
|
? finalPriceArray[0]
|
|
7236
7239
|
: (_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, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7237
7240
|
};
|
|
7238
|
-
var templateObject_1$
|
|
7241
|
+
var templateObject_1$1x, templateObject_2$1b, templateObject_3$_, templateObject_4$O, templateObject_5$F;
|
|
7239
7242
|
|
|
7240
7243
|
var STYLES_BY_THEME = {
|
|
7241
7244
|
TheSpaDr: {
|
|
@@ -7308,10 +7311,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7308
7311
|
height: height,
|
|
7309
7312
|
});
|
|
7310
7313
|
});
|
|
7311
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
7312
|
-
var Container$
|
|
7313
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
7314
|
-
var Title$7 = newStyled.h2(templateObject_4$
|
|
7314
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
7315
|
+
var Container$11 = newStyled.a(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\n }\n"])));
|
|
7316
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"])));
|
|
7317
|
+
var Title$7 = newStyled.h2(templateObject_4$N || (templateObject_4$N = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
7315
7318
|
var theme = _a.theme;
|
|
7316
7319
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
7317
7320
|
}, function (_a) {
|
|
@@ -7362,17 +7365,17 @@ var getStylesBySize$b = function (size) {
|
|
|
7362
7365
|
};
|
|
7363
7366
|
}
|
|
7364
7367
|
};
|
|
7365
|
-
var TopTagContainer$9 = newStyled.div(templateObject_5$
|
|
7368
|
+
var TopTagContainer$9 = newStyled.div(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7366
7369
|
var style = _a.style;
|
|
7367
7370
|
return style.width;
|
|
7368
7371
|
});
|
|
7369
|
-
var BottomTagContainer$9 = newStyled.div(templateObject_6$
|
|
7372
|
+
var BottomTagContainer$9 = newStyled.div(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7370
7373
|
var style = _a.style;
|
|
7371
7374
|
return style.width;
|
|
7372
7375
|
});
|
|
7373
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
7374
|
-
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$
|
|
7375
|
-
var templateObject_1$
|
|
7376
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7377
|
+
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7378
|
+
var templateObject_1$1w, templateObject_2$1a, templateObject_3$Z, templateObject_4$N, templateObject_5$E, templateObject_6$y, templateObject_7$s, templateObject_8$l;
|
|
7376
7379
|
|
|
7377
7380
|
var ProductItemMobile = function (_a) {
|
|
7378
7381
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7464,12 +7467,12 @@ var ProductItemMobile = function (_a) {
|
|
|
7464
7467
|
setIsLiked(function (prev) { return !prev; });
|
|
7465
7468
|
likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.onClick(e);
|
|
7466
7469
|
};
|
|
7467
|
-
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
7470
|
+
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$11, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!likeBtn && (jsx(LikeButton, { isLiked: isLiked, likes: likesCount, onClick: handleLikeClick, colors: {
|
|
7468
7471
|
background: {
|
|
7469
7472
|
active: (_f = (_e = (_d = likeBtn.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e.active) !== null && _f !== void 0 ? _f : theme.colors.shades.white.color,
|
|
7470
7473
|
hover: (_m = (_j = (_h = (_g = likeBtn.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h.hover) !== null && _j !== void 0 ? _j : (_l = (_k = likeBtn.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l.active) !== null && _m !== void 0 ? _m : theme.colors.shades.white.color,
|
|
7471
7474
|
},
|
|
7472
|
-
} }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$
|
|
7475
|
+
} }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$11, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName, "data-testid": "product-card-title" }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom && !ratingOnTop ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsxs(MarginTopContainer$1, __assign$1({ style: { marginTop: (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? 0 : 8 } }, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5)] }), void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [!(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubMember) && PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$3, __assign$1({}, discountTag, { size: exports.ComponentSize.Medium, style: {
|
|
7473
7476
|
letterSpacing: '-0.05rem',
|
|
7474
7477
|
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), !ratingOnTop && jsx(RatingDisplay, {}, void 0)] }, void 0)), !!onClickBottomButton && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsxs(IconButton, __assign$1({ size: exports.ComponentSize.Small, width: "100%", onClick: function (e) {
|
|
7475
7478
|
e.preventDefault();
|
|
@@ -7489,10 +7492,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7489
7492
|
height: height,
|
|
7490
7493
|
});
|
|
7491
7494
|
});
|
|
7492
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
7493
|
-
var Container
|
|
7494
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
7495
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
7495
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
7496
|
+
var Container$10 = newStyled.a(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
7497
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
7498
|
+
var Title$6 = newStyled.p(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
7496
7499
|
var getStylesBySize$a = function (size) {
|
|
7497
7500
|
switch (size) {
|
|
7498
7501
|
case exports.ComponentSize.Medium:
|
|
@@ -7518,16 +7521,16 @@ var getStylesBySize$a = function (size) {
|
|
|
7518
7521
|
};
|
|
7519
7522
|
}
|
|
7520
7523
|
};
|
|
7521
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
7524
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7522
7525
|
var style = _a.style;
|
|
7523
7526
|
return style.width;
|
|
7524
7527
|
});
|
|
7525
|
-
var TopRightTagContainer$3 = newStyled.div(templateObject_6$
|
|
7526
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_7$
|
|
7528
|
+
var TopRightTagContainer$3 = newStyled.div(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
7529
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_7$r || (templateObject_7$r = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
7527
7530
|
var style = _a.style;
|
|
7528
7531
|
return style.width;
|
|
7529
7532
|
});
|
|
7530
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
7533
|
+
var MarginTopContainer = newStyled.div(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7531
7534
|
var ProductItemTK = function (_a) {
|
|
7532
7535
|
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 ? {
|
|
7533
7536
|
display: false,
|
|
@@ -7571,26 +7574,26 @@ var ProductItemTK = function (_a) {
|
|
|
7571
7574
|
: undefined }, void 0));
|
|
7572
7575
|
};
|
|
7573
7576
|
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)); };
|
|
7574
|
-
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container
|
|
7577
|
+
return (jsxs(ProdCardContainer$3, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$10, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag || !!topRightTag ? (jsxs(ImageContainer$5, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%", loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer$3, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async' }, void 0)), imageHover ? (jsx(ImageHoverContainer$2, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$10, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
7575
7578
|
// @ts-ignore
|
|
7576
7579
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
7577
7580
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
7578
7581
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7579
7582
|
} }, { 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));
|
|
7580
7583
|
};
|
|
7581
|
-
var templateObject_1$
|
|
7584
|
+
var templateObject_1$1v, templateObject_2$19, templateObject_3$Y, templateObject_4$M, templateObject_5$D, templateObject_6$x, templateObject_7$r, templateObject_8$k;
|
|
7582
7585
|
|
|
7583
|
-
var Container
|
|
7586
|
+
var Container$$ = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
7584
7587
|
function withProductGrid(ProductItemComponent, data) {
|
|
7585
7588
|
function WithProductGrid(props) {
|
|
7586
|
-
return (jsxRuntime.jsx(Container
|
|
7589
|
+
return (jsxRuntime.jsx(Container$$, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
7587
7590
|
}
|
|
7588
7591
|
/* istanbul ignore next */
|
|
7589
7592
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
7590
7593
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7591
7594
|
return WithProductGrid;
|
|
7592
7595
|
}
|
|
7593
|
-
var templateObject_1$
|
|
7596
|
+
var templateObject_1$1u;
|
|
7594
7597
|
|
|
7595
7598
|
var Collection = {
|
|
7596
7599
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7598,11 +7601,11 @@ var Collection = {
|
|
|
7598
7601
|
ProductItemTK: ProductItemTK,
|
|
7599
7602
|
};
|
|
7600
7603
|
|
|
7601
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7602
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7603
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
7604
|
-
var Span = newStyled.span(templateObject_4$
|
|
7605
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
7604
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7605
|
+
newStyled(lt.Label)(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7606
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
7607
|
+
var Span = newStyled.span(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7608
|
+
var OptionsContainer = newStyled.div(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
7606
7609
|
var Label$5 = function (_a) {
|
|
7607
7610
|
var label = _a.label, values = _a.values;
|
|
7608
7611
|
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -7620,7 +7623,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7620
7623
|
Option: Option,
|
|
7621
7624
|
OptionsContainer: OptionsContainer,
|
|
7622
7625
|
});
|
|
7623
|
-
var templateObject_1$
|
|
7626
|
+
var templateObject_1$1t, templateObject_2$18, templateObject_3$X, templateObject_4$L, templateObject_5$C;
|
|
7624
7627
|
|
|
7625
7628
|
var OneColorSelector = function (_a) {
|
|
7626
7629
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7661,21 +7664,21 @@ var OutOfStock = function (_a) {
|
|
|
7661
7664
|
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));
|
|
7662
7665
|
};
|
|
7663
7666
|
|
|
7664
|
-
var Container$
|
|
7667
|
+
var Container$_ = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
7665
7668
|
var borderColor = _a.borderColor;
|
|
7666
7669
|
return borderColor;
|
|
7667
7670
|
}, function (_a) {
|
|
7668
7671
|
var noStock = _a.noStock;
|
|
7669
7672
|
return (noStock ? '0.4' : '1');
|
|
7670
7673
|
});
|
|
7671
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7674
|
+
var Image$2 = newStyled.img(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7672
7675
|
var PatternSelector = function (_a) {
|
|
7673
7676
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7674
7677
|
var theme = useTheme();
|
|
7675
7678
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7676
|
-
return (jsxRuntime.jsx(Container$
|
|
7679
|
+
return (jsxRuntime.jsx(Container$_, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7677
7680
|
};
|
|
7678
|
-
var templateObject_1$
|
|
7681
|
+
var templateObject_1$1s, templateObject_2$17;
|
|
7679
7682
|
|
|
7680
7683
|
var renderOptions$1 = function (options, showCross) {
|
|
7681
7684
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7703,10 +7706,10 @@ var ColorPickerWithTooltip = function (_a) {
|
|
|
7703
7706
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7704
7707
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7705
7708
|
var showCloseIcon = (tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {}).showCloseIcon;
|
|
7706
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7709
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7707
7710
|
return (jsxs(ColorPickerWrapper, __assign$1({ className: className, value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ showCloseIcon: showCloseIcon, position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7708
7711
|
};
|
|
7709
|
-
var templateObject_1$
|
|
7712
|
+
var templateObject_1$1r;
|
|
7710
7713
|
|
|
7711
7714
|
var renderOptions = function (selectedColor, options) {
|
|
7712
7715
|
if (options == null || options.length === 0) {
|
|
@@ -7744,21 +7747,21 @@ var MultiColorPicker = function (_a) {
|
|
|
7744
7747
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7745
7748
|
};
|
|
7746
7749
|
|
|
7747
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7748
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7749
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7750
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
7751
|
+
var Col$1 = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7752
|
+
var Row$2 = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", ";\n"])), function (props) {
|
|
7750
7753
|
return props.rightToLeft &&
|
|
7751
7754
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7752
7755
|
});
|
|
7753
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7754
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
7755
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7756
|
+
var H5 = newStyled.h5(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7757
|
+
var H3 = newStyled.h3(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7758
|
+
var FreeShipping = newStyled.span(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7756
7759
|
var CrossSellCheckbox = function (_a) {
|
|
7757
7760
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7758
7761
|
var theme = useTheme();
|
|
7759
7762
|
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, __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));
|
|
7760
7763
|
};
|
|
7761
|
-
var templateObject_1$
|
|
7764
|
+
var templateObject_1$1q, templateObject_2$16, templateObject_3$W, templateObject_4$K, templateObject_5$B, templateObject_6$w;
|
|
7762
7765
|
|
|
7763
7766
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7764
7767
|
__proto__: null,
|
|
@@ -7787,7 +7790,7 @@ var sizeMapper = (_a = {},
|
|
|
7787
7790
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7788
7791
|
_a[exports.ComponentSize.XXSmall] = 'small',
|
|
7789
7792
|
_a);
|
|
7790
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7793
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7791
7794
|
var wide = _a.wide;
|
|
7792
7795
|
return (wide ? '100%' : 'fit-content');
|
|
7793
7796
|
}, function (_a) {
|
|
@@ -7809,11 +7812,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1o || (templateObj
|
|
|
7809
7812
|
var theme = _a.theme;
|
|
7810
7813
|
return theme.colors.text.disabled;
|
|
7811
7814
|
});
|
|
7812
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7815
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7813
7816
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7814
7817
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7815
7818
|
});
|
|
7816
|
-
var templateObject_1$
|
|
7819
|
+
var templateObject_1$1p, templateObject_2$15;
|
|
7817
7820
|
|
|
7818
7821
|
var BaseCTA = function (_a) {
|
|
7819
7822
|
var _b, _c, _d;
|
|
@@ -7904,44 +7907,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7904
7907
|
} }), void 0));
|
|
7905
7908
|
};
|
|
7906
7909
|
|
|
7907
|
-
var Container$
|
|
7908
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
7909
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7910
|
-
var Details = newStyled.span(templateObject_4$
|
|
7910
|
+
var Container$Z = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
7911
|
+
var IconContainer$5 = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7912
|
+
var Text$3 = newStyled.p(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7913
|
+
var Details = newStyled.span(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7911
7914
|
var Note = function (_a) {
|
|
7912
7915
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7913
7916
|
var theme = useTheme();
|
|
7914
|
-
return (jsxRuntime.jsxs(Container$
|
|
7917
|
+
return (jsxRuntime.jsxs(Container$Z, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$5, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7915
7918
|
};
|
|
7916
|
-
var templateObject_1$
|
|
7919
|
+
var templateObject_1$1o, templateObject_2$14, templateObject_3$V, templateObject_4$J;
|
|
7917
7920
|
|
|
7918
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7921
|
+
var Title$5 = newStyled.h1(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
7919
7922
|
var theme = _a.theme;
|
|
7920
7923
|
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 ");
|
|
7921
7924
|
});
|
|
7922
|
-
var Line = newStyled.div(templateObject_2$
|
|
7923
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7925
|
+
var Line = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7926
|
+
var Row$1 = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
7924
7927
|
flexDirection: ['column', 'row'],
|
|
7925
7928
|
}));
|
|
7926
|
-
var Col = newStyled.div(templateObject_4$
|
|
7929
|
+
var Col = newStyled.div(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
7927
7930
|
margin: ['0', '0 1.25rem'],
|
|
7928
7931
|
marginBottom: ['1.875rem', '0'],
|
|
7929
7932
|
alignItems: ['center', 'flex-start'],
|
|
7930
7933
|
textAlign: ['center', 'inherit'],
|
|
7931
7934
|
width: ['100%', 'inherit'],
|
|
7932
7935
|
}));
|
|
7933
|
-
var IconContainer$4 = newStyled.div(templateObject_5$
|
|
7936
|
+
var IconContainer$4 = newStyled.div(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7934
7937
|
marginRight: ['0', '0.438rem'],
|
|
7935
7938
|
marginBottom: ['10px', '0'],
|
|
7936
7939
|
width: ['auto', '1.5rem'],
|
|
7937
7940
|
}));
|
|
7938
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7941
|
+
var SectionTitle = newStyled.h1(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7939
7942
|
display: ['block', 'flex'],
|
|
7940
7943
|
}), function (_a) {
|
|
7941
7944
|
var theme = _a.theme;
|
|
7942
7945
|
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 ");
|
|
7943
7946
|
});
|
|
7944
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7947
|
+
var SectionDetails = newStyled.p(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7945
7948
|
var theme = _a.theme;
|
|
7946
7949
|
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 ");
|
|
7947
7950
|
}, function (_a) {
|
|
@@ -7952,22 +7955,22 @@ var SectionDetails = newStyled.p(templateObject_7$p || (templateObject_7$p = __m
|
|
|
7952
7955
|
})
|
|
7953
7956
|
: '';
|
|
7954
7957
|
});
|
|
7955
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
7958
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
7956
7959
|
var DeliveryDetails = function (_a) {
|
|
7957
7960
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7958
7961
|
var theme = useTheme();
|
|
7959
7962
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7960
7963
|
};
|
|
7961
|
-
var templateObject_1$
|
|
7964
|
+
var templateObject_1$1n, templateObject_2$13, templateObject_3$U, templateObject_4$I, templateObject_5$A, templateObject_6$v, templateObject_7$q, templateObject_8$j;
|
|
7962
7965
|
|
|
7963
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7966
|
+
var Backdrop = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
7964
7967
|
var top = _a.top;
|
|
7965
7968
|
return top;
|
|
7966
7969
|
}, function (_a) {
|
|
7967
7970
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7968
7971
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7969
7972
|
});
|
|
7970
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7973
|
+
var Sidebar = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
7971
7974
|
var height = _a.height;
|
|
7972
7975
|
return height;
|
|
7973
7976
|
}, function (_a) {
|
|
@@ -8014,20 +8017,20 @@ var Drawer = function (_a) {
|
|
|
8014
8017
|
}, [isOpen, onClose, onOpen]);
|
|
8015
8018
|
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;
|
|
8016
8019
|
};
|
|
8017
|
-
var templateObject_1$
|
|
8020
|
+
var templateObject_1$1m, templateObject_2$12;
|
|
8018
8021
|
|
|
8019
8022
|
var TooltipArrow = function (_a) {
|
|
8020
8023
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
8021
8024
|
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));
|
|
8022
8025
|
};
|
|
8023
8026
|
|
|
8024
|
-
var List = newStyled.ul(templateObject_1$
|
|
8025
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
8026
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
8027
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
8028
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
8029
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
8030
|
-
var templateObject_1$
|
|
8027
|
+
var List = newStyled.ul(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
8028
|
+
var Item$2 = newStyled.li(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
8029
|
+
var DropdownWrapper = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
8030
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
8031
|
+
var StyledDropdown = newStyled.ul(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
8032
|
+
var DropdownItem = newStyled.li(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
8033
|
+
var templateObject_1$1l, templateObject_2$11, templateObject_3$T, templateObject_4$H, templateObject_5$z, templateObject_6$u;
|
|
8031
8034
|
|
|
8032
8035
|
var DropdownListIcons = function (_a) {
|
|
8033
8036
|
var items = _a.items;
|
|
@@ -8040,13 +8043,13 @@ var Dropdown = function (_a) {
|
|
|
8040
8043
|
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));
|
|
8041
8044
|
};
|
|
8042
8045
|
|
|
8043
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
8044
|
-
var DropdownLabel = newStyled.div(templateObject_2
|
|
8045
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
8046
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
8047
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
8048
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
8049
|
-
var templateObject_1$
|
|
8046
|
+
var DropdownContainer = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
8047
|
+
var DropdownLabel = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
8048
|
+
var SizeLabel = newStyled.span(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8049
|
+
var DetailLabel = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
8050
|
+
var DropdownOptions = newStyled.div(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
8051
|
+
var DropdownOption = newStyled.div(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
8052
|
+
var templateObject_1$1k, templateObject_2$10, templateObject_3$S, templateObject_4$G, templateObject_5$y, templateObject_6$t;
|
|
8050
8053
|
|
|
8051
8054
|
var SizeDropdown = function (_a) {
|
|
8052
8055
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8069,15 +8072,15 @@ var SizeDropdown = function (_a) {
|
|
|
8069
8072
|
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));
|
|
8070
8073
|
};
|
|
8071
8074
|
|
|
8072
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
8073
|
-
var DialogDropdownWrapper2 = newStyled.div(templateObject_2
|
|
8074
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_3$
|
|
8075
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
8076
|
+
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
8077
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) {
|
|
8075
8078
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
8076
8079
|
}, function (props) {
|
|
8077
8080
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8078
8081
|
});
|
|
8079
|
-
var DialogDropdownListItem = newStyled.li(templateObject_4$
|
|
8080
|
-
var DialogDropdownLink = newStyled.a(templateObject_5$
|
|
8082
|
+
var DialogDropdownListItem = newStyled.li(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
8083
|
+
var DialogDropdownLink = newStyled.a(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
8081
8084
|
var DropdownDialog = function (_a) {
|
|
8082
8085
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, containerPosRight = _b.containerPosRight, containerPosTop = _b.containerPosTop, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
|
|
8083
8086
|
var theme = useTheme$1();
|
|
@@ -8086,7 +8089,7 @@ var DropdownDialog = function (_a) {
|
|
|
8086
8089
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8087
8090
|
}) }), void 0) }), void 0));
|
|
8088
8091
|
};
|
|
8089
|
-
var templateObject_1$
|
|
8092
|
+
var templateObject_1$1j, templateObject_2$$, templateObject_3$R, templateObject_4$F, templateObject_5$x;
|
|
8090
8093
|
|
|
8091
8094
|
function FilteringDropdown(_a) {
|
|
8092
8095
|
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;
|
|
@@ -8119,29 +8122,29 @@ function FilteringDropdown(_a) {
|
|
|
8119
8122
|
}) }, void 0)] }), void 0));
|
|
8120
8123
|
}
|
|
8121
8124
|
|
|
8122
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
8123
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
8124
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
8125
|
-
var Container$
|
|
8125
|
+
var Title$4 = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
8126
|
+
var P$3 = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
8127
|
+
var ArrowContainer = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
8128
|
+
var Container$Y = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
8126
8129
|
var Accordion = function (_a) {
|
|
8127
8130
|
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;
|
|
8128
8131
|
var theme = useTheme();
|
|
8129
8132
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8130
|
-
return (jsxRuntime.jsxs(Container$
|
|
8133
|
+
return (jsxRuntime.jsxs(Container$Y, __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(P$3, __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));
|
|
8131
8134
|
};
|
|
8132
|
-
var templateObject_1$
|
|
8133
|
-
|
|
8134
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
8135
|
-
var Header$3 = newStyled.div(templateObject_2$
|
|
8136
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
8137
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
8138
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
8139
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
8140
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
8141
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
8135
|
+
var templateObject_1$1i, templateObject_2$_, templateObject_3$Q, templateObject_4$E;
|
|
8136
|
+
|
|
8137
|
+
var SectionContent = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
8138
|
+
var Header$3 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
8139
|
+
var MobileHeader = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
8140
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
8141
|
+
var H4 = newStyled.h4(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
8142
|
+
var FilterLink = newStyled.a(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
8143
|
+
var OptionContainer = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
8144
|
+
var ClearAll = newStyled.span(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
8142
8145
|
var MobileFooter = newStyled.div(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
8143
8146
|
var MobileClearContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
8144
|
-
var templateObject_1$
|
|
8147
|
+
var templateObject_1$1h, templateObject_2$Z, templateObject_3$P, templateObject_4$D, templateObject_5$w, templateObject_6$s, templateObject_7$p, templateObject_8$i, templateObject_9$a, templateObject_10$9;
|
|
8145
8148
|
|
|
8146
8149
|
var getStylesBySize$9 = function (size, theme) {
|
|
8147
8150
|
switch (size) {
|
|
@@ -8206,9 +8209,9 @@ var SelectorSecondary = function (_a) {
|
|
|
8206
8209
|
} }), id: id }, void 0));
|
|
8207
8210
|
};
|
|
8208
8211
|
|
|
8209
|
-
var UL = newStyled.ul(templateObject_1$
|
|
8210
|
-
var LI = newStyled.li(templateObject_2$
|
|
8211
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
8212
|
+
var UL = newStyled.ul(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
8213
|
+
var LI = newStyled.li(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
8214
|
+
var CloseIconContainer = newStyled.div(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
8212
8215
|
var Tags = function (_a) {
|
|
8213
8216
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
8214
8217
|
var theme = useTheme();
|
|
@@ -8216,7 +8219,7 @@ var Tags = function (_a) {
|
|
|
8216
8219
|
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));
|
|
8217
8220
|
}) }), void 0));
|
|
8218
8221
|
};
|
|
8219
|
-
var templateObject_1$
|
|
8222
|
+
var templateObject_1$1g, templateObject_2$Y, templateObject_3$O;
|
|
8220
8223
|
|
|
8221
8224
|
var Filters = function (_a) {
|
|
8222
8225
|
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;
|
|
@@ -8352,8 +8355,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8352
8355
|
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));
|
|
8353
8356
|
};
|
|
8354
8357
|
|
|
8355
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
8356
|
-
var Container$
|
|
8358
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
8359
|
+
var Container$X = newStyled.div(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
8357
8360
|
var FitGuarantee = function (_a) {
|
|
8358
8361
|
var _b;
|
|
8359
8362
|
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;
|
|
@@ -8364,17 +8367,17 @@ var FitGuarantee = function (_a) {
|
|
|
8364
8367
|
console.error('Icon', iconName, 'not found');
|
|
8365
8368
|
return null;
|
|
8366
8369
|
}
|
|
8367
|
-
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$
|
|
8370
|
+
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$X, __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$X, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
8368
8371
|
margin: '0.1rem 0',
|
|
8369
8372
|
width: '100%',
|
|
8370
8373
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
8371
8374
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8372
8375
|
} }, { 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));
|
|
8373
8376
|
};
|
|
8374
|
-
var templateObject_1$
|
|
8377
|
+
var templateObject_1$1f, templateObject_2$X;
|
|
8375
8378
|
|
|
8376
|
-
var Container$
|
|
8377
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
8379
|
+
var Container$W = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
8380
|
+
var P$2 = newStyled.p(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
8378
8381
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8379
8382
|
border: 'none',
|
|
8380
8383
|
background: 'transparent',
|
|
@@ -8387,9 +8390,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
8387
8390
|
var FitPredictor = function (_a) {
|
|
8388
8391
|
var onClick = _a.onClick;
|
|
8389
8392
|
var theme = useTheme();
|
|
8390
|
-
return (jsxs(Container$
|
|
8393
|
+
return (jsxs(Container$W, __assign$1({ theme: theme }, { children: [jsx(Container$W, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
8391
8394
|
};
|
|
8392
|
-
var templateObject_1$
|
|
8395
|
+
var templateObject_1$1e, templateObject_2$W;
|
|
8393
8396
|
|
|
8394
8397
|
var Button$8 = newStyled.button(function () { return ({
|
|
8395
8398
|
background: 'transparent',
|
|
@@ -12633,14 +12636,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12633
12636
|
return Slider;
|
|
12634
12637
|
}(React__default["default"].Component);
|
|
12635
12638
|
|
|
12636
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12639
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
12637
12640
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12638
12641
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12639
12642
|
}, function (_a) {
|
|
12640
12643
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12641
12644
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12642
12645
|
});
|
|
12643
|
-
var templateObject_1$
|
|
12646
|
+
var templateObject_1$1d;
|
|
12644
12647
|
|
|
12645
12648
|
var getStylesBySize$8 = function (size) {
|
|
12646
12649
|
// rem units
|
|
@@ -12699,7 +12702,7 @@ var SliderNavigation = function (_a) {
|
|
|
12699
12702
|
} }, { 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));
|
|
12700
12703
|
};
|
|
12701
12704
|
|
|
12702
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12705
|
+
var Image$1 = newStyled.img(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
12703
12706
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12704
12707
|
return borderRadiusVariant &&
|
|
12705
12708
|
"\n border-radius: 20px;\n ";
|
|
@@ -12717,7 +12720,7 @@ var Image$1 = newStyled.img(templateObject_1$1b || (templateObject_1$1b = __make
|
|
|
12717
12720
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12718
12721
|
: 'inherit';
|
|
12719
12722
|
});
|
|
12720
|
-
var templateObject_1$
|
|
12723
|
+
var templateObject_1$1c;
|
|
12721
12724
|
|
|
12722
12725
|
var ImageSmallPreview = function (_a) {
|
|
12723
12726
|
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;
|
|
@@ -12725,9 +12728,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12725
12728
|
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));
|
|
12726
12729
|
};
|
|
12727
12730
|
|
|
12728
|
-
var horizontalStyles = css(templateObject_1$
|
|
12729
|
-
var verticalStyles = css(templateObject_2$
|
|
12730
|
-
var Container$
|
|
12731
|
+
var horizontalStyles = css(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
12732
|
+
var verticalStyles = css(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
12733
|
+
var Container$V = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: ", ";\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
12731
12734
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12732
12735
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12733
12736
|
}, function (_a) {
|
|
@@ -12738,12 +12741,12 @@ var Container$U = newStyled.div(templateObject_3$M || (templateObject_3$M = __ma
|
|
|
12738
12741
|
return hasOverflowArrows &&
|
|
12739
12742
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12740
12743
|
});
|
|
12741
|
-
var Button$7 = newStyled.button(templateObject_4$
|
|
12742
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12743
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12744
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
12745
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
12746
|
-
var templateObject_1$
|
|
12744
|
+
var Button$7 = newStyled.button(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
12745
|
+
var ArrowsContainer = newStyled.div(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
12746
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
12747
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
12748
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
12749
|
+
var templateObject_1$1b, templateObject_2$V, templateObject_3$N, templateObject_4$C, templateObject_5$v, templateObject_6$r, templateObject_7$o, templateObject_8$h;
|
|
12747
12750
|
|
|
12748
12751
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12749
12752
|
var loading = 'eager';
|
|
@@ -12771,7 +12774,7 @@ var ImagePreviewList = function (_a) {
|
|
|
12771
12774
|
var element = document.querySelector(".imageListContainer");
|
|
12772
12775
|
element.scrollBy(0, 200);
|
|
12773
12776
|
};
|
|
12774
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
12777
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$V, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
12775
12778
|
arrowWidth: 0.75,
|
|
12776
12779
|
arrowHeight: 1.25,
|
|
12777
12780
|
arrowPadding: 1.625,
|
|
@@ -14371,40 +14374,40 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14371
14374
|
afterZoomOut: PropTypes.func
|
|
14372
14375
|
} : {};
|
|
14373
14376
|
|
|
14374
|
-
var Container$
|
|
14377
|
+
var Container$U = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
14375
14378
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14376
14379
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14377
14380
|
});
|
|
14378
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
14381
|
+
var TopTagContainer$7 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
14379
14382
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14380
14383
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
14381
14384
|
}, function (_a) {
|
|
14382
14385
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14383
14386
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
14384
14387
|
});
|
|
14385
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
14388
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
14386
14389
|
var isCTAHidden = _a.isCTAHidden;
|
|
14387
14390
|
return (isCTAHidden ? '60px' : '120px');
|
|
14388
14391
|
});
|
|
14389
|
-
var TopRightTagWrapper = newStyled.div(templateObject_4$
|
|
14390
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_5$
|
|
14391
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$
|
|
14392
|
-
var ImageStyled = newStyled(Image$3)(templateObject_7$
|
|
14392
|
+
var TopRightTagWrapper = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14393
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14394
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
14395
|
+
var ImageStyled = newStyled(Image$3)(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14393
14396
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14394
14397
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14395
14398
|
});
|
|
14396
|
-
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$
|
|
14399
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14397
14400
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14398
14401
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14399
14402
|
});
|
|
14400
|
-
var templateObject_1$
|
|
14403
|
+
var templateObject_1$1a, templateObject_2$U, templateObject_3$M, templateObject_4$B, templateObject_5$u, templateObject_6$q, templateObject_7$n, templateObject_8$g;
|
|
14401
14404
|
|
|
14402
14405
|
var ImageProductSlide$1 = function (_a) {
|
|
14403
14406
|
var _b;
|
|
14404
14407
|
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;
|
|
14405
14408
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14406
14409
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
14407
|
-
return (jsxRuntime.jsxs(Container$
|
|
14410
|
+
return (jsxRuntime.jsxs(Container$U, __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: {
|
|
14408
14411
|
alt: content.alt,
|
|
14409
14412
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
14410
14413
|
loading: 'eager',
|
|
@@ -14412,8 +14415,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14412
14415
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsxRuntime.jsx(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", decoding: "sync", isRatioSquare: isRatioSquare }, void 0)), jsxRuntime.jsx(TopTagContainer$7, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$7, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && (jsxRuntime.jsx(TopRightTagWrapper, { children: jsxRuntime.jsx(TopRightTagContainer$2, { children: topRightTag }, void 0) }, 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));
|
|
14413
14416
|
};
|
|
14414
14417
|
|
|
14415
|
-
var Container$
|
|
14416
|
-
var templateObject_1$
|
|
14418
|
+
var Container$T = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
14419
|
+
var templateObject_1$19;
|
|
14417
14420
|
|
|
14418
14421
|
var getInitialIndex = function (images, selectedValue) {
|
|
14419
14422
|
if (selectedValue) {
|
|
@@ -14439,10 +14442,10 @@ var ProductGallery = function (_a) {
|
|
|
14439
14442
|
setActiveIndex(index);
|
|
14440
14443
|
};
|
|
14441
14444
|
var selectedImage = images[activeIndex];
|
|
14442
|
-
return (jsxRuntime.jsxs(Container$
|
|
14445
|
+
return (jsxRuntime.jsxs(Container$T, { 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));
|
|
14443
14446
|
};
|
|
14444
14447
|
|
|
14445
|
-
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$
|
|
14448
|
+
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
14446
14449
|
var AmazonButton = function (_a) {
|
|
14447
14450
|
var onClick = _a.onClick;
|
|
14448
14451
|
return (jsxRuntime.jsx(StyledButton$3, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -14451,9 +14454,9 @@ var PaypalButton = function (_a) {
|
|
|
14451
14454
|
var onClick = _a.onClick;
|
|
14452
14455
|
return (jsxRuntime.jsx(StyledButton$3, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
14453
14456
|
};
|
|
14454
|
-
var templateObject_1$
|
|
14457
|
+
var templateObject_1$18;
|
|
14455
14458
|
|
|
14456
|
-
var Container$
|
|
14459
|
+
var Container$S = newStyled.div(function (props) { return ({
|
|
14457
14460
|
height: 'auto',
|
|
14458
14461
|
textAlign: 'center',
|
|
14459
14462
|
justifyContent: 'center',
|
|
@@ -14503,12 +14506,12 @@ var IconsWithTitle = function (_a) {
|
|
|
14503
14506
|
textAlign: 'center',
|
|
14504
14507
|
lineHeight: '18px',
|
|
14505
14508
|
};
|
|
14506
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
14509
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$S, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
14507
14510
|
};
|
|
14508
14511
|
|
|
14509
|
-
var Container$
|
|
14510
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
14511
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14512
|
+
var Container$R = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14513
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
14514
|
+
var StyledTitle = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14512
14515
|
var titlePosition = _a.titlePosition;
|
|
14513
14516
|
return titlePosition == 'center' &&
|
|
14514
14517
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14516,15 +14519,15 @@ var StyledTitle = newStyled.div(templateObject_3$K || (templateObject_3$K = __ma
|
|
|
14516
14519
|
var ImageCardWithDescription = function (_a) {
|
|
14517
14520
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
14518
14521
|
var isMobile = useWindowDimensions().isMobile;
|
|
14519
|
-
return (jsxRuntime.jsxs(Container$
|
|
14522
|
+
return (jsxRuntime.jsxs(Container$R, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
14520
14523
|
};
|
|
14521
|
-
var templateObject_1$
|
|
14524
|
+
var templateObject_1$17, templateObject_2$T, templateObject_3$L;
|
|
14522
14525
|
|
|
14523
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14526
|
+
var Label$4 = newStyled.span(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
14524
14527
|
var color = _a.color;
|
|
14525
14528
|
return color;
|
|
14526
14529
|
});
|
|
14527
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
14530
|
+
var MandatoryIcon = newStyled.span(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14528
14531
|
var color = _a.color;
|
|
14529
14532
|
return color;
|
|
14530
14533
|
});
|
|
@@ -14533,7 +14536,7 @@ var InputLabel = function (_a) {
|
|
|
14533
14536
|
var theme = useTheme();
|
|
14534
14537
|
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));
|
|
14535
14538
|
};
|
|
14536
|
-
var templateObject_1$
|
|
14539
|
+
var templateObject_1$16, templateObject_2$S;
|
|
14537
14540
|
|
|
14538
14541
|
var containerByStatus = function (theme, status) {
|
|
14539
14542
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -14542,12 +14545,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14542
14545
|
return theme.colors.semantic.urgent.color;
|
|
14543
14546
|
return '';
|
|
14544
14547
|
};
|
|
14545
|
-
var Container$
|
|
14548
|
+
var Container$Q = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14546
14549
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14547
14550
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14548
14551
|
});
|
|
14549
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14550
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14552
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
14553
|
+
var StyledInput = newStyled.input(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
14551
14554
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14552
14555
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14553
14556
|
}, function (_a) {
|
|
@@ -14602,11 +14605,11 @@ var StyledInput = newStyled.input(templateObject_3$J || (templateObject_3$J = __
|
|
|
14602
14605
|
return hasValue &&
|
|
14603
14606
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14604
14607
|
});
|
|
14605
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14608
|
+
var InputWrapper = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14606
14609
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14607
14610
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14608
14611
|
});
|
|
14609
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14612
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
14610
14613
|
var theme = _a.theme;
|
|
14611
14614
|
return theme.component.input.placeholderColor;
|
|
14612
14615
|
}, function (_a) {
|
|
@@ -14619,8 +14622,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$s || (templateObject_5
|
|
|
14619
14622
|
var theme = _a.theme;
|
|
14620
14623
|
return theme.component.input.lineHeight;
|
|
14621
14624
|
});
|
|
14622
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
14623
|
-
var templateObject_1$
|
|
14625
|
+
var ClearInput = newStyled.div(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
14626
|
+
var templateObject_1$15, templateObject_2$R, templateObject_3$K, templateObject_4$A, templateObject_5$t, templateObject_6$p;
|
|
14624
14627
|
|
|
14625
14628
|
var BaseInput = function (_a) {
|
|
14626
14629
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, customErrorMessage = _a.customErrorMessage, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder", "customErrorMessage"]);
|
|
@@ -14644,7 +14647,7 @@ var BaseInput = function (_a) {
|
|
|
14644
14647
|
}, [status]);
|
|
14645
14648
|
var hasValue = Boolean(value);
|
|
14646
14649
|
var errorMessage = customErrorMessage || (status === exports.InputValidationType.Error && required);
|
|
14647
|
-
return (jsxRuntime.jsxs(Container$
|
|
14650
|
+
return (jsxRuntime.jsxs(Container$Q, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
14648
14651
|
onChange(event.target.value, event);
|
|
14649
14652
|
}, 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 () {
|
|
14650
14653
|
onChange('', { target: { value: '' } });
|
|
@@ -14665,11 +14668,11 @@ var Button$6 = function (_a) {
|
|
|
14665
14668
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14666
14669
|
};
|
|
14667
14670
|
|
|
14668
|
-
var Container$
|
|
14671
|
+
var Container$P = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
14669
14672
|
var theme = _a.theme;
|
|
14670
14673
|
return theme.component.inputCustom.input.borderRadius;
|
|
14671
14674
|
});
|
|
14672
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14675
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
14673
14676
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14674
14677
|
return defaultRounded
|
|
14675
14678
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14684,23 +14687,23 @@ var Custom = function (_a) {
|
|
|
14684
14687
|
text: text,
|
|
14685
14688
|
disabled: rest.disabled,
|
|
14686
14689
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14687
|
-
return (jsxRuntime.jsx(Container$
|
|
14690
|
+
return (jsxRuntime.jsx(Container$P, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$6, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14688
14691
|
};
|
|
14689
|
-
var templateObject_1$
|
|
14692
|
+
var templateObject_1$14, templateObject_2$Q;
|
|
14690
14693
|
|
|
14691
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14694
|
+
var SuccessContainer = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14692
14695
|
var size = _a.size;
|
|
14693
14696
|
return (size === 'small' ? '36px' : '');
|
|
14694
14697
|
});
|
|
14695
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14696
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14698
|
+
var SuccessMessage = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
14699
|
+
var SuccessText = newStyled.span(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
14697
14700
|
var Success = function (_a) {
|
|
14698
14701
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14699
14702
|
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));
|
|
14700
14703
|
};
|
|
14701
|
-
var templateObject_1$
|
|
14704
|
+
var templateObject_1$13, templateObject_2$P, templateObject_3$J;
|
|
14702
14705
|
|
|
14703
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14706
|
+
var ButtonContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14704
14707
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14705
14708
|
return status === exports.InputValidationType.Empty &&
|
|
14706
14709
|
type === 'primary' &&
|
|
@@ -14717,16 +14720,16 @@ var BasePlusButton = function (_a) {
|
|
|
14717
14720
|
}
|
|
14718
14721
|
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));
|
|
14719
14722
|
};
|
|
14720
|
-
var templateObject_1$
|
|
14723
|
+
var templateObject_1$12;
|
|
14721
14724
|
|
|
14722
|
-
var Container$
|
|
14723
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14725
|
+
var Container$O = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14726
|
+
var IconContainer$3 = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
14724
14727
|
var BasePlusIcon = function (_a) {
|
|
14725
14728
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14726
14729
|
var theme = useTheme();
|
|
14727
|
-
return (jsxRuntime.jsx(Container$
|
|
14730
|
+
return (jsxRuntime.jsx(Container$O, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14728
14731
|
};
|
|
14729
|
-
var templateObject_1$
|
|
14732
|
+
var templateObject_1$11, templateObject_2$O;
|
|
14730
14733
|
|
|
14731
14734
|
var Input$3 = {
|
|
14732
14735
|
Simple: BaseInput,
|
|
@@ -14866,21 +14869,21 @@ var Portal = function (_a) {
|
|
|
14866
14869
|
var visibleStyle = function (_a) {
|
|
14867
14870
|
var opened = _a.opened;
|
|
14868
14871
|
return opened
|
|
14869
|
-
? css(templateObject_1
|
|
14872
|
+
? css(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14870
14873
|
};
|
|
14871
14874
|
var transformStyle = function (_a) {
|
|
14872
14875
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14873
14876
|
return opened
|
|
14874
|
-
? css(templateObject_3$
|
|
14877
|
+
? css(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14875
14878
|
};
|
|
14876
|
-
var Container$
|
|
14879
|
+
var Container$N = newStyled.div(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14877
14880
|
var width = _a.width;
|
|
14878
14881
|
return width
|
|
14879
|
-
? css(templateObject_5$
|
|
14882
|
+
? css(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14880
14883
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14881
14884
|
});
|
|
14882
14885
|
}, visibleStyle, transformStyle);
|
|
14883
|
-
var Overlay = newStyled.div(templateObject_7$
|
|
14886
|
+
var Overlay = newStyled.div(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"])), visibleStyle);
|
|
14884
14887
|
var Modal = function (_a) {
|
|
14885
14888
|
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;
|
|
14886
14889
|
var _e = useModal(id), opened = _e.opened, close = _e.close;
|
|
@@ -14890,7 +14893,7 @@ var Modal = function (_a) {
|
|
|
14890
14893
|
}
|
|
14891
14894
|
close();
|
|
14892
14895
|
};
|
|
14893
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14896
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$N, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
|
|
14894
14897
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14895
14898
|
onDismiss();
|
|
14896
14899
|
} }, void 0)] }), void 0));
|
|
@@ -14921,7 +14924,7 @@ var useModal = function (id) {
|
|
|
14921
14924
|
close: close,
|
|
14922
14925
|
}); }, [close, open, opened]);
|
|
14923
14926
|
};
|
|
14924
|
-
var templateObject_1
|
|
14927
|
+
var templateObject_1$10, templateObject_2$N, templateObject_3$I, templateObject_4$z, templateObject_5$s, templateObject_6$o, templateObject_7$m;
|
|
14925
14928
|
|
|
14926
14929
|
var htmlReactParser = {exports: {}};
|
|
14927
14930
|
|
|
@@ -18702,7 +18705,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18702
18705
|
HTMLReactParser$1.attributesToProps;
|
|
18703
18706
|
HTMLReactParser$1.Element;
|
|
18704
18707
|
|
|
18705
|
-
var Bar$1 = newStyled.div(templateObject_1
|
|
18708
|
+
var Bar$1 = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18706
18709
|
var height = _a.height;
|
|
18707
18710
|
return height || '0.5rem';
|
|
18708
18711
|
}, function (_a) {
|
|
@@ -18741,7 +18744,7 @@ var BarContainer = newStyled.div({
|
|
|
18741
18744
|
padding: '0 16px',
|
|
18742
18745
|
position: 'relative',
|
|
18743
18746
|
});
|
|
18744
|
-
var Container$
|
|
18747
|
+
var Container$M = newStyled.div(function (_a) {
|
|
18745
18748
|
var backgroundColor = _a.backgroundColor;
|
|
18746
18749
|
return ({
|
|
18747
18750
|
width: '475px',
|
|
@@ -18754,7 +18757,7 @@ var Container$L = newStyled.div(function (_a) {
|
|
|
18754
18757
|
background: backgroundColor,
|
|
18755
18758
|
});
|
|
18756
18759
|
});
|
|
18757
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18760
|
+
var MessageContainer = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18758
18761
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18759
18762
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18760
18763
|
};
|
|
@@ -18783,33 +18786,33 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18783
18786
|
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18784
18787
|
return (jsxRuntime.jsx(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18785
18788
|
};
|
|
18786
|
-
return (jsxRuntime.jsxs(Container$
|
|
18789
|
+
return (jsxRuntime.jsxs(Container$M, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18787
18790
|
};
|
|
18788
|
-
var templateObject_1
|
|
18791
|
+
var templateObject_1$$, templateObject_2$M;
|
|
18789
18792
|
|
|
18790
|
-
var Container$
|
|
18793
|
+
var Container$L = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
18791
18794
|
var theme = _a.theme;
|
|
18792
18795
|
return theme.component.orderBar.backgroundColor;
|
|
18793
18796
|
});
|
|
18794
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18797
|
+
var H1 = newStyled.h1(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
18795
18798
|
var OrderBar = function (_a) {
|
|
18796
18799
|
var message = _a.message, color = _a.color;
|
|
18797
18800
|
var theme = useTheme();
|
|
18798
|
-
return (jsxRuntime.jsxs(Container$
|
|
18801
|
+
return (jsxRuntime.jsxs(Container$L, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18799
18802
|
};
|
|
18800
|
-
var templateObject_1$
|
|
18801
|
-
|
|
18802
|
-
var Container$
|
|
18803
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18804
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18805
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18806
|
-
var Check = newStyled.div(templateObject_5$
|
|
18807
|
-
var IconContainer$2 = newStyled.div(templateObject_6$
|
|
18808
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18809
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
18803
|
+
var templateObject_1$_, templateObject_2$L;
|
|
18804
|
+
|
|
18805
|
+
var Container$K = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
18806
|
+
var Card$1 = newStyled.div(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18807
|
+
var Tag$1 = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
18808
|
+
var Label$3 = newStyled.div(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
18809
|
+
var Check = newStyled.div(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18810
|
+
var IconContainer$2 = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18811
|
+
var IconPlaceholder = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18812
|
+
var DiscountContainer = newStyled.div(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18810
18813
|
var PackSelector = function (_a) {
|
|
18811
18814
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18812
|
-
return (jsxRuntime.jsx(Container$
|
|
18815
|
+
return (jsxRuntime.jsx(Container$K, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18813
18816
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18814
18817
|
}) }), void 0));
|
|
18815
18818
|
};
|
|
@@ -18836,14 +18839,14 @@ var PackCard = function (_a) {
|
|
|
18836
18839
|
currency: currencyCode || 'USD',
|
|
18837
18840
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18838
18841
|
};
|
|
18839
|
-
var templateObject_1$
|
|
18842
|
+
var templateObject_1$Z, templateObject_2$K, templateObject_3$H, templateObject_4$y, templateObject_5$r, templateObject_6$n, templateObject_7$l, templateObject_8$f;
|
|
18840
18843
|
|
|
18841
|
-
var Container$
|
|
18842
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18843
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18844
|
+
var Container$J = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18845
|
+
var IconContainer$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18846
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18844
18847
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18845
18848
|
}));
|
|
18846
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18849
|
+
var PageNumber = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
18847
18850
|
var bold = _a.bold;
|
|
18848
18851
|
return (bold ? '700' : '500');
|
|
18849
18852
|
}, function (_a) {
|
|
@@ -18860,7 +18863,7 @@ var PageNumber = newStyled.span(templateObject_4$w || (templateObject_4$w = __ma
|
|
|
18860
18863
|
var background = _a.background;
|
|
18861
18864
|
return background || 'unset';
|
|
18862
18865
|
});
|
|
18863
|
-
var templateObject_1$
|
|
18866
|
+
var templateObject_1$Y, templateObject_2$J, templateObject_3$G, templateObject_4$x;
|
|
18864
18867
|
|
|
18865
18868
|
var Pagination = function (_a) {
|
|
18866
18869
|
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;
|
|
@@ -18906,7 +18909,7 @@ var Pagination = function (_a) {
|
|
|
18906
18909
|
}
|
|
18907
18910
|
return pages;
|
|
18908
18911
|
}, [from, page, showReducedPages, to]);
|
|
18909
|
-
return (jsxRuntime.jsxs(Container$
|
|
18912
|
+
return (jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18910
18913
|
};
|
|
18911
18914
|
|
|
18912
18915
|
var PaginatorBlog = function (_a) {
|
|
@@ -18920,12 +18923,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18920
18923
|
setPage(page);
|
|
18921
18924
|
onChange(page);
|
|
18922
18925
|
};
|
|
18923
|
-
return (jsxRuntime.jsxs(Container$
|
|
18926
|
+
return (jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18924
18927
|
? theme.colors.shades['white'].color
|
|
18925
18928
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18926
18929
|
};
|
|
18927
18930
|
|
|
18928
|
-
var Container$
|
|
18931
|
+
var Container$I = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18929
18932
|
var width = _a.width;
|
|
18930
18933
|
return width;
|
|
18931
18934
|
}, function (_a) {
|
|
@@ -18941,14 +18944,14 @@ var Container$H = newStyled.div(templateObject_1$W || (templateObject_1$W = __ma
|
|
|
18941
18944
|
var PaymentMethod = function (_a) {
|
|
18942
18945
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18943
18946
|
var theme = useTheme();
|
|
18944
|
-
return (jsxRuntime.jsx(Container$
|
|
18947
|
+
return (jsxRuntime.jsx(Container$I, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
18945
18948
|
};
|
|
18946
|
-
var templateObject_1$
|
|
18949
|
+
var templateObject_1$X;
|
|
18947
18950
|
|
|
18948
|
-
var Container$
|
|
18951
|
+
var Container$H = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18949
18952
|
var IMAGE_WIDTH = '63px';
|
|
18950
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18951
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18953
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18954
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
18952
18955
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18953
18956
|
}), IMAGE_WIDTH);
|
|
18954
18957
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18971,7 +18974,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18971
18974
|
margin: margin,
|
|
18972
18975
|
});
|
|
18973
18976
|
});
|
|
18974
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18977
|
+
var PriceContainer = newStyled.div(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
18975
18978
|
var withTag = _a.withTag; _a.theme;
|
|
18976
18979
|
return withTag
|
|
18977
18980
|
? mediaQueries({
|
|
@@ -18980,9 +18983,9 @@ var PriceContainer = newStyled.div(templateObject_4$v || (templateObject_4$v = _
|
|
|
18980
18983
|
})
|
|
18981
18984
|
: 'justify-content: end';
|
|
18982
18985
|
});
|
|
18983
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18984
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18985
|
-
var Gift = newStyled.span(templateObject_7$
|
|
18986
|
+
var Quantity = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
18987
|
+
var StyledSpan = newStyled.span(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18988
|
+
var Gift = newStyled.span(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"], ["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"])), function (_a) {
|
|
18986
18989
|
var theme = _a.theme;
|
|
18987
18990
|
return theme.colors.semantic.urgent.color;
|
|
18988
18991
|
});
|
|
@@ -18990,9 +18993,9 @@ var SimpleOrderItem = function (_a) {
|
|
|
18990
18993
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18991
18994
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, midElement = _a.midElement, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle, isGift = _a.isGift;
|
|
18992
18995
|
var theme = useTheme();
|
|
18993
|
-
return (jsxRuntime.jsxs(Container$
|
|
18996
|
+
return (jsxRuntime.jsxs(Container$H, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsxRuntime.jsx(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsxRuntime.jsx(Gift, { children: "Limited Time Only" }, void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsxRuntime.jsx(Gift, { children: "GIFT" }, void 0)) : (jsxRuntime.jsx(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
18994
18997
|
};
|
|
18995
|
-
var templateObject_1$
|
|
18998
|
+
var templateObject_1$W, templateObject_2$I, templateObject_3$F, templateObject_4$w, templateObject_5$q, templateObject_6$m, templateObject_7$k;
|
|
18996
18999
|
|
|
18997
19000
|
var P$1 = newStyled.p(function (_a) {
|
|
18998
19001
|
var color = _a.color;
|
|
@@ -19006,7 +19009,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
19006
19009
|
margin: '0.938rem 4.188rem',
|
|
19007
19010
|
});
|
|
19008
19011
|
});
|
|
19009
|
-
var Bar = newStyled.div(templateObject_1$
|
|
19012
|
+
var Bar = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
19010
19013
|
var height = _a.height;
|
|
19011
19014
|
return height || '0.5rem';
|
|
19012
19015
|
}, function (_a) {
|
|
@@ -19035,7 +19038,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
19035
19038
|
position: 'absolute',
|
|
19036
19039
|
});
|
|
19037
19040
|
});
|
|
19038
|
-
var Container$
|
|
19041
|
+
var Container$G = newStyled.div(function (_a) {
|
|
19039
19042
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
19040
19043
|
return ({
|
|
19041
19044
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -19049,14 +19052,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
19049
19052
|
var ProgressBar = function (_a) {
|
|
19050
19053
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
19051
19054
|
var theme = useTheme();
|
|
19052
|
-
return (jsxRuntime.jsxs(Container$
|
|
19055
|
+
return (jsxRuntime.jsxs(Container$G, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
19053
19056
|
};
|
|
19054
|
-
var templateObject_1$
|
|
19057
|
+
var templateObject_1$V;
|
|
19055
19058
|
|
|
19056
|
-
var Container$
|
|
19057
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19058
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19059
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19059
|
+
var Container$F = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
19060
|
+
var Item$1 = newStyled.span(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
19061
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
19062
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
19060
19063
|
var QuantityPicker = function (_a) {
|
|
19061
19064
|
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;
|
|
19062
19065
|
var theme = useTheme();
|
|
@@ -19079,9 +19082,9 @@ var QuantityPicker = function (_a) {
|
|
|
19079
19082
|
return clamp(value);
|
|
19080
19083
|
});
|
|
19081
19084
|
}, [value, clamp]);
|
|
19082
|
-
return (jsxRuntime.jsxs(Container$
|
|
19085
|
+
return (jsxRuntime.jsxs(Container$F, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19083
19086
|
};
|
|
19084
|
-
var templateObject_1$
|
|
19087
|
+
var templateObject_1$U, templateObject_2$H, templateObject_3$E, templateObject_4$v;
|
|
19085
19088
|
|
|
19086
19089
|
/* base styles & size variants */
|
|
19087
19090
|
var CustomRadioStyles$1 = {
|
|
@@ -19150,9 +19153,9 @@ var ContainerStyles$1 = {
|
|
|
19150
19153
|
},
|
|
19151
19154
|
};
|
|
19152
19155
|
|
|
19153
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19154
|
-
var Container$
|
|
19155
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19156
|
+
var Wrapper$3 = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19157
|
+
var Container$E = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19158
|
+
var Input$2 = newStyled.input(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19156
19159
|
var disabled = _a.disabled;
|
|
19157
19160
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19158
19161
|
});
|
|
@@ -19160,7 +19163,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19160
19163
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19161
19164
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19162
19165
|
]; });
|
|
19163
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19166
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
19164
19167
|
var RadioPrimary = function (_a) {
|
|
19165
19168
|
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;
|
|
19166
19169
|
var theme = useTheme();
|
|
@@ -19168,9 +19171,9 @@ var RadioPrimary = function (_a) {
|
|
|
19168
19171
|
var value = event.currentTarget.value;
|
|
19169
19172
|
onChange({ value: value, label: label });
|
|
19170
19173
|
};
|
|
19171
|
-
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
19174
|
+
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$E, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19172
19175
|
};
|
|
19173
|
-
var templateObject_1$
|
|
19176
|
+
var templateObject_1$T, templateObject_2$G, templateObject_3$D;
|
|
19174
19177
|
|
|
19175
19178
|
var RadioGroupInput = function (_a) {
|
|
19176
19179
|
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;
|
|
@@ -19249,9 +19252,9 @@ var ContainerStyles = {
|
|
|
19249
19252
|
},
|
|
19250
19253
|
};
|
|
19251
19254
|
|
|
19252
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19253
|
-
var Container$
|
|
19254
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19255
|
+
var Wrapper$2 = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
19256
|
+
var Container$D = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19257
|
+
var Input$1 = newStyled.input(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19255
19258
|
var disabled = _a.disabled;
|
|
19256
19259
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19257
19260
|
});
|
|
@@ -19259,7 +19262,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19259
19262
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19260
19263
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19261
19264
|
]; });
|
|
19262
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19265
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19263
19266
|
var theme = _a.theme;
|
|
19264
19267
|
return theme.component.radio.textSize;
|
|
19265
19268
|
}, function (_a) {
|
|
@@ -19273,9 +19276,9 @@ var ClubRadioInput = function (_a) {
|
|
|
19273
19276
|
var value = event.currentTarget.value;
|
|
19274
19277
|
onChange({ value: value, label: label });
|
|
19275
19278
|
};
|
|
19276
|
-
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$
|
|
19279
|
+
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$D, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19277
19280
|
};
|
|
19278
|
-
var templateObject_1$
|
|
19281
|
+
var templateObject_1$S, templateObject_2$F, templateObject_3$C;
|
|
19279
19282
|
|
|
19280
19283
|
var ClubRadioGroupInput = function (_a) {
|
|
19281
19284
|
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;
|
|
@@ -19303,14 +19306,14 @@ function formatDate(date, format) {
|
|
|
19303
19306
|
}
|
|
19304
19307
|
}
|
|
19305
19308
|
|
|
19306
|
-
var Container$
|
|
19307
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19308
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19309
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19310
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19311
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19312
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19313
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
19309
|
+
var Container$C = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
19310
|
+
var Content$1 = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
19311
|
+
var StarsContent = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19312
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
19313
|
+
var DateText$1 = newStyled.span(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
19314
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
19315
|
+
var VerifiedText = newStyled.h1(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
19316
|
+
var ReviewTitle$1 = newStyled.h2(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
19314
19317
|
var ReviewDescription = newStyled.div(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
19315
19318
|
var ImageContainer$2 = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
19316
19319
|
var ImageWrapper$3 = newStyled(Image$3)(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
@@ -19341,21 +19344,21 @@ var Review$1 = function (_a) {
|
|
|
19341
19344
|
}
|
|
19342
19345
|
}
|
|
19343
19346
|
}, [opened]);
|
|
19344
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
19347
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$C, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19345
19348
|
(!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));
|
|
19346
19349
|
};
|
|
19347
|
-
var templateObject_1$
|
|
19350
|
+
var templateObject_1$R, templateObject_2$E, templateObject_3$B, templateObject_4$u, templateObject_5$p, templateObject_6$l, templateObject_7$j, templateObject_8$e, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19348
19351
|
|
|
19349
19352
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19350
19353
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19351
|
-
var Container$
|
|
19352
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19353
|
-
var Content = newStyled.div(templateObject_3$
|
|
19354
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19355
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19356
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19357
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19358
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
19354
|
+
var Container$B = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
19355
|
+
var Heading = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19356
|
+
var Content = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19357
|
+
var ReviewContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19358
|
+
var DateText = newStyled.span(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19359
|
+
var VariantText = newStyled.div(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19360
|
+
var ReviewerName = newStyled.h2(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
19361
|
+
var ReviewTitle = newStyled.h3(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19359
19362
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
19360
19363
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
19361
19364
|
var ImagesContainer = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
@@ -19390,7 +19393,7 @@ var Review = function (_a) {
|
|
|
19390
19393
|
});
|
|
19391
19394
|
};
|
|
19392
19395
|
}, [randomId]);
|
|
19393
|
-
return (jsxRuntime.jsxs(Container$
|
|
19396
|
+
return (jsxRuntime.jsxs(Container$B, { children: [jsxRuntime.jsxs(Heading, { children: [jsxRuntime.jsx(ReviewerName, { children: reviewerName }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
19394
19397
|
__html: showMoreMobile
|
|
19395
19398
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19396
19399
|
: description,
|
|
@@ -19400,15 +19403,15 @@ var Review = function (_a) {
|
|
|
19400
19403
|
: description,
|
|
19401
19404
|
} }, 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));
|
|
19402
19405
|
};
|
|
19403
|
-
var templateObject_1$
|
|
19404
|
-
|
|
19405
|
-
var Container$
|
|
19406
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19407
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19408
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19409
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19410
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19411
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
19406
|
+
var templateObject_1$Q, templateObject_2$D, templateObject_3$A, templateObject_4$t, templateObject_5$o, templateObject_6$k, templateObject_7$i, templateObject_8$d, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19407
|
+
|
|
19408
|
+
var Container$A = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19409
|
+
var ReviewsContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
19410
|
+
var ReviewsCount = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
19411
|
+
var ReviewsStars = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
19412
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
19413
|
+
var ReviewsImages = newStyled.div(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
19414
|
+
var SummaryItem = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
19412
19415
|
var backgroundUrl = _a.backgroundUrl;
|
|
19413
19416
|
return "url(".concat(backgroundUrl, ")");
|
|
19414
19417
|
});
|
|
@@ -19416,25 +19419,25 @@ var ReviewsHeader = function (_a) {
|
|
|
19416
19419
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
19417
19420
|
var starsNumber = 5;
|
|
19418
19421
|
var theme = useTheme();
|
|
19419
|
-
return (jsxRuntime.jsxs(Container$
|
|
19422
|
+
return (jsxRuntime.jsxs(Container$A, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19420
19423
|
};
|
|
19421
|
-
var templateObject_1$
|
|
19424
|
+
var templateObject_1$P, templateObject_2$C, templateObject_3$z, templateObject_4$s, templateObject_5$n, templateObject_6$j, templateObject_7$h;
|
|
19422
19425
|
|
|
19423
|
-
var Container$
|
|
19424
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
19426
|
+
var Container$z = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19427
|
+
var Text$1 = newStyled.p(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
19425
19428
|
var ScrollToTop = function (_a) {
|
|
19426
19429
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19427
19430
|
var theme = useTheme();
|
|
19428
19431
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19429
|
-
return (jsxRuntime.jsxs(Container$
|
|
19432
|
+
return (jsxRuntime.jsxs(Container$z, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19430
19433
|
};
|
|
19431
|
-
var templateObject_1$
|
|
19434
|
+
var templateObject_1$O, templateObject_2$B;
|
|
19432
19435
|
|
|
19433
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19436
|
+
var Button$5 = newStyled.button(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"])), mediaQueries({
|
|
19434
19437
|
right: ['1rem', '7.75rem'],
|
|
19435
19438
|
top: ['0.75rem', '0.75rem'],
|
|
19436
19439
|
}));
|
|
19437
|
-
var templateObject_1$
|
|
19440
|
+
var templateObject_1$N;
|
|
19438
19441
|
|
|
19439
19442
|
var ClearButton = function (_a) {
|
|
19440
19443
|
var onClick = _a.onClick;
|
|
@@ -19442,7 +19445,7 @@ var ClearButton = function (_a) {
|
|
|
19442
19445
|
return (jsxRuntime.jsx(Button$5, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19443
19446
|
};
|
|
19444
19447
|
|
|
19445
|
-
var Container$
|
|
19448
|
+
var Container$y = newStyled.div({
|
|
19446
19449
|
display: 'flex',
|
|
19447
19450
|
justifyContent: 'center',
|
|
19448
19451
|
padding: '1rem',
|
|
@@ -19450,10 +19453,10 @@ var Container$x = newStyled.div({
|
|
|
19450
19453
|
|
|
19451
19454
|
var Footer = function (_a) {
|
|
19452
19455
|
var text = _a.text, onClick = _a.onClick;
|
|
19453
|
-
return (jsxRuntime.jsx(Container$
|
|
19456
|
+
return (jsxRuntime.jsx(Container$y, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19454
19457
|
};
|
|
19455
19458
|
|
|
19456
|
-
var Container$
|
|
19459
|
+
var Container$x = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", "\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", "\n"])), mediaQueries({
|
|
19457
19460
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19458
19461
|
}));
|
|
19459
19462
|
var Description = newStyled.div({
|
|
@@ -19467,20 +19470,20 @@ var Description = newStyled.div({
|
|
|
19467
19470
|
textAlign: 'start',
|
|
19468
19471
|
},
|
|
19469
19472
|
});
|
|
19470
|
-
var templateObject_1$
|
|
19473
|
+
var templateObject_1$M;
|
|
19471
19474
|
|
|
19472
19475
|
var ProductItem = function (_a) {
|
|
19473
19476
|
var _b;
|
|
19474
19477
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19475
19478
|
var theme = useTheme();
|
|
19476
|
-
return (jsxRuntime.jsxs(Container$
|
|
19479
|
+
return (jsxRuntime.jsxs(Container$x, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: title, width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$7, { variant: "body", weight: "regular", size: "regular", testId: "search-product-title", dangerouslySetInnerHTML: { __html: title } }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: (_b = theme.colors.pallete.brickRed) === null || _b === void 0 ? void 0 : _b.color, size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19477
19480
|
};
|
|
19478
19481
|
|
|
19479
19482
|
var OptionsList = newStyled.ul({
|
|
19480
19483
|
margin: '0px',
|
|
19481
19484
|
padding: '0px',
|
|
19482
19485
|
});
|
|
19483
|
-
var OptionItem = newStyled.li(templateObject_1$
|
|
19486
|
+
var OptionItem = newStyled.li(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", "\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", "\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
19484
19487
|
padding: [0, '0rem 1rem'],
|
|
19485
19488
|
borderRadius: [0, '0.5rem'],
|
|
19486
19489
|
}));
|
|
@@ -19492,20 +19495,20 @@ var Anchor = newStyled.a({
|
|
|
19492
19495
|
padding: 0,
|
|
19493
19496
|
textDecoration: 'none',
|
|
19494
19497
|
});
|
|
19495
|
-
var Container$
|
|
19498
|
+
var Container$w = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", "\n"])), mediaQueries({
|
|
19496
19499
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19497
19500
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19498
19501
|
borderRadius: ['0', '0.5rem'],
|
|
19499
19502
|
}));
|
|
19500
|
-
var Header$2 = newStyled.div(templateObject_3$
|
|
19503
|
+
var Header$2 = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mediaQueries({
|
|
19501
19504
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19502
19505
|
}));
|
|
19503
|
-
var templateObject_1$
|
|
19506
|
+
var templateObject_1$L, templateObject_2$A, templateObject_3$y;
|
|
19504
19507
|
|
|
19505
19508
|
var ResultsPanel = function (_a) {
|
|
19506
19509
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19507
19510
|
var theme = useTheme();
|
|
19508
|
-
return (jsxRuntime.jsxs(Container$
|
|
19511
|
+
return (jsxRuntime.jsxs(Container$w, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(OptionsList, { children: options.map(function (_a) {
|
|
19509
19512
|
var optionUrl = _a.optionUrl, price = _a.price, src = _a.src, title = _a.title;
|
|
19510
19513
|
return (jsxRuntime.jsx(OptionItem, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: src, title: title, price: price }, void 0) }), void 0) }), title));
|
|
19511
19514
|
}) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
@@ -19519,8 +19522,8 @@ var SearchIconContainer = newStyled.div({
|
|
|
19519
19522
|
background: 'white',
|
|
19520
19523
|
alignSelf: 'center',
|
|
19521
19524
|
});
|
|
19522
|
-
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19523
|
-
var templateObject_1$
|
|
19525
|
+
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19526
|
+
var templateObject_1$K;
|
|
19524
19527
|
|
|
19525
19528
|
var SearchControl = function (_a) {
|
|
19526
19529
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
@@ -19566,7 +19569,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19566
19569
|
},
|
|
19567
19570
|
},
|
|
19568
19571
|
}); });
|
|
19569
|
-
var Container$
|
|
19572
|
+
var Container$v = newStyled.div({
|
|
19570
19573
|
position: 'relative',
|
|
19571
19574
|
display: 'flex',
|
|
19572
19575
|
});
|
|
@@ -19621,7 +19624,7 @@ var SearchBar = function (_a) {
|
|
|
19621
19624
|
if (e.cancelable) {
|
|
19622
19625
|
e.preventDefault();
|
|
19623
19626
|
}
|
|
19624
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
19627
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$v, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
19625
19628
|
if (e.key === 'Enter') {
|
|
19626
19629
|
if (e.cancelable) {
|
|
19627
19630
|
e.preventDefault();
|
|
@@ -19632,21 +19635,21 @@ var SearchBar = function (_a) {
|
|
|
19632
19635
|
} }, 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));
|
|
19633
19636
|
};
|
|
19634
19637
|
|
|
19635
|
-
var Container$
|
|
19636
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19637
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19638
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19639
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19640
|
-
var templateObject_1$
|
|
19638
|
+
var Container$u = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19639
|
+
var BackArrow = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19640
|
+
var BoldSpan = newStyled.span(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19641
|
+
var NormalSpan = newStyled.span(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19642
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19643
|
+
var templateObject_1$J, templateObject_2$z, templateObject_3$x, templateObject_4$r, templateObject_5$m;
|
|
19641
19644
|
|
|
19642
19645
|
var SearchNavigation = function (_a) {
|
|
19643
19646
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19644
|
-
return (jsxRuntime.jsxs(Container$
|
|
19647
|
+
return (jsxRuntime.jsxs(Container$u, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction, testId: "breadcrumb-search-returnText" }, { 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) {
|
|
19645
19648
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, __assign$1({ "data-testid": "breadcrumb-search-step-".concat(index) }, { children: step }), step)) : (jsxRuntime.jsx(NormalSpan, __assign$1({ "data-testid": "breadcrumb-search-step-".concat(index) }, { children: "".concat(step, " / ") }), step));
|
|
19646
19649
|
}) }, void 0)] }, void 0));
|
|
19647
19650
|
};
|
|
19648
19651
|
|
|
19649
|
-
var Container$
|
|
19652
|
+
var Container$t = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19650
19653
|
var alignCenter = _a.alignCenter;
|
|
19651
19654
|
return alignCenter &&
|
|
19652
19655
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19656,26 +19659,26 @@ var Container$s = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
|
|
|
19656
19659
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19657
19660
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19658
19661
|
});
|
|
19659
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19660
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19662
|
+
var TitleText = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19663
|
+
var BannerText = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19661
19664
|
var ShortBanner = function (_a) {
|
|
19662
19665
|
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;
|
|
19663
19666
|
var theme = useTheme();
|
|
19664
|
-
return (jsxRuntime.jsxs(Container$
|
|
19667
|
+
return (jsxRuntime.jsxs(Container$t, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19665
19668
|
};
|
|
19666
|
-
var templateObject_1$
|
|
19667
|
-
|
|
19668
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19669
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19670
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19671
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19672
|
-
var TopLabel$1 = newStyled(Label$2)(templateObject_5$
|
|
19673
|
-
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$
|
|
19674
|
-
var Container$
|
|
19675
|
-
var LabelText$1 = newStyled('span')(templateObject_8$
|
|
19669
|
+
var templateObject_1$I, templateObject_2$y, templateObject_3$w;
|
|
19670
|
+
|
|
19671
|
+
var TableElement$3 = newStyled.table(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19672
|
+
var TableCell$3 = newStyled.td(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19673
|
+
var TableHead$3 = newStyled.th(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19674
|
+
var Label$2 = newStyled('div')(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19675
|
+
var TopLabel$1 = newStyled(Label$2)(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19676
|
+
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19677
|
+
var Container$s = newStyled('div')(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19678
|
+
var LabelText$1 = newStyled('span')(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19676
19679
|
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19677
19680
|
var TableRow$3 = newStyled.tr(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19678
|
-
var templateObject_1$
|
|
19681
|
+
var templateObject_1$H, templateObject_2$x, templateObject_3$v, templateObject_4$q, templateObject_5$l, templateObject_6$i, templateObject_7$g, templateObject_8$c, templateObject_9$7, templateObject_10$6;
|
|
19679
19682
|
|
|
19680
19683
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19681
19684
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19711,21 +19714,21 @@ var SizeChartTable = function (_a) {
|
|
|
19711
19714
|
var theme = useTheme();
|
|
19712
19715
|
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
19713
19716
|
var isMultilabel = xLabel && yLabel;
|
|
19714
|
-
return (jsxRuntime.jsxs(Container$
|
|
19717
|
+
return (jsxRuntime.jsxs(Container$s, { children: [isMultilabel && (jsxRuntime.jsxs(LeftLabel$1, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText$1, { children: xLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(Column$2, { children: [isMultilabel && (jsxRuntime.jsxs(TopLabel$1, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText$1, { children: yLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(TableElement$3, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsxRuntime.jsx(TableRow$3, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ style: {
|
|
19715
19718
|
backgroundColor: getCellColor$2(index, cell),
|
|
19716
19719
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(TableRow$3, __assign$1({ className: getIsOdd$2(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19717
19720
|
};
|
|
19718
19721
|
|
|
19719
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19720
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19721
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19722
|
-
var TableRow$2 = newStyled.tr(templateObject_4$
|
|
19722
|
+
var TableElement$2 = newStyled.table(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19723
|
+
var TableCell$2 = newStyled.td(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19724
|
+
var TableHead$2 = newStyled.th(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19725
|
+
var TableRow$2 = newStyled.tr(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19723
19726
|
var SizeTable = function (_a) {
|
|
19724
19727
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19725
19728
|
var theme = useTheme();
|
|
19726
19729
|
return (jsxRuntime.jsxs(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$2, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19727
19730
|
};
|
|
19728
|
-
var templateObject_1$
|
|
19731
|
+
var templateObject_1$G, templateObject_2$w, templateObject_3$u, templateObject_4$p;
|
|
19729
19732
|
|
|
19730
19733
|
var getStylesBySize$7 = function (size) {
|
|
19731
19734
|
switch (size) {
|
|
@@ -19752,7 +19755,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19752
19755
|
} });
|
|
19753
19756
|
};
|
|
19754
19757
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19755
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19758
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19756
19759
|
};
|
|
19757
19760
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19758
19761
|
if (disabled)
|
|
@@ -19768,23 +19771,23 @@ var TextButton = function (_a) {
|
|
|
19768
19771
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19769
19772
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase, testId: testId }, { children: text }), void 0));
|
|
19770
19773
|
};
|
|
19771
|
-
var templateObject_1$
|
|
19774
|
+
var templateObject_1$F;
|
|
19772
19775
|
|
|
19773
|
-
var Container$
|
|
19774
|
-
var P = newStyled.p(templateObject_2$
|
|
19775
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19776
|
+
var Container$r = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19777
|
+
var P = newStyled.p(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n margin: 0 0 0 10px;\n"], ["\n margin: 0 0 0 10px;\n"])));
|
|
19778
|
+
var PercentageSpan = newStyled.span(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19776
19779
|
var SizeFitGuide = function (_a) {
|
|
19777
19780
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19778
|
-
return (jsxRuntime.jsxs(Container$
|
|
19781
|
+
return (jsxRuntime.jsxs(Container$r, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19779
19782
|
};
|
|
19780
|
-
var templateObject_1$
|
|
19783
|
+
var templateObject_1$E, templateObject_2$v, templateObject_3$t;
|
|
19781
19784
|
|
|
19782
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19785
|
+
var ButtonsContainer = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19783
19786
|
var inline = _a.inline;
|
|
19784
19787
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19785
19788
|
});
|
|
19786
|
-
var Row = newStyled.div(templateObject_2$
|
|
19787
|
-
var templateObject_1$
|
|
19789
|
+
var Row = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 8px 0 0;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19790
|
+
var templateObject_1$D, templateObject_2$u;
|
|
19788
19791
|
|
|
19789
19792
|
var SizeSelector = function (_a) {
|
|
19790
19793
|
var _b;
|
|
@@ -19806,7 +19809,7 @@ var SizeSelector = function (_a) {
|
|
|
19806
19809
|
}) }), void 0)] }), void 0));
|
|
19807
19810
|
};
|
|
19808
19811
|
|
|
19809
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19812
|
+
var TabContainer = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19810
19813
|
var titleSize = _a.titleSize;
|
|
19811
19814
|
return titleSize;
|
|
19812
19815
|
}, function (_a) {
|
|
@@ -19823,18 +19826,18 @@ var Tab = function (_a) {
|
|
|
19823
19826
|
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;
|
|
19824
19827
|
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));
|
|
19825
19828
|
};
|
|
19826
|
-
var templateObject_1$
|
|
19829
|
+
var templateObject_1$C;
|
|
19827
19830
|
|
|
19828
|
-
var Container$
|
|
19829
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19831
|
+
var Container$q = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19832
|
+
var TabList = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19830
19833
|
var backgroundColor = _a.backgroundColor;
|
|
19831
19834
|
return backgroundColor;
|
|
19832
19835
|
}, function (_a) {
|
|
19833
19836
|
var borderColor = _a.borderColor;
|
|
19834
19837
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19835
19838
|
});
|
|
19836
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19837
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19839
|
+
var TabContent = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19840
|
+
var TabSeparator = newStyled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19838
19841
|
var Tabs = function (_a) {
|
|
19839
19842
|
var _b;
|
|
19840
19843
|
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;
|
|
@@ -19843,16 +19846,16 @@ var Tabs = function (_a) {
|
|
|
19843
19846
|
return null;
|
|
19844
19847
|
}
|
|
19845
19848
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19846
|
-
return (jsxRuntime.jsxs(Container$
|
|
19849
|
+
return (jsxRuntime.jsxs(Container$q, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19847
19850
|
};
|
|
19848
|
-
var templateObject_1$
|
|
19851
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$s, templateObject_4$o;
|
|
19849
19852
|
|
|
19850
|
-
var Container$
|
|
19853
|
+
var Container$p = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19851
19854
|
var Tag = function (_a) {
|
|
19852
19855
|
var text = _a.text, className = _a.className;
|
|
19853
|
-
return jsxRuntime.jsx(Container$
|
|
19856
|
+
return jsxRuntime.jsx(Container$p, __assign$1({ className: className }, { children: text }), void 0);
|
|
19854
19857
|
};
|
|
19855
|
-
var templateObject_1$
|
|
19858
|
+
var templateObject_1$A;
|
|
19856
19859
|
|
|
19857
19860
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19858
19861
|
switch (size) {
|
|
@@ -19965,9 +19968,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19965
19968
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19966
19969
|
};
|
|
19967
19970
|
|
|
19968
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
19969
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
19970
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19971
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19972
|
+
var VideoOverlay$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19973
|
+
var FullscreenVideo = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19971
19974
|
var ImageVideo = function (_a) {
|
|
19972
19975
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19973
19976
|
var video = React$2.useRef(null);
|
|
@@ -19987,12 +19990,12 @@ var ImageVideo = function (_a) {
|
|
|
19987
19990
|
height: '100%',
|
|
19988
19991
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19989
19992
|
};
|
|
19990
|
-
var templateObject_1$
|
|
19993
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$r;
|
|
19991
19994
|
|
|
19992
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19993
|
-
var ContainerMobile = css(templateObject_2$
|
|
19994
|
-
var Container$
|
|
19995
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19995
|
+
var ContainerDesktop = css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19996
|
+
var ContainerMobile = css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19997
|
+
var Container$o = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19998
|
+
var TextContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
19996
19999
|
var TextWithImage = function (_a) {
|
|
19997
20000
|
var _b, _c, _d, _e;
|
|
19998
20001
|
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"]);
|
|
@@ -20012,7 +20015,7 @@ var TextWithImage = function (_a) {
|
|
|
20012
20015
|
// @ts-ignore
|
|
20013
20016
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
20014
20017
|
};
|
|
20015
|
-
return (jsxs(Container$
|
|
20018
|
+
return (jsxs(Container$o, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile, onClick: buttonAction, testId: buttomText, css: {
|
|
20016
20019
|
backgroundColor: props.btnBGColor,
|
|
20017
20020
|
color: '#ffffff',
|
|
20018
20021
|
border: props.btnBGColor,
|
|
@@ -20022,18 +20025,18 @@ var TextWithImage = function (_a) {
|
|
|
20022
20025
|
},
|
|
20023
20026
|
} }, 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));
|
|
20024
20027
|
};
|
|
20025
|
-
var templateObject_1$
|
|
20028
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$q, templateObject_4$n;
|
|
20026
20029
|
|
|
20027
20030
|
var slideInAnimation = function (distanceFromTop) {
|
|
20028
20031
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20029
|
-
return keyframes(templateObject_1$
|
|
20032
|
+
return keyframes(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20030
20033
|
};
|
|
20031
20034
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20032
20035
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20033
|
-
return keyframes(templateObject_2$
|
|
20036
|
+
return keyframes(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20034
20037
|
};
|
|
20035
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20036
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20038
|
+
var ToastContainer = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"])));
|
|
20039
|
+
var ToastContent = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n position: fixed;\n top: ", ";\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"], ["\n position: fixed;\n top: ", ";\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"])), function (_a) {
|
|
20037
20040
|
var distanceFromTop = _a.distanceFromTop;
|
|
20038
20041
|
return distanceFromTop || '124px';
|
|
20039
20042
|
}, function (_a) {
|
|
@@ -20046,12 +20049,12 @@ var ToastContent = newStyled.div(templateObject_4$l || (templateObject_4$l = __m
|
|
|
20046
20049
|
var distanceFromTop = _a.distanceFromTop;
|
|
20047
20050
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20048
20051
|
});
|
|
20049
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20052
|
+
var ToastText = newStyled.p(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"], ["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"])), function (_a) {
|
|
20050
20053
|
var severity = _a.severity;
|
|
20051
20054
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20052
20055
|
});
|
|
20053
|
-
var CloseIcon = newStyled.div(templateObject_6$
|
|
20054
|
-
var templateObject_1$
|
|
20056
|
+
var CloseIcon = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20057
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$p, templateObject_4$m, templateObject_5$k, templateObject_6$h;
|
|
20055
20058
|
|
|
20056
20059
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20057
20060
|
var _b;
|
|
@@ -20073,9 +20076,9 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
20073
20076
|
});
|
|
20074
20077
|
Toast.displayName = 'Toast';
|
|
20075
20078
|
|
|
20076
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20077
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20078
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20079
|
+
var Wrapper$1 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
20080
|
+
var GrandTotal = newStyled.h1(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
20081
|
+
var Currency = newStyled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
20079
20082
|
var theme = _a.theme;
|
|
20080
20083
|
return theme.component.total.basicTotal.currency.color;
|
|
20081
20084
|
}, function (_a) {
|
|
@@ -20088,41 +20091,41 @@ var Currency = newStyled.span(templateObject_3$n || (templateObject_3$n = __make
|
|
|
20088
20091
|
var theme = _a.theme;
|
|
20089
20092
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20090
20093
|
});
|
|
20091
|
-
var Container$
|
|
20094
|
+
var Container$n = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
20092
20095
|
var highlightColor = _a.highlightColor;
|
|
20093
20096
|
return highlightColor;
|
|
20094
20097
|
});
|
|
20095
|
-
var TotalContainer = newStyled(Container$
|
|
20098
|
+
var TotalContainer = newStyled(Container$n)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20096
20099
|
var showTotalLabel = _a.showTotalLabel;
|
|
20097
20100
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20098
20101
|
});
|
|
20099
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20100
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
20102
|
+
var DiscountText = newStyled.h3(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
20103
|
+
var DiscountAmount = newStyled.h3(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
20101
20104
|
var theme = _a.theme;
|
|
20102
20105
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20103
20106
|
});
|
|
20104
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
20105
|
-
var templateObject_1$
|
|
20107
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20108
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$l, templateObject_5$j, templateObject_6$g, templateObject_7$f, templateObject_8$b;
|
|
20106
20109
|
|
|
20107
20110
|
var Total = function (_a) {
|
|
20108
20111
|
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;
|
|
20109
20112
|
var theme = useTheme();
|
|
20110
|
-
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$
|
|
20113
|
+
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$n, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20111
20114
|
};
|
|
20112
20115
|
|
|
20113
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20116
|
+
var Wrapper = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20114
20117
|
var color = _a.color;
|
|
20115
20118
|
return color;
|
|
20116
20119
|
});
|
|
20117
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20118
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20120
|
+
var ItemContainer = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
20121
|
+
var Item = newStyled.h4(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
20119
20122
|
var theme = _a.theme;
|
|
20120
20123
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20121
20124
|
}, function (_a) {
|
|
20122
20125
|
var theme = _a.theme;
|
|
20123
20126
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20124
20127
|
});
|
|
20125
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20128
|
+
var CouponItem = newStyled(Item)(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20126
20129
|
var color = _a.color;
|
|
20127
20130
|
return color;
|
|
20128
20131
|
});
|
|
@@ -20135,27 +20138,27 @@ var Subtotal = function (_a) {
|
|
|
20135
20138
|
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));
|
|
20136
20139
|
})] }), void 0));
|
|
20137
20140
|
};
|
|
20138
|
-
var templateObject_1$
|
|
20141
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$k;
|
|
20139
20142
|
|
|
20140
20143
|
var Totals = {
|
|
20141
20144
|
Total: Total,
|
|
20142
20145
|
Subtotal: Subtotal,
|
|
20143
20146
|
};
|
|
20144
20147
|
|
|
20145
|
-
var Container$
|
|
20146
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20147
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20148
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20149
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20150
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
20148
|
+
var Container$m = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20149
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20150
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20151
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20152
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
20153
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
20151
20154
|
return props.finishedTrack
|
|
20152
20155
|
? props.finishedTrackColor
|
|
20153
20156
|
: props.activeTrack
|
|
20154
20157
|
? props.activeTrackColor
|
|
20155
20158
|
: '';
|
|
20156
20159
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
20157
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
20158
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$
|
|
20160
|
+
var CheckpointStatusMessage = newStyled.span(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"], ["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"])));
|
|
20161
|
+
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20159
20162
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20160
20163
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20161
20164
|
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
@@ -20183,7 +20186,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20183
20186
|
}
|
|
20184
20187
|
return '30px';
|
|
20185
20188
|
};
|
|
20186
|
-
return (jsxRuntime.jsxs(Container$
|
|
20189
|
+
return (jsxRuntime.jsxs(Container$m, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20187
20190
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20188
20191
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsx(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
20189
20192
|
? activeCheckpointColor
|
|
@@ -20194,18 +20197,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20194
20197
|
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));
|
|
20195
20198
|
})] }), void 0));
|
|
20196
20199
|
};
|
|
20197
|
-
var templateObject_1$
|
|
20198
|
-
|
|
20199
|
-
var Container$
|
|
20200
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20201
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20202
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20203
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20204
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
20200
|
+
var templateObject_1$u, templateObject_2$n, templateObject_3$m, templateObject_4$j, templateObject_5$i, templateObject_6$f, templateObject_7$e, templateObject_8$a, templateObject_9$6, templateObject_10$5, templateObject_11$3;
|
|
20201
|
+
|
|
20202
|
+
var Container$l = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20203
|
+
var CheckpointContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20204
|
+
var CheckpointDate = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20205
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20206
|
+
var CheckpointStatus = newStyled.p(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
20207
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20205
20208
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20206
20209
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20207
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
20208
|
-
var LastCheckpointTrack = newStyled.div(templateObject_8$
|
|
20210
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
20211
|
+
var LastCheckpointTrack = newStyled.div(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
20209
20212
|
var TrackingProgress = function (_a) {
|
|
20210
20213
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
20211
20214
|
var theme = useTheme();
|
|
@@ -20225,7 +20228,7 @@ var TrackingProgress = function (_a) {
|
|
|
20225
20228
|
}
|
|
20226
20229
|
return '30px';
|
|
20227
20230
|
};
|
|
20228
|
-
return (jsxRuntime.jsxs(Container$
|
|
20231
|
+
return (jsxRuntime.jsxs(Container$l, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
20229
20232
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
20230
20233
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
20231
20234
|
? theme.colors.semantic.informative.color
|
|
@@ -20234,19 +20237,19 @@ var TrackingProgress = function (_a) {
|
|
|
20234
20237
|
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));
|
|
20235
20238
|
})] }), void 0));
|
|
20236
20239
|
};
|
|
20237
|
-
var templateObject_1$
|
|
20240
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$l, templateObject_4$i, templateObject_5$h, templateObject_6$e, templateObject_7$d, templateObject_8$9;
|
|
20238
20241
|
|
|
20239
|
-
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20242
|
+
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20240
20243
|
var checked = _a.checked;
|
|
20241
20244
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20242
20245
|
});
|
|
20243
|
-
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$
|
|
20244
|
-
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$
|
|
20245
|
-
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$
|
|
20246
|
-
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$
|
|
20247
|
-
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$
|
|
20248
|
-
var CheckboxInput = newStyled.input(templateObject_7$
|
|
20249
|
-
var templateObject_1$
|
|
20246
|
+
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"])));
|
|
20247
|
+
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20248
|
+
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20249
|
+
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20250
|
+
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20251
|
+
var CheckboxInput = newStyled.input(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20252
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$k, templateObject_4$h, templateObject_5$g, templateObject_6$d, templateObject_7$c;
|
|
20250
20253
|
|
|
20251
20254
|
function AutoshipOfferCard(_a) {
|
|
20252
20255
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20270,18 +20273,18 @@ function AutoshipOfferCard(_a) {
|
|
|
20270
20273
|
return (jsxRuntime.jsxs(AutoShipCardContainerWrapper$1, __assign$1({ checked: check }, { children: [jsxRuntime.jsxs(AutoShipHeaderBarWrapper$1, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CheckboxInput, { type: "checkbox", onChange: handleCheckBox, checked: check, "data-testid": "autoshipcheckbox" }, void 0) }, void 0), jsxRuntime.jsx("div", { children: renderCopy(copy) }, void 0)] }, void 0), !check && (jsxRuntime.jsxs(AutoShipBodyWrapper$1, { children: [jsxRuntime.jsxs(AutoShipBodyTitle$1, __assign$1({ onClick: handleShowMore }, { children: [jsxRuntime.jsx("span", { children: showMoreBenefits ? renderCopy(showMore.openedCopy) : renderCopy(showMore.closedCopy) }, void 0), jsxRuntime.jsx(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0), showMoreBenefits && (jsxRuntime.jsx(AutoShipBodyListWrapper$1, { children: copyList.map(function (item) { return (jsxRuntime.jsxs(AutoShipBodyListItem$1, { children: [jsxRuntime.jsx(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), renderCopy(item.copy)] }, item.icon)); }) }, void 0))] }, void 0))] }), void 0));
|
|
20271
20274
|
}
|
|
20272
20275
|
|
|
20273
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
20276
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20274
20277
|
var checked = _a.checked;
|
|
20275
20278
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20276
20279
|
});
|
|
20277
|
-
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$
|
|
20278
|
-
var AutoShipBodyWrapper = newStyled.div(templateObject_3$
|
|
20279
|
-
var AutoShipBodyTitle = newStyled.div(templateObject_4$
|
|
20280
|
-
var AutoShipBodyListItem = newStyled.div(templateObject_5$
|
|
20281
|
-
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$
|
|
20282
|
-
newStyled.input(templateObject_7$
|
|
20283
|
-
var ButtonRemoveWrapper = newStyled.div(templateObject_8$
|
|
20284
|
-
var templateObject_1$
|
|
20280
|
+
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
20281
|
+
var AutoShipBodyWrapper = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20282
|
+
var AutoShipBodyTitle = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20283
|
+
var AutoShipBodyListItem = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20284
|
+
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20285
|
+
newStyled.input(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20286
|
+
var ButtonRemoveWrapper = newStyled.div(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"], ["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"])));
|
|
20287
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$j, templateObject_4$g, templateObject_5$f, templateObject_6$c, templateObject_7$b, templateObject_8$8;
|
|
20285
20288
|
|
|
20286
20289
|
function AutoshipOfferCardCta(_a) {
|
|
20287
20290
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, buttonCopy = _a.buttonCopy;
|
|
@@ -20299,6 +20302,28 @@ function AutoshipOfferCardCta(_a) {
|
|
|
20299
20302
|
return (jsxRuntime.jsxs(AutoShipCardContainerWrapper, __assign$1({ checked: check }, { children: [jsxRuntime.jsxs(AutoShipHeaderBarWrapper, { children: [jsxRuntime.jsx("div", { children: copy }, void 0), check && (jsxRuntime.jsx(ButtonRemoveWrapper, __assign$1({ tabIndex: 0, role: "button", onKeyDown: handleCheckBox, onClick: handleCheckBox }, { children: "Remove" }), void 0))] }, void 0), !check && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(AutoShipBodyWrapper, { children: [(showMore === null || showMore === void 0 ? void 0 : showMore.openedCopy) && (showMore === null || showMore === void 0 ? void 0 : showMore.closedCopy) && (jsxRuntime.jsxs(AutoShipBodyTitle, __assign$1({ onClick: handleShowMore }, { children: [jsxRuntime.jsx("span", { children: showMoreBenefits ? showMore.openedCopy : showMore.closedCopy }, void 0), jsxRuntime.jsx(Icon$1, { name: showMoreBenefits ? 'arrows/chevron_up' : 'arrows/chevron_down' }, showMoreBenefits ? 'icon-up' : 'icon-down')] }), void 0)), showMoreBenefits && (jsxRuntime.jsx(AutoShipBodyListWrapper, { children: copyList.map(function (item) { return (jsxRuntime.jsxs(AutoShipBodyListItem, { children: [jsxRuntime.jsx(Icon$1, { name: item.icon, fill: "#D4605B", width: "19px", height: "19px" }, void 0), item.copy] }, item.icon)); }) }, void 0))] }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(ButtonSecondary, { onClick: handleCheckBox, text: buttonCopy, wide: true }, void 0) }, void 0)] }, void 0))] }), void 0));
|
|
20300
20303
|
}
|
|
20301
20304
|
|
|
20305
|
+
var ContainerBase$2 = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n border-radius: 8px;\n border-color: #e5e5e5;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n background-color: rgba(255, 243, 227, 0.3);\n"], ["\n border-radius: 8px;\n border-color: #e5e5e5;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n background-color: rgba(255, 243, 227, 0.3);\n"])));
|
|
20306
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n background-color: #fff3e34d;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n background-color: #fff3e34d;\n"])));
|
|
20307
|
+
var SubscriptionHeader$2 = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"], ["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"])));
|
|
20308
|
+
newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20309
|
+
newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
20310
|
+
newStyled(Text$7)(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20311
|
+
var Container$k = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20312
|
+
var Benefits$1 = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"])), function (_a) {
|
|
20313
|
+
var height = _a.height;
|
|
20314
|
+
return height !== null && height !== void 0 ? height : '100%';
|
|
20315
|
+
});
|
|
20316
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$i, templateObject_4$f, templateObject_5$e, templateObject_6$b, templateObject_7$a, templateObject_8$7;
|
|
20317
|
+
|
|
20318
|
+
var AutoshipPdpCard = function (_a) {
|
|
20319
|
+
var handleWithoutSavings = _a.handleWithoutSavings, handleSavings = _a.handleSavings, title = _a.title, ctaText = _a.ctaText, ctaTextNoSavings = _a.ctaTextNoSavings, className = _a.className, benefits = _a.benefits, bottomCopy = _a.bottomCopy;
|
|
20320
|
+
return (jsxRuntime.jsxs(Container$k, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$2, __assign$1({ "data-testid": "subscription-container" }, { children: [jsxRuntime.jsxs(SubscriptionHeader$2, { children: [jsxRuntime.jsx(Text$7, { variant: "label", dangerouslySetInnerHTML: { __html: title !== null && title !== void 0 ? title : '' } }, void 0), jsxRuntime.jsx(ButtonPrimary, { wide: true, text: ctaText !== null && ctaText !== void 0 ? ctaText : 'Yes, I want this offer', size: exports.ComponentSize.Small, onClick: function () {
|
|
20321
|
+
handleSavings();
|
|
20322
|
+
} }, void 0)] }, void 0), jsxRuntime.jsxs(Benefits$1, __assign$1({ "data-testid": "benefits-component" }, { children: [jsxRuntime.jsx(OfferAtCartBenefits, { benefits: benefits }, void 0), bottomCopy && jsxRuntime.jsx(Text$7, { variant: "label", dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }), void 0)] }), void 0), jsxRuntime.jsx(ButtonSecondary, { wide: true, text: ctaTextNoSavings !== null && ctaTextNoSavings !== void 0 ? ctaTextNoSavings : 'Continue without more savings - ', size: exports.ComponentSize.Small, onClick: function () {
|
|
20323
|
+
handleWithoutSavings();
|
|
20324
|
+
} }, void 0)] }), void 0));
|
|
20325
|
+
};
|
|
20326
|
+
|
|
20302
20327
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
20303
20328
|
background: props.bgColor,
|
|
20304
20329
|
height: '100%',
|
|
@@ -22241,6 +22266,7 @@ exports.Autoship = Autoship;
|
|
|
22241
22266
|
exports.AutoshipFrequencyDropdown = AutoshipFrequencyDropdown;
|
|
22242
22267
|
exports.AutoshipOfferCard = AutoshipOfferCard;
|
|
22243
22268
|
exports.AutoshipOfferCardCta = AutoshipOfferCardCta;
|
|
22269
|
+
exports.AutoshipPdpCard = AutoshipPdpCard;
|
|
22244
22270
|
exports.AutoshipV2 = AutoshipV2;
|
|
22245
22271
|
exports.BasicAccordion = BasicAccordion;
|
|
22246
22272
|
exports.BeforeAfterCard = BeforeAfterCard;
|