@trafilea/afrodita-components 6.54.13 → 6.55.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +20 -1
- package/build/index.esm.js +743 -667
- package/build/index.esm.js.map +1 -1
- package/build/index.js +744 -666
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3221,7 +3221,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3221
3221
|
};
|
|
3222
3222
|
}
|
|
3223
3223
|
};
|
|
3224
|
-
var Container$1z = newStyled.div(templateObject_1$
|
|
3224
|
+
var Container$1z = newStyled.div(templateObject_1$2F || (templateObject_1$2F = __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) {
|
|
3225
3225
|
var backgroundColor = _a.backgroundColor;
|
|
3226
3226
|
return backgroundColor;
|
|
3227
3227
|
}, function (_a) {
|
|
@@ -3243,7 +3243,7 @@ var Container$1z = newStyled.div(templateObject_1$2D || (templateObject_1$2D = _
|
|
|
3243
3243
|
var size = _a.size;
|
|
3244
3244
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3245
3245
|
});
|
|
3246
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3246
|
+
var H3$2 = newStyled.h3(templateObject_2$1V || (templateObject_2$1V = __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) {
|
|
3247
3247
|
var textColor = _a.textColor;
|
|
3248
3248
|
return textColor;
|
|
3249
3249
|
}, function (_a) {
|
|
@@ -3260,7 +3260,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3260
3260
|
var theme = useTheme();
|
|
3261
3261
|
return (jsxRuntime.jsx(Container$1z, __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));
|
|
3262
3262
|
};
|
|
3263
|
-
var templateObject_1$
|
|
3263
|
+
var templateObject_1$2F, templateObject_2$1V;
|
|
3264
3264
|
|
|
3265
3265
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3266
3266
|
var _a, _b, _c;
|
|
@@ -3291,7 +3291,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3291
3291
|
};
|
|
3292
3292
|
}
|
|
3293
3293
|
};
|
|
3294
|
-
var Container$1y = newStyled.div(templateObject_1$
|
|
3294
|
+
var Container$1y = newStyled.div(templateObject_1$2E || (templateObject_1$2E = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3295
3295
|
var backgroundColor = _a.backgroundColor;
|
|
3296
3296
|
return backgroundColor;
|
|
3297
3297
|
}, function (_a) {
|
|
@@ -3313,7 +3313,7 @@ var Container$1y = newStyled.div(templateObject_1$2C || (templateObject_1$2C = _
|
|
|
3313
3313
|
var size = _a.size;
|
|
3314
3314
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3315
3315
|
});
|
|
3316
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
3316
|
+
var H3$1 = newStyled.h3(templateObject_2$1U || (templateObject_2$1U = __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) {
|
|
3317
3317
|
var textColor = _a.textColor;
|
|
3318
3318
|
return textColor;
|
|
3319
3319
|
}, function (_a) {
|
|
@@ -3330,7 +3330,7 @@ var DiscountTag$4 = function (_a) {
|
|
|
3330
3330
|
var theme = useTheme();
|
|
3331
3331
|
return (jsxRuntime.jsx(Container$1y, __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));
|
|
3332
3332
|
};
|
|
3333
|
-
var templateObject_1$
|
|
3333
|
+
var templateObject_1$2E, templateObject_2$1U;
|
|
3334
3334
|
|
|
3335
3335
|
var Viewports = {
|
|
3336
3336
|
mobile: 'mobile',
|
|
@@ -3439,8 +3439,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3439
3439
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3440
3440
|
}
|
|
3441
3441
|
};
|
|
3442
|
-
var Container$1x = newStyled.div(templateObject_1$
|
|
3443
|
-
var Price$1 = newStyled.p(templateObject_2$
|
|
3442
|
+
var Container$1x = newStyled.div(templateObject_1$2D || (templateObject_1$2D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3443
|
+
var Price$1 = newStyled.p(templateObject_2$1T || (templateObject_2$1T = __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) {
|
|
3444
3444
|
var weight = _a.weight;
|
|
3445
3445
|
return (weight ? weight : '400');
|
|
3446
3446
|
}, function (_a) {
|
|
@@ -3464,7 +3464,7 @@ var Price$1 = newStyled.p(templateObject_2$1S || (templateObject_2$1S = __makeTe
|
|
|
3464
3464
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3465
3465
|
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3466
3466
|
});
|
|
3467
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3467
|
+
var TagContainer = newStyled.div(templateObject_3$1t || (templateObject_3$1t = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3468
3468
|
var _b;
|
|
3469
3469
|
var size = _a.size;
|
|
3470
3470
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3497,7 +3497,7 @@ var PriceLabel$1 = function (_a) {
|
|
|
3497
3497
|
};
|
|
3498
3498
|
return (jsxRuntime.jsxs(Container$1x, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(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$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3499
3499
|
};
|
|
3500
|
-
var templateObject_1$
|
|
3500
|
+
var templateObject_1$2D, templateObject_2$1T, templateObject_3$1t;
|
|
3501
3501
|
|
|
3502
3502
|
var supportedCurrencies = ['AU$', 'CA$', '€', 'kr', '£', 'NZ$', 'S$'];
|
|
3503
3503
|
|
|
@@ -3507,7 +3507,7 @@ var getCurrencySymbol = function (finalPrice) {
|
|
|
3507
3507
|
return currencySymbol !== null && currencySymbol !== void 0 ? currencySymbol : currencySymbolFallback;
|
|
3508
3508
|
};
|
|
3509
3509
|
|
|
3510
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3510
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2C || (templateObject_1$2C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3511
3511
|
var PriceLabelV2$1 = function (_a) {
|
|
3512
3512
|
var _b;
|
|
3513
3513
|
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, _j = _a.showDecimals, showDecimals = _j === void 0 ? true : _j, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings", "showDecimals"]);
|
|
@@ -3571,11 +3571,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3571
3571
|
lineHeight: '22px',
|
|
3572
3572
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3573
3573
|
};
|
|
3574
|
-
var templateObject_1$
|
|
3574
|
+
var templateObject_1$2C;
|
|
3575
3575
|
|
|
3576
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3577
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3578
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3576
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2B || (templateObject_1$2B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3577
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1S || (templateObject_2$1S = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3578
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$1s || (templateObject_3$1s = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3579
3579
|
var PriceLabelV3 = function (_a) {
|
|
3580
3580
|
var _b;
|
|
3581
3581
|
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"]);
|
|
@@ -3641,10 +3641,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
3641
3641
|
lineHeight: '22px',
|
|
3642
3642
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3643
3643
|
};
|
|
3644
|
-
var templateObject_1$
|
|
3644
|
+
var templateObject_1$2B, templateObject_2$1S, templateObject_3$1s;
|
|
3645
3645
|
|
|
3646
|
-
var Container$1w = newStyled.div(templateObject_1$
|
|
3647
|
-
var Price = newStyled.p(templateObject_2$
|
|
3646
|
+
var Container$1w = newStyled.div(templateObject_1$2A || (templateObject_1$2A = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"])));
|
|
3647
|
+
var Price = newStyled.p(templateObject_2$1R || (templateObject_2$1R = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"])), function (_a) {
|
|
3648
3648
|
var weight = _a.weight;
|
|
3649
3649
|
return weight !== null && weight !== void 0 ? weight : '400';
|
|
3650
3650
|
}, function (_a) {
|
|
@@ -3657,7 +3657,7 @@ var Price = newStyled.p(templateObject_2$1Q || (templateObject_2$1Q = __makeTemp
|
|
|
3657
3657
|
var underlined = _a.underlined;
|
|
3658
3658
|
return (underlined ? 'line-through' : 'none');
|
|
3659
3659
|
});
|
|
3660
|
-
var templateObject_1$
|
|
3660
|
+
var templateObject_1$2A, templateObject_2$1R;
|
|
3661
3661
|
|
|
3662
3662
|
function getTestId$1() {
|
|
3663
3663
|
var args = [];
|
|
@@ -3681,7 +3681,7 @@ var PriceLabelV5 = function (_a) {
|
|
|
3681
3681
|
return (jsxRuntime.jsx(Container$1w, __assign$1({}, rest, { id: "priceLabel" }, { children: 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, { theme: theme, originalPriceUnderlined: originalPriceUnderlined, testId: testId, originalPrice: originalPrice }, void 0))] }, void 0) }), void 0));
|
|
3682
3682
|
};
|
|
3683
3683
|
|
|
3684
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3684
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$2z || (templateObject_1$2z = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3685
3685
|
var PriceLabel = function (_a) {
|
|
3686
3686
|
var _b;
|
|
3687
3687
|
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"]);
|
|
@@ -3710,9 +3710,9 @@ var PriceLabel = function (_a) {
|
|
|
3710
3710
|
marginTop: '-6px',
|
|
3711
3711
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3712
3712
|
};
|
|
3713
|
-
var templateObject_1$
|
|
3713
|
+
var templateObject_1$2z;
|
|
3714
3714
|
|
|
3715
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3715
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$2y || (templateObject_1$2y = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3716
3716
|
var PriceLabelV2 = function (_a) {
|
|
3717
3717
|
var _b;
|
|
3718
3718
|
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"]);
|
|
@@ -3740,11 +3740,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
3740
3740
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3741
3741
|
return (jsxRuntime.jsxs(Container$1x, __assign$1({}, rest, { children: [isOriginalPrice && !isClubOffer && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price$1, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3742
3742
|
};
|
|
3743
|
-
var templateObject_1$
|
|
3743
|
+
var templateObject_1$2y;
|
|
3744
3744
|
|
|
3745
|
-
var ContainerWrapper$3 = newStyled.div(templateObject_1$
|
|
3746
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3747
|
-
var templateObject_1$
|
|
3745
|
+
var ContainerWrapper$3 = newStyled.div(templateObject_1$2x || (templateObject_1$2x = __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"])));
|
|
3746
|
+
var ImgWrapper = newStyled.div(templateObject_2$1Q || (templateObject_2$1Q = __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"])));
|
|
3747
|
+
var templateObject_1$2x, templateObject_2$1Q;
|
|
3748
3748
|
|
|
3749
3749
|
var ClubPriceMemberLabel = function (_a) {
|
|
3750
3750
|
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"]);
|
|
@@ -3753,13 +3753,13 @@ var ClubPriceMemberLabel = function (_a) {
|
|
|
3753
3753
|
return (jsxRuntime.jsx("div", { children: isClub ? (jsxRuntime.jsxs(ContainerWrapper$3, __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));
|
|
3754
3754
|
};
|
|
3755
3755
|
|
|
3756
|
-
var HorizontalDivider = newStyled.div(templateObject_1$
|
|
3756
|
+
var HorizontalDivider = newStyled.div(templateObject_1$2w || (templateObject_1$2w = __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) {
|
|
3757
3757
|
var width = _a.width;
|
|
3758
3758
|
return width !== null && width !== void 0 ? width : '100%';
|
|
3759
3759
|
});
|
|
3760
|
-
var templateObject_1$
|
|
3760
|
+
var templateObject_1$2w;
|
|
3761
3761
|
|
|
3762
|
-
var Container$1v = newStyled.div(templateObject_1$
|
|
3762
|
+
var Container$1v = newStyled.div(templateObject_1$2v || (templateObject_1$2v = __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) {
|
|
3763
3763
|
var height = _a.height;
|
|
3764
3764
|
return height !== null && height !== void 0 ? height : '1.5em';
|
|
3765
3765
|
}, function (_a) {
|
|
@@ -3786,9 +3786,9 @@ var SkeletonBox = function (_a) {
|
|
|
3786
3786
|
var theme = useTheme();
|
|
3787
3787
|
return jsxRuntime.jsx(Container$1v, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3788
3788
|
};
|
|
3789
|
-
var templateObject_1$
|
|
3789
|
+
var templateObject_1$2v;
|
|
3790
3790
|
|
|
3791
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3791
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$2u || (templateObject_1$2u = __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) {
|
|
3792
3792
|
var width = _a.width;
|
|
3793
3793
|
return width;
|
|
3794
3794
|
}, function (_a) {
|
|
@@ -3804,7 +3804,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2s || (templateObject_1$2s
|
|
|
3804
3804
|
var opacity = _a.opacity;
|
|
3805
3805
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3806
3806
|
});
|
|
3807
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3807
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1P || (templateObject_2$1P = __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) {
|
|
3808
3808
|
var width = _a.width;
|
|
3809
3809
|
return width;
|
|
3810
3810
|
}, function (_a) {
|
|
@@ -3817,7 +3817,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1O || (templateObject_2$
|
|
|
3817
3817
|
var opacity = _a.opacity;
|
|
3818
3818
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3819
3819
|
});
|
|
3820
|
-
var templateObject_1$
|
|
3820
|
+
var templateObject_1$2u, templateObject_2$1P;
|
|
3821
3821
|
|
|
3822
3822
|
/* eslint-disable no-undef */
|
|
3823
3823
|
var cache = new Map();
|
|
@@ -3993,7 +3993,7 @@ var buildImageUrl = function (_a) {
|
|
|
3993
3993
|
}
|
|
3994
3994
|
};
|
|
3995
3995
|
|
|
3996
|
-
var Img$1 = newStyled.img(templateObject_1$
|
|
3996
|
+
var Img$1 = newStyled.img(templateObject_1$2t || (templateObject_1$2t = __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; });
|
|
3997
3997
|
var Image$3 = function (_a) {
|
|
3998
3998
|
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"]);
|
|
3999
3999
|
var config = useTheme().config;
|
|
@@ -4002,15 +4002,15 @@ var Image$3 = function (_a) {
|
|
|
4002
4002
|
: src;
|
|
4003
4003
|
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));
|
|
4004
4004
|
};
|
|
4005
|
-
var templateObject_1$
|
|
4005
|
+
var templateObject_1$2t;
|
|
4006
4006
|
|
|
4007
|
-
var LabelWrapper = newStyled.label(templateObject_1$
|
|
4008
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
4009
|
-
var InputWrapper$1 = newStyled.input(templateObject_3$
|
|
4007
|
+
var LabelWrapper = newStyled.label(templateObject_1$2s || (templateObject_1$2s = __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"])));
|
|
4008
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1O || (templateObject_2$1O = __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"])));
|
|
4009
|
+
var InputWrapper$1 = newStyled.input(templateObject_3$1r || (templateObject_3$1r = __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) {
|
|
4010
4010
|
var $color = _a.$color;
|
|
4011
4011
|
return $color;
|
|
4012
4012
|
});
|
|
4013
|
-
var templateObject_1$
|
|
4013
|
+
var templateObject_1$2s, templateObject_2$1O, templateObject_3$1r;
|
|
4014
4014
|
|
|
4015
4015
|
var ToggleComponent = function (_a) {
|
|
4016
4016
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c, rest = __rest(_a, ["onToggle", "isChecked", "color"]);
|
|
@@ -4892,11 +4892,11 @@ function jsxs(type, props, key) {
|
|
|
4892
4892
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4893
4893
|
// `variants` styles that are consistent through all themes.
|
|
4894
4894
|
var TAGS = {
|
|
4895
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4896
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4897
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4898
|
-
display1: newStyled.h1(templateObject_4$
|
|
4899
|
-
display2: newStyled.h2(templateObject_5$
|
|
4895
|
+
hero1: newStyled.h1(templateObject_1$2r || (templateObject_1$2r = __makeTemplateObject([""], [""]))),
|
|
4896
|
+
hero2: newStyled.h2(templateObject_2$1N || (templateObject_2$1N = __makeTemplateObject([""], [""]))),
|
|
4897
|
+
hero3: newStyled.h3(templateObject_3$1q || (templateObject_3$1q = __makeTemplateObject([""], [""]))),
|
|
4898
|
+
display1: newStyled.h1(templateObject_4$18 || (templateObject_4$18 = __makeTemplateObject([""], [""]))),
|
|
4899
|
+
display2: newStyled.h2(templateObject_5$T || (templateObject_5$T = __makeTemplateObject([""], [""]))),
|
|
4900
4900
|
display3: newStyled.h3(templateObject_6$J || (templateObject_6$J = __makeTemplateObject([""], [""]))),
|
|
4901
4901
|
heading1: newStyled.h1(templateObject_7$A || (templateObject_7$A = __makeTemplateObject([""], [""]))),
|
|
4902
4902
|
heading2: newStyled.h2(templateObject_8$t || (templateObject_8$t = __makeTemplateObject([""], [""]))),
|
|
@@ -5032,13 +5032,13 @@ var DEFAULTS = {
|
|
|
5032
5032
|
size: 'regular',
|
|
5033
5033
|
},
|
|
5034
5034
|
};
|
|
5035
|
-
var templateObject_1$
|
|
5035
|
+
var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$18, templateObject_5$T, templateObject_6$J, templateObject_7$A, templateObject_8$t, templateObject_9$g, templateObject_10$e, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
5036
5036
|
|
|
5037
|
-
var Container$1u = newStyled.div(templateObject_1$
|
|
5038
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
5039
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
5040
|
-
var Label$7 = newStyled.div(templateObject_4$
|
|
5041
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
5037
|
+
var Container$1u = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __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"])));
|
|
5038
|
+
var Card$4 = newStyled.div(templateObject_2$1M || (templateObject_2$1M = __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"])));
|
|
5039
|
+
var Tag$2 = newStyled.div(templateObject_3$1p || (templateObject_3$1p = __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"])));
|
|
5040
|
+
var Label$7 = newStyled.div(templateObject_4$17 || (templateObject_4$17 = __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"])));
|
|
5041
|
+
var Check$1 = newStyled.div(templateObject_5$S || (templateObject_5$S = __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"])));
|
|
5042
5042
|
var DiscountContainer$1 = newStyled.div(templateObject_6$I || (templateObject_6$I = __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"])));
|
|
5043
5043
|
var PackSelectorV2 = function (_a) {
|
|
5044
5044
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -5064,27 +5064,27 @@ var PackCard$1 = function (_a) {
|
|
|
5064
5064
|
currency: currencyCode || 'USD',
|
|
5065
5065
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5066
5066
|
};
|
|
5067
|
-
var templateObject_1$
|
|
5067
|
+
var templateObject_1$2q, templateObject_2$1M, templateObject_3$1p, templateObject_4$17, templateObject_5$S, templateObject_6$I;
|
|
5068
5068
|
|
|
5069
|
-
var Container$1t = newStyled.div(templateObject_1$
|
|
5070
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
5069
|
+
var Container$1t = newStyled.div(templateObject_1$2p || (templateObject_1$2p = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5070
|
+
var DropContainer = newStyled.div(templateObject_2$1L || (templateObject_2$1L = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5071
5071
|
var DropList = function (_a) {
|
|
5072
5072
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5073
5073
|
return (jsxRuntime.jsx(Container$1t, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5074
5074
|
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));
|
|
5075
5075
|
}) }, void 0));
|
|
5076
5076
|
};
|
|
5077
|
-
var templateObject_1$
|
|
5077
|
+
var templateObject_1$2p, templateObject_2$1L;
|
|
5078
5078
|
|
|
5079
5079
|
var DROPS_TOTAL = 5;
|
|
5080
|
-
var Container$1s = newStyled.div(templateObject_1$
|
|
5081
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5082
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
5080
|
+
var Container$1s = newStyled.div(templateObject_1$2o || (templateObject_1$2o = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5081
|
+
var Title$b = newStyled.p(templateObject_2$1K || (templateObject_2$1K = __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"])));
|
|
5082
|
+
var Description$3 = newStyled.p(templateObject_3$1o || (templateObject_3$1o = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-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"])));
|
|
5083
5083
|
var AbsorbencyLevel = function (_a) {
|
|
5084
5084
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5085
5085
|
return (jsxRuntime.jsxs(Container$1s, { 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));
|
|
5086
5086
|
};
|
|
5087
|
-
var templateObject_1$
|
|
5087
|
+
var templateObject_1$2o, templateObject_2$1K, templateObject_3$1o;
|
|
5088
5088
|
|
|
5089
5089
|
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(`
|
|
5090
5090
|
`),"","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(`
|
|
@@ -5160,7 +5160,7 @@ var StyledButton$4 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5160
5160
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5161
5161
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5162
5162
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5163
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5163
|
+
var StyledContent$1 = newStyled.button(templateObject_1$2n || (templateObject_1$2n = __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"])));
|
|
5164
5164
|
var Accordion$1 = function (_a) {
|
|
5165
5165
|
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;
|
|
5166
5166
|
var theme = useTheme();
|
|
@@ -5184,9 +5184,9 @@ var Accordion$1 = function (_a) {
|
|
|
5184
5184
|
} }, { 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));
|
|
5185
5185
|
} }), void 0));
|
|
5186
5186
|
};
|
|
5187
|
-
var templateObject_1$
|
|
5187
|
+
var templateObject_1$2n;
|
|
5188
5188
|
|
|
5189
|
-
var Container$1r = newStyled.div(templateObject_1$
|
|
5189
|
+
var Container$1r = newStyled.div(templateObject_1$2m || (templateObject_1$2m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5190
5190
|
var AccordionOptions = function (_a) {
|
|
5191
5191
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5192
5192
|
var _b = React$2.useState({
|
|
@@ -5210,7 +5210,7 @@ var AccordionOptions = function (_a) {
|
|
|
5210
5210
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5211
5211
|
}) }, void 0));
|
|
5212
5212
|
};
|
|
5213
|
-
var templateObject_1$
|
|
5213
|
+
var templateObject_1$2m;
|
|
5214
5214
|
|
|
5215
5215
|
var isDangerouslySetInnerHTML = function (content) {
|
|
5216
5216
|
return content && typeof content === 'object' && '__html' in content;
|
|
@@ -5423,22 +5423,22 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5423
5423
|
literal: true,
|
|
5424
5424
|
});
|
|
5425
5425
|
|
|
5426
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5427
|
-
var FlexContainer$5 = newStyled.div(templateObject_2$
|
|
5428
|
-
var templateObject_1$
|
|
5426
|
+
var Bold = newStyled.span(templateObject_1$2l || (templateObject_1$2l = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5427
|
+
var FlexContainer$5 = newStyled.div(templateObject_2$1J || (templateObject_2$1J = __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"])));
|
|
5428
|
+
var templateObject_1$2l, templateObject_2$1J;
|
|
5429
5429
|
|
|
5430
|
-
var Container$1q = newStyled.div(templateObject_1$
|
|
5430
|
+
var Container$1q = newStyled.div(templateObject_1$2k || (templateObject_1$2k = __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) {
|
|
5431
5431
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5432
5432
|
return width;
|
|
5433
5433
|
}, function (_a) {
|
|
5434
5434
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5435
5435
|
return height;
|
|
5436
5436
|
});
|
|
5437
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5438
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5439
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5440
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5441
|
-
var templateObject_1$
|
|
5437
|
+
var FlexCentered = newStyled.div(templateObject_2$1I || (templateObject_2$1I = __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"])));
|
|
5438
|
+
var LeftSide = newStyled.div(templateObject_3$1n || (templateObject_3$1n = __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"])));
|
|
5439
|
+
var RightSide = newStyled.div(templateObject_4$16 || (templateObject_4$16 = __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"])));
|
|
5440
|
+
var FlexStart = newStyled.div(templateObject_5$R || (templateObject_5$R = __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"])));
|
|
5441
|
+
var templateObject_1$2k, templateObject_2$1I, templateObject_3$1n, templateObject_4$16, templateObject_5$R;
|
|
5442
5442
|
|
|
5443
5443
|
var CouponCard = function (_a) {
|
|
5444
5444
|
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;
|
|
@@ -5526,14 +5526,14 @@ var isValidDate = function (value) {
|
|
|
5526
5526
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5527
5527
|
};
|
|
5528
5528
|
|
|
5529
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5530
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5529
|
+
var ErrorText = newStyled.h3(templateObject_1$2j || (templateObject_1$2j = __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; });
|
|
5530
|
+
var ErrorContainer = newStyled.div(templateObject_2$1H || (templateObject_2$1H = __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"])));
|
|
5531
5531
|
var Error$1 = function (_a) {
|
|
5532
5532
|
var error = _a.error;
|
|
5533
5533
|
var theme = useTheme();
|
|
5534
5534
|
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));
|
|
5535
5535
|
};
|
|
5536
|
-
var templateObject_1$
|
|
5536
|
+
var templateObject_1$2j, templateObject_2$1H;
|
|
5537
5537
|
|
|
5538
5538
|
var BaseSelectButton = function (_a) {
|
|
5539
5539
|
var children = _a.children, as = _a.as;
|
|
@@ -5550,7 +5550,7 @@ function BaseSelectOption(_a) {
|
|
|
5550
5550
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5551
5551
|
}
|
|
5552
5552
|
|
|
5553
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5553
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5554
5554
|
function BaseSelect(_a) {
|
|
5555
5555
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5556
5556
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5560,7 +5560,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5560
5560
|
Options: BaseSelectOptions,
|
|
5561
5561
|
Option: BaseSelectOption,
|
|
5562
5562
|
});
|
|
5563
|
-
var templateObject_1$
|
|
5563
|
+
var templateObject_1$2i;
|
|
5564
5564
|
|
|
5565
5565
|
var CustomButton = newStyled.button(function (_a) {
|
|
5566
5566
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5599,7 +5599,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5599
5599
|
});
|
|
5600
5600
|
});
|
|
5601
5601
|
// TODO Remove this when we find the real solution
|
|
5602
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5602
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$2h || (templateObject_1$2h = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5603
5603
|
var open = _a.open;
|
|
5604
5604
|
return open &&
|
|
5605
5605
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5619,7 +5619,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5619
5619
|
} }), void 0));
|
|
5620
5620
|
};
|
|
5621
5621
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5622
|
-
var templateObject_1$
|
|
5622
|
+
var templateObject_1$2h;
|
|
5623
5623
|
|
|
5624
5624
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5625
5625
|
var theme = _a.theme;
|
|
@@ -5786,7 +5786,7 @@ var CustomCheckboxStyles = {
|
|
|
5786
5786
|
},
|
|
5787
5787
|
};
|
|
5788
5788
|
|
|
5789
|
-
var Container$1p = newStyled.div(templateObject_1$
|
|
5789
|
+
var Container$1p = newStyled.div(templateObject_1$2g || (templateObject_1$2g = __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"])));
|
|
5790
5790
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5791
5791
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5792
5792
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5797,7 +5797,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5797
5797
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5798
5798
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5799
5799
|
]; });
|
|
5800
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5800
|
+
var Input$5 = newStyled.input(templateObject_2$1G || (templateObject_2$1G = __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) {
|
|
5801
5801
|
var disabled = _a.disabled;
|
|
5802
5802
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5803
5803
|
});
|
|
@@ -5815,7 +5815,7 @@ var Checkbox = function (_a) {
|
|
|
5815
5815
|
? theme.colors.shades['black'].color
|
|
5816
5816
|
: theme.colors.shades['white'].color }, 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));
|
|
5817
5817
|
};
|
|
5818
|
-
var templateObject_1$
|
|
5818
|
+
var templateObject_1$2g, templateObject_2$1G;
|
|
5819
5819
|
|
|
5820
5820
|
var CustomOption = newStyled.li(function (_a) {
|
|
5821
5821
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5864,9 +5864,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5864
5864
|
Option: BaseDropdownOption,
|
|
5865
5865
|
});
|
|
5866
5866
|
|
|
5867
|
-
var Container$1o = newStyled.div(templateObject_1$
|
|
5868
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5869
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5867
|
+
var Container$1o = newStyled.div(templateObject_1$2f || (templateObject_1$2f = __makeTemplateObject([""], [""])));
|
|
5868
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1F || (templateObject_2$1F = __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"])));
|
|
5869
|
+
var SelectedOption = newStyled.span(templateObject_3$1m || (templateObject_3$1m = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5870
5870
|
var fontWeight = _a.fontWeight;
|
|
5871
5871
|
return fontWeight || '';
|
|
5872
5872
|
});
|
|
@@ -5902,7 +5902,7 @@ function SimpleDropdown(_a) {
|
|
|
5902
5902
|
var DropdownContainer = showRequiredPlaceholder ? Container$1o : React$2.Fragment;
|
|
5903
5903
|
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));
|
|
5904
5904
|
}
|
|
5905
|
-
var templateObject_1$
|
|
5905
|
+
var templateObject_1$2f, templateObject_2$1F, templateObject_3$1m;
|
|
5906
5906
|
|
|
5907
5907
|
/* base styles & size variants */
|
|
5908
5908
|
var CustomRadioStyles$2 = {
|
|
@@ -5967,9 +5967,9 @@ var ContainerStyles$2 = {
|
|
|
5967
5967
|
},
|
|
5968
5968
|
};
|
|
5969
5969
|
|
|
5970
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5970
|
+
var Wrapper$7 = newStyled.div(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5971
5971
|
var Container$1n = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5972
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5972
|
+
var Input$4 = newStyled.input(templateObject_2$1E || (templateObject_2$1E = __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) {
|
|
5973
5973
|
var disabled = _a.disabled;
|
|
5974
5974
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5975
5975
|
});
|
|
@@ -5977,14 +5977,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5977
5977
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5978
5978
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5979
5979
|
]; });
|
|
5980
|
-
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$
|
|
5980
|
+
var StyledLabel$3 = newStyled(Label$6)(templateObject_3$1l || (templateObject_3$1l = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5981
5981
|
var theme = _a.theme;
|
|
5982
5982
|
return theme.component.radio.textSize;
|
|
5983
5983
|
}, function (_a) {
|
|
5984
5984
|
var theme = _a.theme;
|
|
5985
5985
|
return theme.component.radio.lineHeight;
|
|
5986
5986
|
});
|
|
5987
|
-
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$
|
|
5987
|
+
var StyledLabelV2 = newStyled(Label$6)(templateObject_4$15 || (templateObject_4$15 = __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) {
|
|
5988
5988
|
var theme = _a.theme;
|
|
5989
5989
|
return theme.component.radio.textSize;
|
|
5990
5990
|
}, function (_a) {
|
|
@@ -6003,7 +6003,7 @@ var RadioInput = function (_a) {
|
|
|
6003
6003
|
};
|
|
6004
6004
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$1n, __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));
|
|
6005
6005
|
};
|
|
6006
|
-
var templateObject_1$
|
|
6006
|
+
var templateObject_1$2e, templateObject_2$1E, templateObject_3$1l, templateObject_4$15;
|
|
6007
6007
|
|
|
6008
6008
|
var useOnClickOutside = function (ref, handler) {
|
|
6009
6009
|
React$2.useEffect(function () {
|
|
@@ -6096,7 +6096,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6096
6096
|
}
|
|
6097
6097
|
};
|
|
6098
6098
|
|
|
6099
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
6099
|
+
var Wrapper$6 = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __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) {
|
|
6100
6100
|
var position = _a.position;
|
|
6101
6101
|
return getWrapperFlexDirection(position);
|
|
6102
6102
|
}, function (_a) {
|
|
@@ -6106,7 +6106,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __ma
|
|
|
6106
6106
|
var disableHover = _a.disableHover;
|
|
6107
6107
|
return (disableHover ? 0 : 1);
|
|
6108
6108
|
});
|
|
6109
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6109
|
+
var TooltipContainer = newStyled.div(templateObject_2$1D || (templateObject_2$1D = __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) {
|
|
6110
6110
|
var position = _a.position;
|
|
6111
6111
|
return getContainerFlexDirection(position);
|
|
6112
6112
|
}, function (_a) {
|
|
@@ -6134,14 +6134,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1C || (templateObject_2$1C
|
|
|
6134
6134
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6135
6135
|
return actual === expected ? margin : '0';
|
|
6136
6136
|
};
|
|
6137
|
-
var ContentWrapper$1 = newStyled.div(templateObject_3$
|
|
6137
|
+
var ContentWrapper$1 = newStyled.div(templateObject_3$1k || (templateObject_3$1k = __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) {
|
|
6138
6138
|
var borderColor = _a.borderColor;
|
|
6139
6139
|
return borderColor;
|
|
6140
6140
|
}, function (_a) {
|
|
6141
6141
|
var backgroundColor = _a.backgroundColor;
|
|
6142
6142
|
return backgroundColor;
|
|
6143
6143
|
});
|
|
6144
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
6144
|
+
var TooltipText = newStyled.div(templateObject_4$14 || (templateObject_4$14 = __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) {
|
|
6145
6145
|
var theme = _a.theme;
|
|
6146
6146
|
return theme.component.autoship.tooltip.text.alignment;
|
|
6147
6147
|
}, function (_a) {
|
|
@@ -6151,7 +6151,7 @@ var TooltipText = newStyled.div(templateObject_4$13 || (templateObject_4$13 = __
|
|
|
6151
6151
|
var color = _a.color;
|
|
6152
6152
|
return color;
|
|
6153
6153
|
});
|
|
6154
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
6154
|
+
var TopSection = newStyled.div(templateObject_5$Q || (templateObject_5$Q = __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"])));
|
|
6155
6155
|
var Title$a = newStyled.h1(templateObject_6$H || (templateObject_6$H = __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) {
|
|
6156
6156
|
var color = _a.color;
|
|
6157
6157
|
return color;
|
|
@@ -6161,7 +6161,7 @@ var CloseToolTip = newStyled.button(templateObject_8$s || (templateObject_8$s =
|
|
|
6161
6161
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6162
6162
|
return right;
|
|
6163
6163
|
});
|
|
6164
|
-
var templateObject_1$
|
|
6164
|
+
var templateObject_1$2d, templateObject_2$1D, templateObject_3$1k, templateObject_4$14, templateObject_5$Q, templateObject_6$H, templateObject_7$z, templateObject_8$s;
|
|
6165
6165
|
|
|
6166
6166
|
var Tooltip = function (_a) {
|
|
6167
6167
|
var _b;
|
|
@@ -6204,8 +6204,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
6204
6204
|
};
|
|
6205
6205
|
};
|
|
6206
6206
|
|
|
6207
|
-
var FlexContainer$4 = newStyled.div(templateObject_1$
|
|
6208
|
-
var ContainerBase$5 = newStyled.div(templateObject_2$
|
|
6207
|
+
var FlexContainer$4 = newStyled.div(templateObject_1$2c || (templateObject_1$2c = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6208
|
+
var ContainerBase$5 = newStyled.div(templateObject_2$1C || (templateObject_2$1C = __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) {
|
|
6209
6209
|
var selected = _a.selected, theme = _a.theme;
|
|
6210
6210
|
return selected
|
|
6211
6211
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6219,12 +6219,12 @@ var ContainerBase$5 = newStyled.div(templateObject_2$1B || (templateObject_2$1B
|
|
|
6219
6219
|
var theme = _a.theme;
|
|
6220
6220
|
return theme.colors.pallete.primary.color;
|
|
6221
6221
|
});
|
|
6222
|
-
var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$
|
|
6222
|
+
var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$1j || (templateObject_3$1j = __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) {
|
|
6223
6223
|
var onClick = _a.onClick;
|
|
6224
6224
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6225
6225
|
});
|
|
6226
|
-
var SubscriptionContainer$5 = newStyled(ContainerBase$5)(templateObject_4$
|
|
6227
|
-
var SubscriptionHeader$5 = newStyled.div(templateObject_5$
|
|
6226
|
+
var SubscriptionContainer$5 = newStyled(ContainerBase$5)(templateObject_4$13 || (templateObject_4$13 = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6227
|
+
var SubscriptionHeader$5 = newStyled.div(templateObject_5$P || (templateObject_5$P = __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) {
|
|
6228
6228
|
var theme = _a.theme;
|
|
6229
6229
|
return theme.colors.shades[200].color;
|
|
6230
6230
|
}, function (_a) {
|
|
@@ -6242,7 +6242,7 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6242
6242
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6243
6243
|
});
|
|
6244
6244
|
var Container$1m = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6245
|
-
var templateObject_1$
|
|
6245
|
+
var templateObject_1$2c, templateObject_2$1C, templateObject_3$1j, templateObject_4$13, templateObject_5$P, templateObject_6$G, templateObject_7$y, templateObject_8$r, templateObject_9$f, templateObject_10$d, templateObject_11$9, templateObject_12$6, templateObject_13$5;
|
|
6246
6246
|
|
|
6247
6247
|
var radioIds$3 = {
|
|
6248
6248
|
oneTime: {
|
|
@@ -6297,12 +6297,12 @@ var Autoship = function (_a) {
|
|
|
6297
6297
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$4, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$3.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$4, { 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$4, { 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));
|
|
6298
6298
|
};
|
|
6299
6299
|
|
|
6300
|
-
var FlexContainer$3 = newStyled.div(templateObject_1$
|
|
6300
|
+
var FlexContainer$3 = newStyled.div(templateObject_1$2b || (templateObject_1$2b = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6301
6301
|
var theme = _a.theme;
|
|
6302
6302
|
return theme.name === 'TheSpaDr' &&
|
|
6303
6303
|
"\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 ";
|
|
6304
6304
|
});
|
|
6305
|
-
var DiscountTag$3 = newStyled.div(templateObject_2$
|
|
6305
|
+
var DiscountTag$3 = newStyled.div(templateObject_2$1B || (templateObject_2$1B = __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) {
|
|
6306
6306
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6307
6307
|
return isSelected
|
|
6308
6308
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6318,7 +6318,7 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6318
6318
|
}
|
|
6319
6319
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6320
6320
|
};
|
|
6321
|
-
var ContainerBase$4 = newStyled.div(templateObject_3$
|
|
6321
|
+
var ContainerBase$4 = newStyled.div(templateObject_3$1i || (templateObject_3$1i = __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) {
|
|
6322
6322
|
var selected = _a.selected, theme = _a.theme;
|
|
6323
6323
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6324
6324
|
}, function (_a) {
|
|
@@ -6330,11 +6330,11 @@ var ContainerBase$4 = newStyled.div(templateObject_3$1h || (templateObject_3$1h
|
|
|
6330
6330
|
var theme = _a.theme;
|
|
6331
6331
|
return theme.colors.pallete.primary.color;
|
|
6332
6332
|
});
|
|
6333
|
-
var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4$
|
|
6333
|
+
var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4$12 || (templateObject_4$12 = __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) {
|
|
6334
6334
|
var onClick = _a.onClick;
|
|
6335
6335
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6336
6336
|
});
|
|
6337
|
-
var SubscriptionContainer$4 = newStyled(ContainerBase$4)(templateObject_5$
|
|
6337
|
+
var SubscriptionContainer$4 = newStyled(ContainerBase$4)(templateObject_5$O || (templateObject_5$O = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6338
6338
|
var SubscriptionHeader$4 = newStyled.div(templateObject_6$F || (templateObject_6$F = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6339
6339
|
var theme = _a.theme;
|
|
6340
6340
|
return theme.colors.shades[200].color;
|
|
@@ -6355,7 +6355,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4
|
|
|
6355
6355
|
var theme = _a.theme;
|
|
6356
6356
|
return theme.component.autoship.tooltip.margin;
|
|
6357
6357
|
});
|
|
6358
|
-
var templateObject_1$
|
|
6358
|
+
var templateObject_1$2b, templateObject_2$1B, templateObject_3$1i, templateObject_4$12, templateObject_5$O, templateObject_6$F, templateObject_7$x, templateObject_8$q, templateObject_9$e, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$4;
|
|
6359
6359
|
|
|
6360
6360
|
var radioIds$2 = {
|
|
6361
6361
|
oneTime: {
|
|
@@ -6434,13 +6434,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6434
6434
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6435
6435
|
_a$2);
|
|
6436
6436
|
|
|
6437
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6438
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6439
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6440
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6441
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6437
|
+
var CustomerDetails = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject([""], [""])));
|
|
6438
|
+
var CustomerInfo = newStyled.div(templateObject_2$1A || (templateObject_2$1A = __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"])));
|
|
6439
|
+
var Name = newStyled.h4(templateObject_3$1h || (templateObject_3$1h = __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"])));
|
|
6440
|
+
var StarIconContainer = newStyled.div(templateObject_4$11 || (templateObject_4$11 = __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"])));
|
|
6441
|
+
var Description$2 = newStyled.p(templateObject_5$N || (templateObject_5$N = __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"])));
|
|
6442
6442
|
var ReviewDays = newStyled.span(templateObject_6$E || (templateObject_6$E = __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"])));
|
|
6443
|
-
var templateObject_1$
|
|
6443
|
+
var templateObject_1$2a, templateObject_2$1A, templateObject_3$1h, templateObject_4$11, templateObject_5$N, templateObject_6$E;
|
|
6444
6444
|
|
|
6445
6445
|
var NameWithStars = function (_a) {
|
|
6446
6446
|
var name = _a.name, size = _a.size;
|
|
@@ -6458,10 +6458,10 @@ var ResultFeedback = function (_a) {
|
|
|
6458
6458
|
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));
|
|
6459
6459
|
};
|
|
6460
6460
|
|
|
6461
|
-
var Container$1k = newStyled.div(templateObject_1$
|
|
6462
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6463
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6464
|
-
var UserInfoText = newStyled.div(templateObject_4
|
|
6461
|
+
var Container$1k = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __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; });
|
|
6462
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __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"])));
|
|
6463
|
+
var ImageCard = newStyled.div(templateObject_3$1g || (templateObject_3$1g = __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; });
|
|
6464
|
+
var UserInfoText = newStyled.div(templateObject_4$10 || (templateObject_4$10 = __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) {
|
|
6465
6465
|
var theme = _a.theme;
|
|
6466
6466
|
return theme.colors.pallete.secondary.color;
|
|
6467
6467
|
}, function (_a) {
|
|
@@ -6471,7 +6471,7 @@ var UserInfoText = newStyled.div(templateObject_4$$ || (templateObject_4$$ = __m
|
|
|
6471
6471
|
var theme = _a.theme, size = _a.size;
|
|
6472
6472
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6473
6473
|
});
|
|
6474
|
-
var templateObject_1$
|
|
6474
|
+
var templateObject_1$29, templateObject_2$1z, templateObject_3$1g, templateObject_4$10;
|
|
6475
6475
|
|
|
6476
6476
|
/* base styles & size variants */
|
|
6477
6477
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6549,7 +6549,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6549
6549
|
return (jsxRuntime.jsxs(Container$1k, __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));
|
|
6550
6550
|
};
|
|
6551
6551
|
|
|
6552
|
-
var Section = newStyled.div(templateObject_1$
|
|
6552
|
+
var Section = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __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) {
|
|
6553
6553
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6554
6554
|
});
|
|
6555
6555
|
var CardHeader = function (_a) {
|
|
@@ -6560,16 +6560,16 @@ var CardFooter = function (_a) {
|
|
|
6560
6560
|
var children = _a.children;
|
|
6561
6561
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6562
6562
|
};
|
|
6563
|
-
var templateObject_1$
|
|
6563
|
+
var templateObject_1$28;
|
|
6564
6564
|
|
|
6565
|
-
var Body$3 = newStyled.div(templateObject_1$
|
|
6565
|
+
var Body$3 = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __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"])));
|
|
6566
6566
|
var CardBody$1 = function (_a) {
|
|
6567
6567
|
var children = _a.children;
|
|
6568
6568
|
return jsxRuntime.jsx(Body$3, { children: children }, void 0);
|
|
6569
6569
|
};
|
|
6570
|
-
var templateObject_1$
|
|
6570
|
+
var templateObject_1$27;
|
|
6571
6571
|
|
|
6572
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
6572
|
+
var Container$1j = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __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) {
|
|
6573
6573
|
var flex = _a.flex;
|
|
6574
6574
|
return flex &&
|
|
6575
6575
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6591,16 +6591,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6591
6591
|
Footer: CardFooter,
|
|
6592
6592
|
Body: CardBody$1,
|
|
6593
6593
|
});
|
|
6594
|
-
var templateObject_1$
|
|
6594
|
+
var templateObject_1$26;
|
|
6595
6595
|
|
|
6596
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6597
|
-
var StyledContainer$1 = newStyled.div(templateObject_2$
|
|
6598
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6596
|
+
var StyledWrapper = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __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"])));
|
|
6597
|
+
var StyledContainer$1 = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __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"])));
|
|
6598
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$1f || (templateObject_3$1f = __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) {
|
|
6599
6599
|
var color = _a.color;
|
|
6600
6600
|
return color;
|
|
6601
6601
|
});
|
|
6602
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4
|
|
6603
|
-
var templateObject_1$
|
|
6602
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$$ || (templateObject_4$$ = __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"])));
|
|
6603
|
+
var templateObject_1$25, templateObject_2$1y, templateObject_3$1f, templateObject_4$$;
|
|
6604
6604
|
|
|
6605
6605
|
var Minimalistic = function (_a) {
|
|
6606
6606
|
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;
|
|
@@ -6608,24 +6608,24 @@ var Minimalistic = function (_a) {
|
|
|
6608
6608
|
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$1, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer$1, { 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$1, __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));
|
|
6609
6609
|
};
|
|
6610
6610
|
|
|
6611
|
-
var StyledContainer = newStyled.div(templateObject_1$
|
|
6612
|
-
var templateObject_1$
|
|
6611
|
+
var StyledContainer = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 12px;\n @media (max-width: 992px) {\n padding: 0.62px;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 12px;\n @media (max-width: 992px) {\n padding: 0.62px;\n"])));
|
|
6612
|
+
var templateObject_1$24;
|
|
6613
6613
|
|
|
6614
6614
|
var Motivator = function (_a) {
|
|
6615
6615
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, content = _a.content, _d = _a.testId, testId = _d === void 0 ? 'motivator' : _d;
|
|
6616
6616
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: true, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsx(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: typeof content === 'string' ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: content }), void 0)) : (content) }), void 0) }), void 0));
|
|
6617
6617
|
};
|
|
6618
6618
|
|
|
6619
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
6620
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6621
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6622
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6619
|
+
var Container$1i = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6620
|
+
var Title$9 = newStyled.h1(templateObject_2$1x || (templateObject_2$1x = __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; });
|
|
6621
|
+
var Details$1 = newStyled.span(templateObject_3$1e || (templateObject_3$1e = __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; });
|
|
6622
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$_ || (templateObject_4$_ = __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"])));
|
|
6623
6623
|
var Simple = function (_a) {
|
|
6624
6624
|
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;
|
|
6625
6625
|
var theme = useTheme();
|
|
6626
6626
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$1i, { 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));
|
|
6627
6627
|
};
|
|
6628
|
-
var templateObject_1$
|
|
6628
|
+
var templateObject_1$23, templateObject_2$1x, templateObject_3$1e, templateObject_4$_;
|
|
6629
6629
|
|
|
6630
6630
|
var Bundle = {
|
|
6631
6631
|
Minimalistic: Minimalistic,
|
|
@@ -6633,12 +6633,12 @@ var Bundle = {
|
|
|
6633
6633
|
Motivator: Motivator,
|
|
6634
6634
|
};
|
|
6635
6635
|
|
|
6636
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
6636
|
+
var Container$1h = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __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) {
|
|
6637
6637
|
var displayBNPL = _a.displayBNPL;
|
|
6638
6638
|
return (displayBNPL ? 'flex' : 'none');
|
|
6639
6639
|
});
|
|
6640
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6641
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6640
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __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"])));
|
|
6641
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __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"])));
|
|
6642
6642
|
var BuyNowPayLater = function (_a) {
|
|
6643
6643
|
var _b;
|
|
6644
6644
|
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;
|
|
@@ -6665,9 +6665,9 @@ var BuyNowPayLater = function (_a) {
|
|
|
6665
6665
|
paddingRight: '0.25rem',
|
|
6666
6666
|
}, 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));
|
|
6667
6667
|
};
|
|
6668
|
-
var templateObject_1$
|
|
6668
|
+
var templateObject_1$22, templateObject_2$1w, templateObject_3$1d;
|
|
6669
6669
|
|
|
6670
|
-
var Text$6 = newStyled.h3(templateObject_1$
|
|
6670
|
+
var Text$6 = newStyled.h3(templateObject_1$21 || (templateObject_1$21 = __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) {
|
|
6671
6671
|
var backgroundColor = _a.backgroundColor;
|
|
6672
6672
|
return backgroundColor;
|
|
6673
6673
|
}, function (_a) {
|
|
@@ -6682,42 +6682,42 @@ var OfferBanner = function (_a) {
|
|
|
6682
6682
|
var theme = useTheme();
|
|
6683
6683
|
return (jsxRuntime.jsx(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6684
6684
|
};
|
|
6685
|
-
var templateObject_1$
|
|
6685
|
+
var templateObject_1$21;
|
|
6686
6686
|
|
|
6687
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
6687
|
+
var Container$1g = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __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"); });
|
|
6688
6688
|
var CloseButton$1 = function (_a) {
|
|
6689
6689
|
var onClick = _a.onClick, size = _a.size;
|
|
6690
6690
|
var theme = useTheme();
|
|
6691
6691
|
return (jsxRuntime.jsx(Container$1g, __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));
|
|
6692
6692
|
};
|
|
6693
|
-
var templateObject_1$
|
|
6693
|
+
var templateObject_1$20;
|
|
6694
6694
|
|
|
6695
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6695
|
+
var Text$5 = newStyled.span(templateObject_1$1$ || (templateObject_1$1$ = __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; });
|
|
6696
6696
|
var Description$1 = function (_a) {
|
|
6697
6697
|
var text = _a.text;
|
|
6698
6698
|
var theme = useTheme();
|
|
6699
6699
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6700
6700
|
};
|
|
6701
|
-
var templateObject_1$
|
|
6701
|
+
var templateObject_1$1$;
|
|
6702
6702
|
|
|
6703
|
-
var P$4 = newStyled.p(templateObject_1$
|
|
6703
|
+
var P$4 = newStyled.p(templateObject_1$1_ || (templateObject_1$1_ = __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; });
|
|
6704
6704
|
var Promo = function (_a) {
|
|
6705
6705
|
var text = _a.text;
|
|
6706
6706
|
var theme = useTheme();
|
|
6707
6707
|
return (jsxRuntime.jsx(P$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6708
6708
|
};
|
|
6709
|
-
var templateObject_1$
|
|
6709
|
+
var templateObject_1$1_;
|
|
6710
6710
|
|
|
6711
|
-
var Text$4 = newStyled.span(templateObject_1$
|
|
6711
|
+
var Text$4 = newStyled.span(templateObject_1$1Z || (templateObject_1$1Z = __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; });
|
|
6712
6712
|
var Title$8 = function (_a) {
|
|
6713
6713
|
var title = _a.title;
|
|
6714
6714
|
var theme = useTheme();
|
|
6715
6715
|
return jsxRuntime.jsx(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6716
6716
|
};
|
|
6717
|
-
var templateObject_1$
|
|
6717
|
+
var templateObject_1$1Z;
|
|
6718
6718
|
|
|
6719
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
6720
|
-
var templateObject_1$
|
|
6719
|
+
var Container$1f = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"], ["\n margin: 0;\n padding: 0 0.1rem;\n display: inline-flex;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: flex-end;\n align-items: flex-start;\n"])), function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6720
|
+
var templateObject_1$1Y;
|
|
6721
6721
|
|
|
6722
6722
|
var TrashButton = function (_a) {
|
|
6723
6723
|
var onClick = _a.onClick, size = _a.size;
|
|
@@ -6734,11 +6734,11 @@ var CartProductItem = {
|
|
|
6734
6734
|
TrashButton: TrashButton,
|
|
6735
6735
|
};
|
|
6736
6736
|
|
|
6737
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
6738
|
-
var MobileContainer = newStyled(Container$1e)(templateObject_2$
|
|
6739
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6740
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6741
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6737
|
+
var Container$1e = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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"])));
|
|
6738
|
+
var MobileContainer = newStyled(Container$1e)(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6739
|
+
var DollarPart = newStyled.span(templateObject_3$1c || (templateObject_3$1c = __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"])));
|
|
6740
|
+
var ClubMembersText = newStyled.span(templateObject_4$Z || (templateObject_4$Z = __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"])));
|
|
6741
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$M || (templateObject_5$M = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6742
6742
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6743
6743
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$w || (templateObject_7$w = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6744
6744
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$p || (templateObject_8$p = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6747,7 +6747,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6747
6747
|
var isMobile = useWindowDimensions().isMobile;
|
|
6748
6748
|
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$1e, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6749
6749
|
};
|
|
6750
|
-
var templateObject_1$
|
|
6750
|
+
var templateObject_1$1X, templateObject_2$1v, templateObject_3$1c, templateObject_4$Z, templateObject_5$M, templateObject_6$D, templateObject_7$w, templateObject_8$p;
|
|
6751
6751
|
|
|
6752
6752
|
var Spacing = function (_a) {
|
|
6753
6753
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6755,10 +6755,10 @@ var Spacing = function (_a) {
|
|
|
6755
6755
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6756
6756
|
};
|
|
6757
6757
|
|
|
6758
|
-
var Container$1d = newStyled('div')(templateObject_1$
|
|
6759
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6760
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6761
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6758
|
+
var Container$1d = newStyled('div')(templateObject_1$1W || (templateObject_1$1W = __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"])));
|
|
6759
|
+
var Content$2 = newStyled('div')(templateObject_2$1u || (templateObject_2$1u = __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"])));
|
|
6760
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$1b || (templateObject_3$1b = __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"])));
|
|
6761
|
+
var Bar$2 = newStyled('div')(templateObject_4$Y || (templateObject_4$Y = __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) {
|
|
6762
6762
|
var index = _a.index;
|
|
6763
6763
|
return "".concat(6 + 3 * index, "px");
|
|
6764
6764
|
}, function (_a) {
|
|
@@ -6769,10 +6769,10 @@ var StrengthBars = function (_a) {
|
|
|
6769
6769
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6770
6770
|
return (jsxRuntime.jsxs(Container$1d, __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));
|
|
6771
6771
|
};
|
|
6772
|
-
var templateObject_1$
|
|
6772
|
+
var templateObject_1$1W, templateObject_2$1u, templateObject_3$1b, templateObject_4$Y;
|
|
6773
6773
|
|
|
6774
|
-
var Benefit$2 = newStyled.div(templateObject_1$
|
|
6775
|
-
var templateObject_1$
|
|
6774
|
+
var Benefit$2 = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
6775
|
+
var templateObject_1$1V;
|
|
6776
6776
|
|
|
6777
6777
|
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;}}";
|
|
6778
6778
|
|
|
@@ -6794,10 +6794,10 @@ var OfferAtCartBenefits = function (_a) {
|
|
|
6794
6794
|
|
|
6795
6795
|
var STARTS_NUMBER = 5;
|
|
6796
6796
|
|
|
6797
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
6798
|
-
var templateObject_1$
|
|
6797
|
+
var Container$1c = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6798
|
+
var templateObject_1$1U;
|
|
6799
6799
|
|
|
6800
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6800
|
+
var StarContainer = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6801
6801
|
var marginRight = _a.marginRight;
|
|
6802
6802
|
return marginRight;
|
|
6803
6803
|
});
|
|
@@ -6813,7 +6813,7 @@ var StarList = function (_a) {
|
|
|
6813
6813
|
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)));
|
|
6814
6814
|
}) }, void 0));
|
|
6815
6815
|
};
|
|
6816
|
-
var templateObject_1$
|
|
6816
|
+
var templateObject_1$1T;
|
|
6817
6817
|
|
|
6818
6818
|
/* base styles & size variants */
|
|
6819
6819
|
var LabelStyles = {
|
|
@@ -6861,7 +6861,7 @@ var LabelStyles = {
|
|
|
6861
6861
|
});
|
|
6862
6862
|
},
|
|
6863
6863
|
};
|
|
6864
|
-
var Container$1b = newStyled.a(templateObject_1$
|
|
6864
|
+
var Container$1b = newStyled.a(templateObject_1$1S || (templateObject_1$1S = __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"])));
|
|
6865
6865
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6866
6866
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
6867
6867
|
return [
|
|
@@ -6880,8 +6880,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6880
6880
|
}),
|
|
6881
6881
|
];
|
|
6882
6882
|
});
|
|
6883
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6884
|
-
var templateObject_1$
|
|
6883
|
+
var RatingLabel = newStyled.span(templateObject_2$1t || (templateObject_2$1t = __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; });
|
|
6884
|
+
var templateObject_1$1S, templateObject_2$1t;
|
|
6885
6885
|
|
|
6886
6886
|
var Rating = function (_a) {
|
|
6887
6887
|
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;
|
|
@@ -6905,19 +6905,19 @@ var Rating = function (_a) {
|
|
|
6905
6905
|
return (jsxRuntime.jsxs(Container$1b, __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));
|
|
6906
6906
|
};
|
|
6907
6907
|
|
|
6908
|
-
var ImageWrapper$4 = newStyled.div(templateObject_1$
|
|
6908
|
+
var ImageWrapper$4 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __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 height: ", ";\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 height: ", ";\n"])), function (_a) {
|
|
6909
6909
|
var width = _a.width;
|
|
6910
6910
|
return width !== null && width !== void 0 ? width : '30%';
|
|
6911
6911
|
}, function (_a) {
|
|
6912
6912
|
var height = _a.height;
|
|
6913
6913
|
return height !== null && height !== void 0 ? height : 'auto';
|
|
6914
6914
|
});
|
|
6915
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6916
|
-
var RatingText = newStyled.span(templateObject_3$
|
|
6915
|
+
var RatingWrapper = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __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"])));
|
|
6916
|
+
var RatingText = newStyled.span(templateObject_3$1a || (templateObject_3$1a = __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) {
|
|
6917
6917
|
var fontSize = _a.fontSize;
|
|
6918
6918
|
return fontSize;
|
|
6919
6919
|
});
|
|
6920
|
-
var templateObject_1$
|
|
6920
|
+
var templateObject_1$1R, templateObject_2$1s, templateObject_3$1a;
|
|
6921
6921
|
|
|
6922
6922
|
var OfferAtCartImage = function (_a) {
|
|
6923
6923
|
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width, height = _a.height;
|
|
@@ -6935,6 +6935,17 @@ var OfferAtCartTitle = function (_a) {
|
|
|
6935
6935
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: content }, void 0);
|
|
6936
6936
|
};
|
|
6937
6937
|
|
|
6938
|
+
var Arrow$1 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 50;\n border-radius: 50%;\n background-color: #d4605b;\n box-shadow: 0 4px 20px 0 #00000040;\n bottom: 20px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 50;\n border-radius: 50%;\n background-color: #d4605b;\n box-shadow: 0 4px 20px 0 #00000040;\n bottom: 20px;\n"])));
|
|
6939
|
+
var templateObject_1$1Q;
|
|
6940
|
+
|
|
6941
|
+
var ArrowTip$1 = function (_a) {
|
|
6942
|
+
var _b = _a.isRight, isRight = _b === void 0 ? false : _b;
|
|
6943
|
+
var theme = useTheme$1();
|
|
6944
|
+
return (jsxRuntime.jsx(Arrow$1, __assign$1({ style: {
|
|
6945
|
+
left: isRight ? '85%' : '12%',
|
|
6946
|
+
}, "data-testid": "arrow" }, { children: isRight ? (jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['white'].color, width: '22px' }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, { fill: theme.colors.shades['white'].color, width: '22px' }, void 0)) }), void 0));
|
|
6947
|
+
};
|
|
6948
|
+
|
|
6938
6949
|
var AutoshipFrequencyDropdown = function (_a) {
|
|
6939
6950
|
var frequency = _a.frequency, onChange = _a.onChange;
|
|
6940
6951
|
var options = getDropdownOptions(frequency);
|
|
@@ -6964,9 +6975,9 @@ var getDropdownOptions = function (frequency) {
|
|
|
6964
6975
|
}); });
|
|
6965
6976
|
};
|
|
6966
6977
|
|
|
6967
|
-
var Benefit$1 = newStyled.div(templateObject_1$
|
|
6968
|
-
var BenefitText$2 = newStyled(Text$7)(templateObject_2$
|
|
6969
|
-
var templateObject_1$
|
|
6978
|
+
var Benefit$1 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __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"])));
|
|
6979
|
+
var BenefitText$2 = newStyled(Text$7)(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6980
|
+
var templateObject_1$1P, templateObject_2$1r;
|
|
6970
6981
|
|
|
6971
6982
|
var BenefitsList = function (_a) {
|
|
6972
6983
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6977,23 +6988,23 @@ var BenefitsList = function (_a) {
|
|
|
6977
6988
|
}) }, void 0));
|
|
6978
6989
|
};
|
|
6979
6990
|
|
|
6980
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
6991
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
6981
6992
|
var timerColor = _a.timerColor;
|
|
6982
6993
|
return timerColor || '';
|
|
6983
6994
|
});
|
|
6984
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
6995
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __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) {
|
|
6985
6996
|
var timerColor = _a.timerColor;
|
|
6986
6997
|
return timerColor || '';
|
|
6987
6998
|
});
|
|
6988
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
6999
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$19 || (templateObject_3$19 = __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) {
|
|
6989
7000
|
var theme = _a.theme;
|
|
6990
7001
|
return theme.colors.shades.white.color;
|
|
6991
7002
|
}, function (_a) {
|
|
6992
7003
|
var theme = _a.theme;
|
|
6993
7004
|
return theme.colors.shades.white.color;
|
|
6994
7005
|
});
|
|
6995
|
-
var Unit = newStyled.p(templateObject_4$
|
|
6996
|
-
var templateObject_1$
|
|
7006
|
+
var Unit = newStyled.p(templateObject_4$X || (templateObject_4$X = __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"])));
|
|
7007
|
+
var templateObject_1$1O, templateObject_2$1q, templateObject_3$19, templateObject_4$X;
|
|
6997
7008
|
|
|
6998
7009
|
var HRS = 'HRS';
|
|
6999
7010
|
var MIN = 'MIN';
|
|
@@ -7034,7 +7045,7 @@ var Timer = function (_a) {
|
|
|
7034
7045
|
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));
|
|
7035
7046
|
};
|
|
7036
7047
|
|
|
7037
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
7048
|
+
var TimerContainer = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __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) {
|
|
7038
7049
|
var textPosition = _a.textPosition;
|
|
7039
7050
|
return textPosition;
|
|
7040
7051
|
}, function (_a) {
|
|
@@ -7047,7 +7058,7 @@ var TimerContainer = newStyled.div(templateObject_1$1M || (templateObject_1$1M =
|
|
|
7047
7058
|
var borderRadius = _a.borderRadius;
|
|
7048
7059
|
return borderRadius || '8px';
|
|
7049
7060
|
});
|
|
7050
|
-
var templateObject_1$
|
|
7061
|
+
var templateObject_1$1N;
|
|
7051
7062
|
|
|
7052
7063
|
var getDefaultCountdown = function () {
|
|
7053
7064
|
var tomorrowDate = new Date();
|
|
@@ -7063,7 +7074,7 @@ var HurryUp = function (_a) {
|
|
|
7063
7074
|
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));
|
|
7064
7075
|
};
|
|
7065
7076
|
|
|
7066
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
7077
|
+
var Container$1a = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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) {
|
|
7067
7078
|
var size = _a.size;
|
|
7068
7079
|
return (size ? size : '100%');
|
|
7069
7080
|
}, function (_a) {
|
|
@@ -7078,7 +7089,7 @@ var borderSize = {
|
|
|
7078
7089
|
large: '3px',
|
|
7079
7090
|
};
|
|
7080
7091
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
7081
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
7092
|
+
var StyledSpinner = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __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) {
|
|
7082
7093
|
var size = _a.size;
|
|
7083
7094
|
return borderSize[size];
|
|
7084
7095
|
}, function (_a) {
|
|
@@ -7091,29 +7102,29 @@ var StyledSpinner = newStyled.div(templateObject_2$1o || (templateObject_2$1o =
|
|
|
7091
7102
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
7092
7103
|
return duration;
|
|
7093
7104
|
});
|
|
7094
|
-
var templateObject_1$
|
|
7105
|
+
var templateObject_1$1M, templateObject_2$1p;
|
|
7095
7106
|
|
|
7096
7107
|
var Spinner = function (_a) {
|
|
7097
7108
|
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;
|
|
7098
7109
|
return (jsxRuntime.jsx(Container$1a, __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));
|
|
7099
7110
|
};
|
|
7100
7111
|
|
|
7101
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
7102
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
7103
|
-
var templateObject_1$
|
|
7112
|
+
var ProgressContainer = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __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); });
|
|
7113
|
+
var ProgressFiller = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __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; });
|
|
7114
|
+
var templateObject_1$1L, templateObject_2$1o;
|
|
7104
7115
|
|
|
7105
7116
|
var ProgressBar$1 = function (_a) {
|
|
7106
7117
|
var progress = _a.progress, hide = _a.hide;
|
|
7107
7118
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
7108
7119
|
};
|
|
7109
7120
|
|
|
7110
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
7111
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
7112
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
7113
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
7114
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
7121
|
+
var Container$19 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
7122
|
+
var HTMLVideo = newStyled.video(templateObject_2$1n || (templateObject_2$1n = __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; });
|
|
7123
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$18 || (templateObject_3$18 = __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"])));
|
|
7124
|
+
var PlayContainer = newStyled.div(templateObject_4$W || (templateObject_4$W = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n\n &:hover {\n cursor: pointer;\n }\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\n &:hover {\n cursor: pointer;\n }\n"])));
|
|
7125
|
+
var PauseContainer = newStyled.div(templateObject_5$L || (templateObject_5$L = __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"])));
|
|
7115
7126
|
var MuteButton = newStyled.button(templateObject_6$C || (templateObject_6$C = __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"])));
|
|
7116
|
-
var templateObject_1$
|
|
7127
|
+
var templateObject_1$1K, templateObject_2$1n, templateObject_3$18, templateObject_4$W, templateObject_5$L, templateObject_6$C;
|
|
7117
7128
|
|
|
7118
7129
|
var Video$1 = function (_a) {
|
|
7119
7130
|
var _b, _c;
|
|
@@ -7167,11 +7178,11 @@ var Video$1 = function (_a) {
|
|
|
7167
7178
|
return (jsxRuntime.jsxs(Container$19, __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", testId: "sound-off-icon" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on", testId: "sound-on-icon" }, 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: handleOnloadedData, 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));
|
|
7168
7179
|
};
|
|
7169
7180
|
|
|
7170
|
-
var LikeCount = newStyled.span(templateObject_1$
|
|
7181
|
+
var LikeCount = newStyled.span(templateObject_1$1J || (templateObject_1$1J = __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) {
|
|
7171
7182
|
var theme = _a.theme;
|
|
7172
7183
|
return theme.colors.shades.black.color;
|
|
7173
7184
|
});
|
|
7174
|
-
var LikeBtnContainer = newStyled.button(templateObject_2$
|
|
7185
|
+
var LikeBtnContainer = newStyled.button(templateObject_2$1m || (templateObject_2$1m = __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) {
|
|
7175
7186
|
var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
|
|
7176
7187
|
return position;
|
|
7177
7188
|
}, function (_a) {
|
|
@@ -7190,7 +7201,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1l || (templateObject_2
|
|
|
7190
7201
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
7191
7202
|
return boxSizing;
|
|
7192
7203
|
});
|
|
7193
|
-
var templateObject_1$
|
|
7204
|
+
var templateObject_1$1J, templateObject_2$1m;
|
|
7194
7205
|
|
|
7195
7206
|
var getStylesBySize$c = function (size) {
|
|
7196
7207
|
switch (size) {
|
|
@@ -7211,7 +7222,7 @@ var getStylesBySize$c = function (size) {
|
|
|
7211
7222
|
};
|
|
7212
7223
|
}
|
|
7213
7224
|
};
|
|
7214
|
-
var Container$18 = newStyled.div(templateObject_1$
|
|
7225
|
+
var Container$18 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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) {
|
|
7215
7226
|
var backgroundColor = _a.backgroundColor;
|
|
7216
7227
|
return backgroundColor;
|
|
7217
7228
|
}, function (_a) {
|
|
@@ -7254,7 +7265,7 @@ var IconButton = function (_a) {
|
|
|
7254
7265
|
var theme = useTheme();
|
|
7255
7266
|
return (jsxRuntime.jsx(Container$18, __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));
|
|
7256
7267
|
};
|
|
7257
|
-
var templateObject_1$
|
|
7268
|
+
var templateObject_1$1I;
|
|
7258
7269
|
|
|
7259
7270
|
var LikeButton = function (_a) {
|
|
7260
7271
|
var _b;
|
|
@@ -7267,11 +7278,11 @@ var LikeButton = function (_a) {
|
|
|
7267
7278
|
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));
|
|
7268
7279
|
};
|
|
7269
7280
|
|
|
7270
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
7271
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
7272
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
7273
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
7274
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
7281
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1H || (templateObject_1$1H = __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"])));
|
|
7282
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1l || (templateObject_2$1l = __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"])));
|
|
7283
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7284
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$V || (templateObject_4$V = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7285
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
7275
7286
|
var RegularPriceTag = function () {
|
|
7276
7287
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
7277
7288
|
};
|
|
@@ -7320,7 +7331,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7320
7331
|
? finalPriceArray[0]
|
|
7321
7332
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price$1, __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$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7322
7333
|
};
|
|
7323
|
-
var templateObject_1$
|
|
7334
|
+
var templateObject_1$1H, templateObject_2$1l, templateObject_3$17, templateObject_4$V, templateObject_5$K;
|
|
7324
7335
|
|
|
7325
7336
|
var STYLES_BY_THEME = {
|
|
7326
7337
|
TheSpaDr: {
|
|
@@ -7393,10 +7404,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7393
7404
|
height: height,
|
|
7394
7405
|
});
|
|
7395
7406
|
});
|
|
7396
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
7397
|
-
var Container$17 = newStyled.a(templateObject_2$
|
|
7398
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
7399
|
-
var Title$7 = newStyled.h2(templateObject_4$
|
|
7407
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1G || (templateObject_1$1G = __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"])));
|
|
7408
|
+
var Container$17 = newStyled.a(templateObject_2$1k || (templateObject_2$1k = __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"])));
|
|
7409
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$16 || (templateObject_3$16 = __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"])));
|
|
7410
|
+
var Title$7 = newStyled.h2(templateObject_4$U || (templateObject_4$U = __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) {
|
|
7400
7411
|
var theme = _a.theme;
|
|
7401
7412
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
7402
7413
|
}, function (_a) {
|
|
@@ -7447,7 +7458,7 @@ var getStylesBySize$b = function (size) {
|
|
|
7447
7458
|
};
|
|
7448
7459
|
}
|
|
7449
7460
|
};
|
|
7450
|
-
var TopTagContainer$9 = newStyled.div(templateObject_5$
|
|
7461
|
+
var TopTagContainer$9 = newStyled.div(templateObject_5$J || (templateObject_5$J = __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) {
|
|
7451
7462
|
var style = _a.style;
|
|
7452
7463
|
return style.width;
|
|
7453
7464
|
});
|
|
@@ -7457,7 +7468,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$B || (templateObject_6
|
|
|
7457
7468
|
});
|
|
7458
7469
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7459
7470
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$o || (templateObject_8$o = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7460
|
-
var templateObject_1$
|
|
7471
|
+
var templateObject_1$1G, templateObject_2$1k, templateObject_3$16, templateObject_4$U, templateObject_5$J, templateObject_6$B, templateObject_7$v, templateObject_8$o;
|
|
7461
7472
|
|
|
7462
7473
|
var ProductItemMobile = function (_a) {
|
|
7463
7474
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7574,10 +7585,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7574
7585
|
height: height,
|
|
7575
7586
|
});
|
|
7576
7587
|
});
|
|
7577
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
7578
|
-
var Container$16 = newStyled.a(templateObject_2$
|
|
7579
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
7580
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
7588
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1F || (templateObject_1$1F = __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; });
|
|
7589
|
+
var Container$16 = newStyled.a(templateObject_2$1j || (templateObject_2$1j = __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"])));
|
|
7590
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __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"])));
|
|
7591
|
+
var Title$6 = newStyled.p(templateObject_4$T || (templateObject_4$T = __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; });
|
|
7581
7592
|
var getStylesBySize$a = function (size) {
|
|
7582
7593
|
switch (size) {
|
|
7583
7594
|
case exports.ComponentSize.Medium:
|
|
@@ -7603,7 +7614,7 @@ var getStylesBySize$a = function (size) {
|
|
|
7603
7614
|
};
|
|
7604
7615
|
}
|
|
7605
7616
|
};
|
|
7606
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
7617
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$I || (templateObject_5$I = __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) {
|
|
7607
7618
|
var style = _a.style;
|
|
7608
7619
|
return style.width;
|
|
7609
7620
|
});
|
|
@@ -7685,9 +7696,9 @@ var ProductItemTK = function (_a) {
|
|
|
7685
7696
|
colorPicker.position === 'middle' &&
|
|
7686
7697
|
!colorPicker.shouldStopCardClick && 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));
|
|
7687
7698
|
};
|
|
7688
|
-
var templateObject_1$
|
|
7699
|
+
var templateObject_1$1F, templateObject_2$1j, templateObject_3$15, templateObject_4$T, templateObject_5$I, templateObject_6$A, templateObject_7$u, templateObject_8$n;
|
|
7689
7700
|
|
|
7690
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
7701
|
+
var Container$15 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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"])));
|
|
7691
7702
|
function withProductGrid(ProductItemComponent, data) {
|
|
7692
7703
|
function WithProductGrid(props) {
|
|
7693
7704
|
return (jsxRuntime.jsx(Container$15, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -7697,7 +7708,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
7697
7708
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
7698
7709
|
return WithProductGrid;
|
|
7699
7710
|
}
|
|
7700
|
-
var templateObject_1$
|
|
7711
|
+
var templateObject_1$1E;
|
|
7701
7712
|
|
|
7702
7713
|
var Collection = {
|
|
7703
7714
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -7705,11 +7716,11 @@ var Collection = {
|
|
|
7705
7716
|
ProductItemTK: ProductItemTK,
|
|
7706
7717
|
};
|
|
7707
7718
|
|
|
7708
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
7709
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7710
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
7711
|
-
var Span = newStyled.span(templateObject_4$
|
|
7712
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
7719
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7720
|
+
newStyled(lt.Label)(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7721
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$14 || (templateObject_3$14 = __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"])));
|
|
7722
|
+
var Span = newStyled.span(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7723
|
+
var OptionsContainer = newStyled.div(templateObject_5$H || (templateObject_5$H = __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"])));
|
|
7713
7724
|
var Label$5 = function (_a) {
|
|
7714
7725
|
var label = _a.label, values = _a.values;
|
|
7715
7726
|
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -7727,7 +7738,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7727
7738
|
Option: Option,
|
|
7728
7739
|
OptionsContainer: OptionsContainer,
|
|
7729
7740
|
});
|
|
7730
|
-
var templateObject_1$
|
|
7741
|
+
var templateObject_1$1D, templateObject_2$1i, templateObject_3$14, templateObject_4$S, templateObject_5$H;
|
|
7731
7742
|
|
|
7732
7743
|
var OneColorSelector = function (_a) {
|
|
7733
7744
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7768,21 +7779,21 @@ var OutOfStock = function (_a) {
|
|
|
7768
7779
|
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));
|
|
7769
7780
|
};
|
|
7770
7781
|
|
|
7771
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
7782
|
+
var Container$14 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __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) {
|
|
7772
7783
|
var borderColor = _a.borderColor;
|
|
7773
7784
|
return borderColor;
|
|
7774
7785
|
}, function (_a) {
|
|
7775
7786
|
var noStock = _a.noStock;
|
|
7776
7787
|
return (noStock ? '0.4' : '1');
|
|
7777
7788
|
});
|
|
7778
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7789
|
+
var Image$2 = newStyled.img(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7779
7790
|
var PatternSelector = function (_a) {
|
|
7780
7791
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7781
7792
|
var theme = useTheme();
|
|
7782
7793
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7783
7794
|
return (jsxRuntime.jsx(Container$14, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7784
7795
|
};
|
|
7785
|
-
var templateObject_1$
|
|
7796
|
+
var templateObject_1$1C, templateObject_2$1h;
|
|
7786
7797
|
|
|
7787
7798
|
var renderOptions$1 = function (options, showCross) {
|
|
7788
7799
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7805,9 +7816,9 @@ var SingleColorPicker = function (_a) {
|
|
|
7805
7816
|
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.5rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions$1(options, showCross) }), void 0)] }), void 0));
|
|
7806
7817
|
};
|
|
7807
7818
|
|
|
7808
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$
|
|
7809
|
-
var NumericTooltip = newStyled.div(templateObject_2$
|
|
7810
|
-
var templateObject_1$
|
|
7819
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1B || (templateObject_1$1B = __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"])));
|
|
7820
|
+
var NumericTooltip = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n\n font-size: 12px;\n font-weight: 400;\n line-height: 20px;\n text-align: center;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n\n font-size: 12px;\n font-weight: 400;\n line-height: 20px;\n text-align: center;\n height: 100%;\n"])));
|
|
7821
|
+
var templateObject_1$1B, templateObject_2$1g;
|
|
7811
7822
|
|
|
7812
7823
|
var ColorPickerWithTooltip = function (_a) {
|
|
7813
7824
|
var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross, className = _a.className, tooltipOptions = _a.tooltipOptions;
|
|
@@ -7854,21 +7865,21 @@ var MultiColorPicker = function (_a) {
|
|
|
7854
7865
|
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));
|
|
7855
7866
|
};
|
|
7856
7867
|
|
|
7857
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7858
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7859
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7868
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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'); });
|
|
7869
|
+
var Col$1 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7870
|
+
var Row$2 = newStyled.div(templateObject_3$13 || (templateObject_3$13 = __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) {
|
|
7860
7871
|
return props.rightToLeft &&
|
|
7861
7872
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7862
7873
|
});
|
|
7863
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7864
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
7874
|
+
var H5 = newStyled.h5(templateObject_4$R || (templateObject_4$R = __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; });
|
|
7875
|
+
var H3 = newStyled.h3(templateObject_5$G || (templateObject_5$G = __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; });
|
|
7865
7876
|
var FreeShipping = newStyled.span(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7866
7877
|
var CrossSellCheckbox = function (_a) {
|
|
7867
7878
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7868
7879
|
var theme = useTheme();
|
|
7869
7880
|
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));
|
|
7870
7881
|
};
|
|
7871
|
-
var templateObject_1$
|
|
7882
|
+
var templateObject_1$1A, templateObject_2$1f, templateObject_3$13, templateObject_4$R, templateObject_5$G, templateObject_6$z;
|
|
7872
7883
|
|
|
7873
7884
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7874
7885
|
__proto__: null,
|
|
@@ -7897,7 +7908,7 @@ var sizeMapper = (_a = {},
|
|
|
7897
7908
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7898
7909
|
_a[exports.ComponentSize.XXSmall] = 'small',
|
|
7899
7910
|
_a);
|
|
7900
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7911
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n ", "\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n ", "\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7901
7912
|
var wide = _a.wide;
|
|
7902
7913
|
return (wide ? '100%' : 'fit-content');
|
|
7903
7914
|
}, function (_a) {
|
|
@@ -7922,11 +7933,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1y || (templateObj
|
|
|
7922
7933
|
var theme = _a.theme;
|
|
7923
7934
|
return theme.colors.text.disabled;
|
|
7924
7935
|
});
|
|
7925
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7936
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7926
7937
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7927
7938
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7928
7939
|
});
|
|
7929
|
-
var templateObject_1$
|
|
7940
|
+
var templateObject_1$1z, templateObject_2$1e;
|
|
7930
7941
|
|
|
7931
7942
|
var BaseCTA = function (_a) {
|
|
7932
7943
|
var _b, _c, _d;
|
|
@@ -8017,33 +8028,33 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
8017
8028
|
} }), void 0));
|
|
8018
8029
|
};
|
|
8019
8030
|
|
|
8020
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
8021
|
-
var IconContainer$5 = newStyled.div(templateObject_2$
|
|
8022
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
8023
|
-
var Details = newStyled.span(templateObject_4$
|
|
8031
|
+
var Container$13 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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; });
|
|
8032
|
+
var IconContainer$5 = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
8033
|
+
var Text$3 = newStyled.p(templateObject_3$12 || (templateObject_3$12 = __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; });
|
|
8034
|
+
var Details = newStyled.span(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
8024
8035
|
var Note = function (_a) {
|
|
8025
8036
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
8026
8037
|
var theme = useTheme();
|
|
8027
8038
|
return (jsxRuntime.jsxs(Container$13, __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));
|
|
8028
8039
|
};
|
|
8029
|
-
var templateObject_1$
|
|
8040
|
+
var templateObject_1$1y, templateObject_2$1d, templateObject_3$12, templateObject_4$Q;
|
|
8030
8041
|
|
|
8031
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
8042
|
+
var Title$5 = newStyled.h1(templateObject_1$1x || (templateObject_1$1x = __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) {
|
|
8032
8043
|
var theme = _a.theme;
|
|
8033
8044
|
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 ");
|
|
8034
8045
|
});
|
|
8035
|
-
var Line = newStyled.div(templateObject_2$
|
|
8036
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
8046
|
+
var Line = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __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; });
|
|
8047
|
+
var Row$1 = newStyled.div(templateObject_3$11 || (templateObject_3$11 = __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({
|
|
8037
8048
|
flexDirection: ['column', 'row'],
|
|
8038
8049
|
}));
|
|
8039
|
-
var Col = newStyled.div(templateObject_4$
|
|
8050
|
+
var Col = newStyled.div(templateObject_4$P || (templateObject_4$P = __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({
|
|
8040
8051
|
margin: ['0', '0 1.25rem'],
|
|
8041
8052
|
marginBottom: ['1.875rem', '0'],
|
|
8042
8053
|
alignItems: ['center', 'flex-start'],
|
|
8043
8054
|
textAlign: ['center', 'inherit'],
|
|
8044
8055
|
width: ['100%', 'inherit'],
|
|
8045
8056
|
}));
|
|
8046
|
-
var IconContainer$4 = newStyled.div(templateObject_5$
|
|
8057
|
+
var IconContainer$4 = newStyled.div(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
8047
8058
|
marginRight: ['0', '0.438rem'],
|
|
8048
8059
|
marginBottom: ['10px', '0'],
|
|
8049
8060
|
width: ['auto', '1.5rem'],
|
|
@@ -8071,16 +8082,16 @@ var DeliveryDetails = function (_a) {
|
|
|
8071
8082
|
var theme = useTheme();
|
|
8072
8083
|
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));
|
|
8073
8084
|
};
|
|
8074
|
-
var templateObject_1$
|
|
8085
|
+
var templateObject_1$1x, templateObject_2$1c, templateObject_3$11, templateObject_4$P, templateObject_5$F, templateObject_6$y, templateObject_7$t, templateObject_8$m;
|
|
8075
8086
|
|
|
8076
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
8087
|
+
var Backdrop = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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) {
|
|
8077
8088
|
var top = _a.top;
|
|
8078
8089
|
return top;
|
|
8079
8090
|
}, function (_a) {
|
|
8080
8091
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
8081
8092
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
8082
8093
|
});
|
|
8083
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
8094
|
+
var Sidebar = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __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) {
|
|
8084
8095
|
var height = _a.height;
|
|
8085
8096
|
return height;
|
|
8086
8097
|
}, function (_a) {
|
|
@@ -8127,20 +8138,20 @@ var Drawer = function (_a) {
|
|
|
8127
8138
|
}, [isOpen, onClose, onOpen]);
|
|
8128
8139
|
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;
|
|
8129
8140
|
};
|
|
8130
|
-
var templateObject_1$
|
|
8141
|
+
var templateObject_1$1w, templateObject_2$1b;
|
|
8131
8142
|
|
|
8132
8143
|
var TooltipArrow = function (_a) {
|
|
8133
8144
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
8134
8145
|
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));
|
|
8135
8146
|
};
|
|
8136
8147
|
|
|
8137
|
-
var List = newStyled.ul(templateObject_1$
|
|
8138
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
8139
|
-
var DropdownWrapper = newStyled.div(templateObject_3
|
|
8140
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
8141
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
8148
|
+
var List = newStyled.ul(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
8149
|
+
var Item$2 = newStyled.li(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
8150
|
+
var DropdownWrapper = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __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"])));
|
|
8151
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$O || (templateObject_4$O = __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"])));
|
|
8152
|
+
var StyledDropdown = newStyled.ul(templateObject_5$E || (templateObject_5$E = __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; });
|
|
8142
8153
|
var DropdownItem = newStyled.li(templateObject_6$x || (templateObject_6$x = __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; });
|
|
8143
|
-
var templateObject_1$
|
|
8154
|
+
var templateObject_1$1v, templateObject_2$1a, templateObject_3$10, templateObject_4$O, templateObject_5$E, templateObject_6$x;
|
|
8144
8155
|
|
|
8145
8156
|
var DropdownListIcons = function (_a) {
|
|
8146
8157
|
var items = _a.items;
|
|
@@ -8153,13 +8164,13 @@ var Dropdown = function (_a) {
|
|
|
8153
8164
|
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));
|
|
8154
8165
|
};
|
|
8155
8166
|
|
|
8156
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
8157
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
8158
|
-
var SizeLabel = newStyled.span(templateObject_3
|
|
8159
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
8160
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
8167
|
+
var DropdownContainer = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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"])));
|
|
8168
|
+
var DropdownLabel = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __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"])));
|
|
8169
|
+
var SizeLabel = newStyled.span(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8170
|
+
var DetailLabel = newStyled.span(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
8171
|
+
var DropdownOptions = newStyled.div(templateObject_5$D || (templateObject_5$D = __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"])));
|
|
8161
8172
|
var DropdownOption = newStyled.div(templateObject_6$w || (templateObject_6$w = __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"])));
|
|
8162
|
-
var templateObject_1$
|
|
8173
|
+
var templateObject_1$1u, templateObject_2$19, templateObject_3$$, templateObject_4$N, templateObject_5$D, templateObject_6$w;
|
|
8163
8174
|
|
|
8164
8175
|
var SizeDropdown = function (_a) {
|
|
8165
8176
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8182,15 +8193,15 @@ var SizeDropdown = function (_a) {
|
|
|
8182
8193
|
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));
|
|
8183
8194
|
};
|
|
8184
8195
|
|
|
8185
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
8186
|
-
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$
|
|
8187
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_3$
|
|
8196
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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; });
|
|
8197
|
+
var DialogDropdownWrapper2 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __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; });
|
|
8198
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_3$_ || (templateObject_3$_ = __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) {
|
|
8188
8199
|
return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
|
|
8189
8200
|
}, function (props) {
|
|
8190
8201
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8191
8202
|
});
|
|
8192
|
-
var DialogDropdownListItem = newStyled.li(templateObject_4$
|
|
8193
|
-
var DialogDropdownLink = newStyled.a(templateObject_5$
|
|
8203
|
+
var DialogDropdownListItem = newStyled.li(templateObject_4$M || (templateObject_4$M = __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"])));
|
|
8204
|
+
var DialogDropdownLink = newStyled.a(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
8194
8205
|
var DropdownDialog = function (_a) {
|
|
8195
8206
|
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;
|
|
8196
8207
|
var theme = useTheme$1();
|
|
@@ -8199,7 +8210,7 @@ var DropdownDialog = function (_a) {
|
|
|
8199
8210
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8200
8211
|
}) }), void 0) }), void 0));
|
|
8201
8212
|
};
|
|
8202
|
-
var templateObject_1$
|
|
8213
|
+
var templateObject_1$1t, templateObject_2$18, templateObject_3$_, templateObject_4$M, templateObject_5$C;
|
|
8203
8214
|
|
|
8204
8215
|
function FilteringDropdown(_a) {
|
|
8205
8216
|
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;
|
|
@@ -8295,33 +8306,33 @@ var SelectorSecondary = function (_a) {
|
|
|
8295
8306
|
} }), id: id }, void 0));
|
|
8296
8307
|
};
|
|
8297
8308
|
|
|
8298
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
8299
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
8300
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
8301
|
-
var Container$12 = newStyled.div(templateObject_4$
|
|
8309
|
+
var Title$4 = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
8310
|
+
var P$3 = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __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; });
|
|
8311
|
+
var ArrowContainer = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
8312
|
+
var Container$12 = newStyled.div(templateObject_4$L || (templateObject_4$L = __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'); });
|
|
8302
8313
|
var Accordion = function (_a) {
|
|
8303
8314
|
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;
|
|
8304
8315
|
var theme = useTheme();
|
|
8305
8316
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
8306
8317
|
return (jsxRuntime.jsxs(Container$12, __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));
|
|
8307
8318
|
};
|
|
8308
|
-
var templateObject_1$
|
|
8319
|
+
var templateObject_1$1s, templateObject_2$17, templateObject_3$Z, templateObject_4$L;
|
|
8309
8320
|
|
|
8310
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
8311
|
-
var Header$
|
|
8312
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
8313
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
8314
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
8321
|
+
var SectionContent = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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; });
|
|
8322
|
+
var Header$4 = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __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"])));
|
|
8323
|
+
var MobileHeader = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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"])));
|
|
8324
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$K || (templateObject_4$K = __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"])));
|
|
8325
|
+
var H4 = newStyled.h4(templateObject_5$B || (templateObject_5$B = __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; });
|
|
8315
8326
|
var FilterLink = newStyled.a(templateObject_6$v || (templateObject_6$v = __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; });
|
|
8316
8327
|
var OptionContainer = newStyled.div(templateObject_7$s || (templateObject_7$s = __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'); });
|
|
8317
8328
|
var ClearAll = newStyled.span(templateObject_8$l || (templateObject_8$l = __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; });
|
|
8318
8329
|
var MobileFooter = newStyled.div(templateObject_9$d || (templateObject_9$d = __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"])));
|
|
8319
8330
|
var MobileClearContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
8320
|
-
var templateObject_1$
|
|
8331
|
+
var templateObject_1$1r, templateObject_2$16, templateObject_3$Y, templateObject_4$K, templateObject_5$B, templateObject_6$v, templateObject_7$s, templateObject_8$l, templateObject_9$d, templateObject_10$b;
|
|
8321
8332
|
|
|
8322
|
-
var UL = newStyled.ul(templateObject_1$
|
|
8323
|
-
var LI = newStyled.li(templateObject_2$
|
|
8324
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
8333
|
+
var UL = newStyled.ul(templateObject_1$1q || (templateObject_1$1q = __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"])));
|
|
8334
|
+
var LI = newStyled.li(templateObject_2$15 || (templateObject_2$15 = __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; });
|
|
8335
|
+
var CloseIconContainer = newStyled.div(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
8325
8336
|
var Tags = function (_a) {
|
|
8326
8337
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
8327
8338
|
var theme = useTheme();
|
|
@@ -8329,7 +8340,7 @@ var Tags = function (_a) {
|
|
|
8329
8340
|
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));
|
|
8330
8341
|
}) }), void 0));
|
|
8331
8342
|
};
|
|
8332
|
-
var templateObject_1$
|
|
8343
|
+
var templateObject_1$1q, templateObject_2$15, templateObject_3$X;
|
|
8333
8344
|
|
|
8334
8345
|
var Filters = function (_a) {
|
|
8335
8346
|
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;
|
|
@@ -8429,7 +8440,7 @@ var Filters = function (_a) {
|
|
|
8429
8440
|
}
|
|
8430
8441
|
return itemsSelectedNumberText;
|
|
8431
8442
|
};
|
|
8432
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile ? (jsxRuntime.jsx("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: !!checkedItems.length && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Header$
|
|
8443
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile ? (jsxRuntime.jsx("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: !!checkedItems.length && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Header$4, { children: [jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsxRuntime.jsx(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsxRuntime.jsx(Tags, { color: tagsColor, items: checkedItems.map(function (item) {
|
|
8433
8444
|
return item.label === '$75 And Above' ? '+$75' : item.label;
|
|
8434
8445
|
}), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }, void 0)) }), void 0)) : (jsxRuntime.jsxs(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsxRuntime.jsx(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), !!checkedItems.length && (jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0))] }), void 0)), filters
|
|
8435
8446
|
.filter(function (filter) { return filter.isLinkOption; })
|
|
@@ -8467,8 +8478,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
8467
8478
|
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));
|
|
8468
8479
|
};
|
|
8469
8480
|
|
|
8470
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
8471
|
-
var Container$11 = newStyled.div(templateObject_2$
|
|
8481
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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"])));
|
|
8482
|
+
var Container$11 = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
8472
8483
|
var FitGuarantee = function (_a) {
|
|
8473
8484
|
var _b;
|
|
8474
8485
|
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;
|
|
@@ -8486,10 +8497,10 @@ var FitGuarantee = function (_a) {
|
|
|
8486
8497
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
8487
8498
|
} }, { 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));
|
|
8488
8499
|
};
|
|
8489
|
-
var templateObject_1$
|
|
8500
|
+
var templateObject_1$1p, templateObject_2$14;
|
|
8490
8501
|
|
|
8491
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
8492
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
8502
|
+
var Container$10 = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
8503
|
+
var P$2 = newStyled.p(templateObject_2$13 || (templateObject_2$13 = __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; });
|
|
8493
8504
|
var textButtonStyles$1 = function (theme) { return ({
|
|
8494
8505
|
border: 'none',
|
|
8495
8506
|
background: 'transparent',
|
|
@@ -8504,7 +8515,7 @@ var FitPredictor = function (_a) {
|
|
|
8504
8515
|
var theme = useTheme();
|
|
8505
8516
|
return (jsxs(Container$10, __assign$1({ theme: theme }, { children: [jsx(Container$10, { 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));
|
|
8506
8517
|
};
|
|
8507
|
-
var templateObject_1$
|
|
8518
|
+
var templateObject_1$1o, templateObject_2$13;
|
|
8508
8519
|
|
|
8509
8520
|
var Button$8 = newStyled.button(function () { return ({
|
|
8510
8521
|
background: 'transparent',
|
|
@@ -12748,14 +12759,14 @@ var Slider$1 = /*#__PURE__*/function (_React$Component) {
|
|
|
12748
12759
|
return Slider;
|
|
12749
12760
|
}(React__default["default"].Component);
|
|
12750
12761
|
|
|
12751
|
-
var StyledSlider = newStyled(Slider$1)(templateObject_1$
|
|
12762
|
+
var StyledSlider = newStyled(Slider$1)(templateObject_1$1n || (templateObject_1$1n = __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) {
|
|
12752
12763
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12753
12764
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12754
12765
|
}, function (_a) {
|
|
12755
12766
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12756
12767
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12757
12768
|
});
|
|
12758
|
-
var templateObject_1$
|
|
12769
|
+
var templateObject_1$1n;
|
|
12759
12770
|
|
|
12760
12771
|
var getStylesBySize$8 = function (size) {
|
|
12761
12772
|
// rem units
|
|
@@ -12814,7 +12825,7 @@ var SliderNavigation = function (_a) {
|
|
|
12814
12825
|
} }, { 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));
|
|
12815
12826
|
};
|
|
12816
12827
|
|
|
12817
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
12828
|
+
var Image$1 = newStyled.img(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
12818
12829
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12819
12830
|
return borderRadiusVariant &&
|
|
12820
12831
|
"\n border-radius: 20px;\n ";
|
|
@@ -12832,7 +12843,7 @@ var Image$1 = newStyled.img(templateObject_1$1l || (templateObject_1$1l = __make
|
|
|
12832
12843
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
12833
12844
|
: 'inherit';
|
|
12834
12845
|
});
|
|
12835
|
-
var templateObject_1$
|
|
12846
|
+
var templateObject_1$1m;
|
|
12836
12847
|
|
|
12837
12848
|
var ImageSmallPreview = function (_a) {
|
|
12838
12849
|
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;
|
|
@@ -12840,9 +12851,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
12840
12851
|
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));
|
|
12841
12852
|
};
|
|
12842
12853
|
|
|
12843
|
-
var horizontalStyles = css(templateObject_1$
|
|
12844
|
-
var verticalStyles = css(templateObject_2$
|
|
12845
|
-
var Container$$ = newStyled.div(templateObject_3$
|
|
12854
|
+
var horizontalStyles = css(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
12855
|
+
var verticalStyles = css(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
12856
|
+
var Container$$ = newStyled.div(templateObject_3$W || (templateObject_3$W = __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) {
|
|
12846
12857
|
var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
|
|
12847
12858
|
return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
|
|
12848
12859
|
}, function (_a) {
|
|
@@ -12853,12 +12864,12 @@ var Container$$ = newStyled.div(templateObject_3$V || (templateObject_3$V = __ma
|
|
|
12853
12864
|
return hasOverflowArrows &&
|
|
12854
12865
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12855
12866
|
});
|
|
12856
|
-
var Button$7 = newStyled.button(templateObject_4$
|
|
12857
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12867
|
+
var Button$7 = newStyled.button(templateObject_4$J || (templateObject_4$J = __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"])));
|
|
12868
|
+
var ArrowsContainer = newStyled.div(templateObject_5$A || (templateObject_5$A = __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"])));
|
|
12858
12869
|
var ArrowBaseStyles = newStyled.div(templateObject_6$u || (templateObject_6$u = __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"])));
|
|
12859
12870
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$r || (templateObject_7$r = __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"])));
|
|
12860
12871
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$k || (templateObject_8$k = __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"])));
|
|
12861
|
-
var templateObject_1$
|
|
12872
|
+
var templateObject_1$1l, templateObject_2$12, templateObject_3$W, templateObject_4$J, templateObject_5$A, templateObject_6$u, templateObject_7$r, templateObject_8$k;
|
|
12862
12873
|
|
|
12863
12874
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12864
12875
|
var loading = 'eager';
|
|
@@ -14486,23 +14497,23 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
14486
14497
|
afterZoomOut: PropTypes.func
|
|
14487
14498
|
} : {};
|
|
14488
14499
|
|
|
14489
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
14500
|
+
var Container$_ = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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) {
|
|
14490
14501
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14491
14502
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
14492
14503
|
});
|
|
14493
|
-
var TopTagContainer$7 = newStyled.div(templateObject_2$
|
|
14504
|
+
var TopTagContainer$7 = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
14494
14505
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14495
14506
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
14496
14507
|
}, function (_a) {
|
|
14497
14508
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
14498
14509
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
14499
14510
|
});
|
|
14500
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_3$
|
|
14511
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
14501
14512
|
var isCTAHidden = _a.isCTAHidden;
|
|
14502
14513
|
return (isCTAHidden ? '60px' : '120px');
|
|
14503
14514
|
});
|
|
14504
|
-
var TopRightTagWrapper = newStyled.div(templateObject_4$
|
|
14505
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_5$
|
|
14515
|
+
var TopRightTagWrapper = newStyled.div(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14516
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14506
14517
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$t || (templateObject_6$t = __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"])));
|
|
14507
14518
|
var ImageStyled = newStyled(Image$3)(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14508
14519
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
@@ -14512,7 +14523,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$j || (temp
|
|
|
14512
14523
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14513
14524
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14514
14525
|
});
|
|
14515
|
-
var templateObject_1$
|
|
14526
|
+
var templateObject_1$1k, templateObject_2$11, templateObject_3$V, templateObject_4$I, templateObject_5$z, templateObject_6$t, templateObject_7$q, templateObject_8$j;
|
|
14516
14527
|
|
|
14517
14528
|
var ImageProductSlide$1 = function (_a) {
|
|
14518
14529
|
var _b;
|
|
@@ -14527,8 +14538,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
14527
14538
|
}, 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));
|
|
14528
14539
|
};
|
|
14529
14540
|
|
|
14530
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
14531
|
-
var templateObject_1$
|
|
14541
|
+
var Container$Z = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
14542
|
+
var templateObject_1$1j;
|
|
14532
14543
|
|
|
14533
14544
|
var getInitialIndex = function (images, selectedValue) {
|
|
14534
14545
|
if (selectedValue) {
|
|
@@ -14557,7 +14568,7 @@ var ProductGallery = function (_a) {
|
|
|
14557
14568
|
return (jsxRuntime.jsxs(Container$Z, { 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));
|
|
14558
14569
|
};
|
|
14559
14570
|
|
|
14560
|
-
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$
|
|
14571
|
+
var StyledButton$3 = newStyled(BaseButton)(templateObject_1$1i || (templateObject_1$1i = __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; });
|
|
14561
14572
|
var AmazonButton = function (_a) {
|
|
14562
14573
|
var onClick = _a.onClick;
|
|
14563
14574
|
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));
|
|
@@ -14566,7 +14577,7 @@ var PaypalButton = function (_a) {
|
|
|
14566
14577
|
var onClick = _a.onClick;
|
|
14567
14578
|
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));
|
|
14568
14579
|
};
|
|
14569
|
-
var templateObject_1$
|
|
14580
|
+
var templateObject_1$1i;
|
|
14570
14581
|
|
|
14571
14582
|
var Container$Y = newStyled.div(function (props) { return ({
|
|
14572
14583
|
height: 'auto',
|
|
@@ -14621,9 +14632,9 @@ var IconsWithTitle = function (_a) {
|
|
|
14621
14632
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$Y, __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));
|
|
14622
14633
|
};
|
|
14623
14634
|
|
|
14624
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
14625
|
-
var ImageContainer$4 = newStyled.div(templateObject_2
|
|
14626
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
14635
|
+
var Container$X = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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'); });
|
|
14636
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __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'); });
|
|
14637
|
+
var StyledTitle = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
14627
14638
|
var titlePosition = _a.titlePosition;
|
|
14628
14639
|
return titlePosition == 'center' &&
|
|
14629
14640
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -14633,13 +14644,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
14633
14644
|
var isMobile = useWindowDimensions().isMobile;
|
|
14634
14645
|
return (jsxRuntime.jsxs(Container$X, __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));
|
|
14635
14646
|
};
|
|
14636
|
-
var templateObject_1$
|
|
14647
|
+
var templateObject_1$1h, templateObject_2$10, templateObject_3$U;
|
|
14637
14648
|
|
|
14638
|
-
var Label$4 = newStyled.span(templateObject_1$
|
|
14649
|
+
var Label$4 = newStyled.span(templateObject_1$1g || (templateObject_1$1g = __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) {
|
|
14639
14650
|
var color = _a.color;
|
|
14640
14651
|
return color;
|
|
14641
14652
|
});
|
|
14642
|
-
var MandatoryIcon = newStyled.span(templateObject_2
|
|
14653
|
+
var MandatoryIcon = newStyled.span(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
14643
14654
|
var color = _a.color;
|
|
14644
14655
|
return color;
|
|
14645
14656
|
});
|
|
@@ -14648,7 +14659,7 @@ var InputLabel = function (_a) {
|
|
|
14648
14659
|
var theme = useTheme();
|
|
14649
14660
|
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));
|
|
14650
14661
|
};
|
|
14651
|
-
var templateObject_1$
|
|
14662
|
+
var templateObject_1$1g, templateObject_2$$;
|
|
14652
14663
|
|
|
14653
14664
|
var containerByStatus = function (theme, status) {
|
|
14654
14665
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -14657,12 +14668,12 @@ var containerByStatus = function (theme, status) {
|
|
|
14657
14668
|
return theme.colors.semantic.urgent.color;
|
|
14658
14669
|
return '';
|
|
14659
14670
|
};
|
|
14660
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
14671
|
+
var Container$W = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
14661
14672
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
14662
14673
|
return hasError ? '' : containerByStatus(theme, status);
|
|
14663
14674
|
});
|
|
14664
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
14665
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
14675
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$_ || (templateObject_2$_ = __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"])));
|
|
14676
|
+
var StyledInput = newStyled.input(templateObject_3$T || (templateObject_3$T = __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) {
|
|
14666
14677
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
14667
14678
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
14668
14679
|
}, function (_a) {
|
|
@@ -14717,11 +14728,11 @@ var StyledInput = newStyled.input(templateObject_3$S || (templateObject_3$S = __
|
|
|
14717
14728
|
return hasValue &&
|
|
14718
14729
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
14719
14730
|
});
|
|
14720
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
14731
|
+
var InputWrapper = newStyled.div(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
14721
14732
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14722
14733
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14723
14734
|
});
|
|
14724
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14735
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$y || (templateObject_5$y = __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) {
|
|
14725
14736
|
var theme = _a.theme;
|
|
14726
14737
|
return theme.component.input.placeholderColor;
|
|
14727
14738
|
}, function (_a) {
|
|
@@ -14735,7 +14746,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$x || (templateObject_5
|
|
|
14735
14746
|
return theme.component.input.lineHeight;
|
|
14736
14747
|
});
|
|
14737
14748
|
var ClearInput = newStyled.div(templateObject_6$s || (templateObject_6$s = __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"])));
|
|
14738
|
-
var templateObject_1$
|
|
14749
|
+
var templateObject_1$1f, templateObject_2$_, templateObject_3$T, templateObject_4$H, templateObject_5$y, templateObject_6$s;
|
|
14739
14750
|
|
|
14740
14751
|
var BaseInput = function (_a) {
|
|
14741
14752
|
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"]);
|
|
@@ -14780,11 +14791,11 @@ var Button$6 = function (_a) {
|
|
|
14780
14791
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14781
14792
|
};
|
|
14782
14793
|
|
|
14783
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
14794
|
+
var Container$V = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
14784
14795
|
var theme = _a.theme;
|
|
14785
14796
|
return theme.component.inputCustom.input.borderRadius;
|
|
14786
14797
|
});
|
|
14787
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14798
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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) {
|
|
14788
14799
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14789
14800
|
return defaultRounded
|
|
14790
14801
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14801,21 +14812,21 @@ var Custom = function (_a) {
|
|
|
14801
14812
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14802
14813
|
return (jsxRuntime.jsx(Container$V, __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));
|
|
14803
14814
|
};
|
|
14804
|
-
var templateObject_1$
|
|
14815
|
+
var templateObject_1$1e, templateObject_2$Z;
|
|
14805
14816
|
|
|
14806
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14817
|
+
var SuccessContainer = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14807
14818
|
var size = _a.size;
|
|
14808
14819
|
return (size === 'small' ? '36px' : '');
|
|
14809
14820
|
});
|
|
14810
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14811
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14821
|
+
var SuccessMessage = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
14822
|
+
var SuccessText = newStyled.span(templateObject_3$S || (templateObject_3$S = __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"])));
|
|
14812
14823
|
var Success = function (_a) {
|
|
14813
14824
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14814
14825
|
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));
|
|
14815
14826
|
};
|
|
14816
|
-
var templateObject_1$
|
|
14827
|
+
var templateObject_1$1d, templateObject_2$Y, templateObject_3$S;
|
|
14817
14828
|
|
|
14818
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14829
|
+
var ButtonContainer = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
14819
14830
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14820
14831
|
return status === exports.InputValidationType.Empty &&
|
|
14821
14832
|
type === 'primary' &&
|
|
@@ -14832,16 +14843,16 @@ var BasePlusButton = function (_a) {
|
|
|
14832
14843
|
}
|
|
14833
14844
|
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));
|
|
14834
14845
|
};
|
|
14835
|
-
var templateObject_1$
|
|
14846
|
+
var templateObject_1$1c;
|
|
14836
14847
|
|
|
14837
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
14838
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
14848
|
+
var Container$U = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14849
|
+
var IconContainer$3 = newStyled.div(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
14839
14850
|
var BasePlusIcon = function (_a) {
|
|
14840
14851
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14841
14852
|
var theme = useTheme();
|
|
14842
14853
|
return (jsxRuntime.jsx(Container$U, { 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));
|
|
14843
14854
|
};
|
|
14844
|
-
var templateObject_1$
|
|
14855
|
+
var templateObject_1$1b, templateObject_2$X;
|
|
14845
14856
|
|
|
14846
14857
|
var Input$3 = {
|
|
14847
14858
|
Simple: BaseInput,
|
|
@@ -14981,17 +14992,17 @@ var Portal = function (_a) {
|
|
|
14981
14992
|
var visibleStyle = function (_a) {
|
|
14982
14993
|
var opened = _a.opened;
|
|
14983
14994
|
return opened
|
|
14984
|
-
? css(templateObject_1$
|
|
14995
|
+
? css(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14985
14996
|
};
|
|
14986
14997
|
var transformStyle = function (_a) {
|
|
14987
14998
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
|
|
14988
14999
|
return opened
|
|
14989
|
-
? css(templateObject_3$
|
|
15000
|
+
? css(templateObject_3$R || (templateObject_3$R = __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$G || (templateObject_4$G = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14990
15001
|
};
|
|
14991
15002
|
var Container$T = newStyled.div(templateObject_6$r || (templateObject_6$r = __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) {
|
|
14992
15003
|
var width = _a.width;
|
|
14993
15004
|
return width
|
|
14994
|
-
? css(templateObject_5$
|
|
15005
|
+
? css(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14995
15006
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14996
15007
|
});
|
|
14997
15008
|
}, visibleStyle, transformStyle);
|
|
@@ -15036,7 +15047,7 @@ var useModal = function (id) {
|
|
|
15036
15047
|
close: close,
|
|
15037
15048
|
}); }, [close, open, opened]);
|
|
15038
15049
|
};
|
|
15039
|
-
var templateObject_1$
|
|
15050
|
+
var templateObject_1$1a, templateObject_2$W, templateObject_3$R, templateObject_4$G, templateObject_5$x, templateObject_6$r, templateObject_7$p;
|
|
15040
15051
|
|
|
15041
15052
|
var htmlReactParser = {exports: {}};
|
|
15042
15053
|
|
|
@@ -18817,7 +18828,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18817
18828
|
HTMLReactParser$1.attributesToProps;
|
|
18818
18829
|
HTMLReactParser$1.Element;
|
|
18819
18830
|
|
|
18820
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
18831
|
+
var Bar$1 = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
18821
18832
|
var height = _a.height;
|
|
18822
18833
|
return height || '0.5rem';
|
|
18823
18834
|
}, function (_a) {
|
|
@@ -18869,7 +18880,7 @@ var Container$S = newStyled.div(function (_a) {
|
|
|
18869
18880
|
background: backgroundColor,
|
|
18870
18881
|
});
|
|
18871
18882
|
});
|
|
18872
|
-
var MessageContainer = newStyled.div(templateObject_2$
|
|
18883
|
+
var MessageContainer = newStyled.div(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18873
18884
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18874
18885
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18875
18886
|
};
|
|
@@ -18900,25 +18911,25 @@ var MotivatorProgressBar = function (_a) {
|
|
|
18900
18911
|
};
|
|
18901
18912
|
return (jsxRuntime.jsxs(Container$S, __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));
|
|
18902
18913
|
};
|
|
18903
|
-
var templateObject_1$
|
|
18914
|
+
var templateObject_1$19, templateObject_2$V;
|
|
18904
18915
|
|
|
18905
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
18916
|
+
var Container$R = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
18906
18917
|
var theme = _a.theme;
|
|
18907
18918
|
return theme.component.orderBar.backgroundColor;
|
|
18908
18919
|
});
|
|
18909
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
18920
|
+
var H1 = newStyled.h1(templateObject_2$U || (templateObject_2$U = __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; });
|
|
18910
18921
|
var OrderBar = function (_a) {
|
|
18911
18922
|
var message = _a.message, color = _a.color;
|
|
18912
18923
|
var theme = useTheme();
|
|
18913
18924
|
return (jsxRuntime.jsxs(Container$R, __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));
|
|
18914
18925
|
};
|
|
18915
|
-
var templateObject_1$
|
|
18926
|
+
var templateObject_1$18, templateObject_2$U;
|
|
18916
18927
|
|
|
18917
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
18918
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18919
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18920
|
-
var Label$3 = newStyled.div(templateObject_4$
|
|
18921
|
-
var Check = newStyled.div(templateObject_5$
|
|
18928
|
+
var Container$Q = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
18929
|
+
var Card$1 = newStyled.div(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
18930
|
+
var Tag$1 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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"])));
|
|
18931
|
+
var Label$3 = newStyled.div(templateObject_4$F || (templateObject_4$F = __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"])));
|
|
18932
|
+
var Check = newStyled.div(templateObject_5$w || (templateObject_5$w = __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"])));
|
|
18922
18933
|
var IconContainer$2 = newStyled.div(templateObject_6$q || (templateObject_6$q = __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"])));
|
|
18923
18934
|
var IconPlaceholder = newStyled.div(templateObject_7$o || (templateObject_7$o = __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"])));
|
|
18924
18935
|
var DiscountContainer = newStyled.div(templateObject_8$i || (templateObject_8$i = __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"])));
|
|
@@ -18951,14 +18962,14 @@ var PackCard = function (_a) {
|
|
|
18951
18962
|
currency: currencyCode || 'USD',
|
|
18952
18963
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18953
18964
|
};
|
|
18954
|
-
var templateObject_1$
|
|
18965
|
+
var templateObject_1$17, templateObject_2$T, templateObject_3$Q, templateObject_4$F, templateObject_5$w, templateObject_6$q, templateObject_7$o, templateObject_8$i;
|
|
18955
18966
|
|
|
18956
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
18957
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
18958
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18967
|
+
var Container$P = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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"])));
|
|
18968
|
+
var IconContainer$1 = newStyled.div(templateObject_2$S || (templateObject_2$S = __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"])));
|
|
18969
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18959
18970
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18960
18971
|
}));
|
|
18961
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18972
|
+
var PageNumber = newStyled.span(templateObject_4$E || (templateObject_4$E = __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) {
|
|
18962
18973
|
var bold = _a.bold;
|
|
18963
18974
|
return (bold ? '700' : '500');
|
|
18964
18975
|
}, function (_a) {
|
|
@@ -18975,7 +18986,7 @@ var PageNumber = newStyled.span(templateObject_4$D || (templateObject_4$D = __ma
|
|
|
18975
18986
|
var background = _a.background;
|
|
18976
18987
|
return background || 'unset';
|
|
18977
18988
|
});
|
|
18978
|
-
var templateObject_1$
|
|
18989
|
+
var templateObject_1$16, templateObject_2$S, templateObject_3$P, templateObject_4$E;
|
|
18979
18990
|
|
|
18980
18991
|
var Pagination = function (_a) {
|
|
18981
18992
|
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;
|
|
@@ -19040,7 +19051,7 @@ var PaginatorBlog = function (_a) {
|
|
|
19040
19051
|
: 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));
|
|
19041
19052
|
};
|
|
19042
19053
|
|
|
19043
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
19054
|
+
var Container$O = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
19044
19055
|
var width = _a.width;
|
|
19045
19056
|
return width;
|
|
19046
19057
|
}, function (_a) {
|
|
@@ -19058,12 +19069,12 @@ var PaymentMethod = function (_a) {
|
|
|
19058
19069
|
var theme = useTheme();
|
|
19059
19070
|
return (jsxRuntime.jsx(Container$O, __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));
|
|
19060
19071
|
};
|
|
19061
|
-
var templateObject_1$
|
|
19072
|
+
var templateObject_1$15;
|
|
19062
19073
|
|
|
19063
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
19074
|
+
var Container$N = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
19064
19075
|
var IMAGE_WIDTH$1 = '63px';
|
|
19065
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
19066
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
19076
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$R || (templateObject_2$R = __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$1);
|
|
19077
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$O || (templateObject_3$O = __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({
|
|
19067
19078
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
19068
19079
|
}), IMAGE_WIDTH$1);
|
|
19069
19080
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -19086,7 +19097,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
19086
19097
|
margin: margin,
|
|
19087
19098
|
});
|
|
19088
19099
|
});
|
|
19089
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
19100
|
+
var PriceContainer = newStyled.div(templateObject_4$D || (templateObject_4$D = __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) {
|
|
19090
19101
|
var withTag = _a.withTag; _a.theme;
|
|
19091
19102
|
return withTag
|
|
19092
19103
|
? mediaQueries({
|
|
@@ -19095,7 +19106,7 @@ var PriceContainer = newStyled.div(templateObject_4$C || (templateObject_4$C = _
|
|
|
19095
19106
|
})
|
|
19096
19107
|
: 'justify-content: end';
|
|
19097
19108
|
});
|
|
19098
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
19109
|
+
var Quantity = newStyled.div(templateObject_5$v || (templateObject_5$v = __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"])));
|
|
19099
19110
|
var StyledSpan = newStyled.span(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
19100
19111
|
var Gift = newStyled.span(templateObject_7$n || (templateObject_7$n = __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) {
|
|
19101
19112
|
var theme = _a.theme;
|
|
@@ -19107,7 +19118,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
19107
19118
|
var theme = useTheme();
|
|
19108
19119
|
return (jsxRuntime.jsxs(Container$N, __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));
|
|
19109
19120
|
};
|
|
19110
|
-
var templateObject_1$
|
|
19121
|
+
var templateObject_1$14, templateObject_2$R, templateObject_3$O, templateObject_4$D, templateObject_5$v, templateObject_6$p, templateObject_7$n;
|
|
19111
19122
|
|
|
19112
19123
|
var P$1 = newStyled.p(function (_a) {
|
|
19113
19124
|
var color = _a.color;
|
|
@@ -19121,7 +19132,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
19121
19132
|
margin: '0.938rem 4.188rem',
|
|
19122
19133
|
});
|
|
19123
19134
|
});
|
|
19124
|
-
var Bar = newStyled.div(templateObject_1$
|
|
19135
|
+
var Bar = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n 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) {
|
|
19125
19136
|
var height = _a.height;
|
|
19126
19137
|
return height || '0.5rem';
|
|
19127
19138
|
}, function (_a) {
|
|
@@ -19166,12 +19177,12 @@ var ProgressBar = function (_a) {
|
|
|
19166
19177
|
var theme = useTheme();
|
|
19167
19178
|
return (jsxRuntime.jsxs(Container$M, __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));
|
|
19168
19179
|
};
|
|
19169
|
-
var templateObject_1$
|
|
19180
|
+
var templateObject_1$13;
|
|
19170
19181
|
|
|
19171
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
19172
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
19173
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
19174
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19182
|
+
var Container$L = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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; });
|
|
19183
|
+
var Item$1 = newStyled.span(templateObject_2$Q || (templateObject_2$Q = __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"])));
|
|
19184
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
19185
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$C || (templateObject_4$C = __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)'; });
|
|
19175
19186
|
var QuantityPicker = function (_a) {
|
|
19176
19187
|
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;
|
|
19177
19188
|
var theme = useTheme();
|
|
@@ -19196,7 +19207,7 @@ var QuantityPicker = function (_a) {
|
|
|
19196
19207
|
}, [value, clamp]);
|
|
19197
19208
|
return (jsxRuntime.jsxs(Container$L, __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));
|
|
19198
19209
|
};
|
|
19199
|
-
var templateObject_1$
|
|
19210
|
+
var templateObject_1$12, templateObject_2$Q, templateObject_3$N, templateObject_4$C;
|
|
19200
19211
|
|
|
19201
19212
|
/* base styles & size variants */
|
|
19202
19213
|
var CustomRadioStyles$1 = {
|
|
@@ -19265,9 +19276,9 @@ var ContainerStyles$1 = {
|
|
|
19265
19276
|
},
|
|
19266
19277
|
};
|
|
19267
19278
|
|
|
19268
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19279
|
+
var Wrapper$3 = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19269
19280
|
var Container$K = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19270
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19281
|
+
var Input$2 = newStyled.input(templateObject_2$P || (templateObject_2$P = __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) {
|
|
19271
19282
|
var disabled = _a.disabled;
|
|
19272
19283
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19273
19284
|
});
|
|
@@ -19275,7 +19286,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19275
19286
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19276
19287
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19277
19288
|
]; });
|
|
19278
|
-
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$
|
|
19289
|
+
var StyledLabel$1 = newStyled(Label$6)(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
19279
19290
|
var RadioPrimary = function (_a) {
|
|
19280
19291
|
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;
|
|
19281
19292
|
var theme = useTheme();
|
|
@@ -19285,7 +19296,7 @@ var RadioPrimary = function (_a) {
|
|
|
19285
19296
|
};
|
|
19286
19297
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$K, __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));
|
|
19287
19298
|
};
|
|
19288
|
-
var templateObject_1$
|
|
19299
|
+
var templateObject_1$11, templateObject_2$P, templateObject_3$M;
|
|
19289
19300
|
|
|
19290
19301
|
var RadioGroupInput = function (_a) {
|
|
19291
19302
|
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;
|
|
@@ -19364,9 +19375,9 @@ var ContainerStyles = {
|
|
|
19364
19375
|
},
|
|
19365
19376
|
};
|
|
19366
19377
|
|
|
19367
|
-
var Wrapper$2 = newStyled.div(templateObject_1
|
|
19378
|
+
var Wrapper$2 = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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"])));
|
|
19368
19379
|
var Container$J = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19369
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19380
|
+
var Input$1 = newStyled.input(templateObject_2$O || (templateObject_2$O = __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) {
|
|
19370
19381
|
var disabled = _a.disabled;
|
|
19371
19382
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19372
19383
|
});
|
|
@@ -19374,7 +19385,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19374
19385
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19375
19386
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19376
19387
|
]; });
|
|
19377
|
-
var StyledLabel = newStyled(Label$6)(templateObject_3$
|
|
19388
|
+
var StyledLabel = newStyled(Label$6)(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19378
19389
|
var theme = _a.theme;
|
|
19379
19390
|
return theme.component.radio.textSize;
|
|
19380
19391
|
}, function (_a) {
|
|
@@ -19390,7 +19401,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19390
19401
|
};
|
|
19391
19402
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$J, __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));
|
|
19392
19403
|
};
|
|
19393
|
-
var templateObject_1
|
|
19404
|
+
var templateObject_1$10, templateObject_2$O, templateObject_3$L;
|
|
19394
19405
|
|
|
19395
19406
|
var ClubRadioGroupInput = function (_a) {
|
|
19396
19407
|
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;
|
|
@@ -19418,11 +19429,11 @@ function formatDate(date, format) {
|
|
|
19418
19429
|
}
|
|
19419
19430
|
}
|
|
19420
19431
|
|
|
19421
|
-
var Container$I = newStyled.div(templateObject_1
|
|
19422
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19423
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19424
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19425
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19432
|
+
var Container$I = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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"])));
|
|
19433
|
+
var Content$1 = newStyled.div(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
19434
|
+
var StarsContent = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19435
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
19436
|
+
var DateText$1 = newStyled.span(templateObject_5$u || (templateObject_5$u = __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"])));
|
|
19426
19437
|
var ReviewerName$1 = newStyled.h1(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
19427
19438
|
var VerifiedText = newStyled.h1(templateObject_7$m || (templateObject_7$m = __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"])));
|
|
19428
19439
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$h || (templateObject_8$h = __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"])));
|
|
@@ -19459,15 +19470,15 @@ var Review$1 = function (_a) {
|
|
|
19459
19470
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$I, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19460
19471
|
(!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));
|
|
19461
19472
|
};
|
|
19462
|
-
var templateObject_1
|
|
19473
|
+
var templateObject_1$$, templateObject_2$N, templateObject_3$K, templateObject_4$B, templateObject_5$u, templateObject_6$o, templateObject_7$m, templateObject_8$h, templateObject_9$c, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19463
19474
|
|
|
19464
19475
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19465
19476
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19466
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
19467
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19468
|
-
var Content = newStyled.div(templateObject_3$
|
|
19469
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19470
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19477
|
+
var Container$H = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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"])));
|
|
19478
|
+
var Heading = newStyled.div(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
19479
|
+
var Content = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19480
|
+
var ReviewContainer = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19481
|
+
var DateText = newStyled.span(templateObject_5$t || (templateObject_5$t = __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"])));
|
|
19471
19482
|
var VariantText = newStyled.div(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
19472
19483
|
var ReviewerName = newStyled.h2(templateObject_7$l || (templateObject_7$l = __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"])));
|
|
19473
19484
|
var ReviewTitle = newStyled.h3(templateObject_8$g || (templateObject_8$g = __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"])));
|
|
@@ -19515,13 +19526,13 @@ var Review = function (_a) {
|
|
|
19515
19526
|
: description,
|
|
19516
19527
|
} }, 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));
|
|
19517
19528
|
};
|
|
19518
|
-
var templateObject_1$
|
|
19529
|
+
var templateObject_1$_, templateObject_2$M, templateObject_3$J, templateObject_4$A, templateObject_5$t, templateObject_6$n, templateObject_7$l, templateObject_8$g, templateObject_9$b, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$2, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19519
19530
|
|
|
19520
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
19521
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19522
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19523
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19524
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19531
|
+
var Container$G = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
19532
|
+
var ReviewsContainer = newStyled.div(templateObject_2$L || (templateObject_2$L = __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"])));
|
|
19533
|
+
var ReviewsCount = newStyled.div(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
19534
|
+
var ReviewsStars = newStyled.div(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
19535
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
19525
19536
|
var ReviewsImages = newStyled.div(templateObject_6$m || (templateObject_6$m = __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"])));
|
|
19526
19537
|
var SummaryItem = newStyled.div(templateObject_7$k || (templateObject_7$k = __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) {
|
|
19527
19538
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -19533,23 +19544,23 @@ var ReviewsHeader = function (_a) {
|
|
|
19533
19544
|
var theme = useTheme();
|
|
19534
19545
|
return (jsxRuntime.jsxs(Container$G, { 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));
|
|
19535
19546
|
};
|
|
19536
|
-
var templateObject_1$
|
|
19547
|
+
var templateObject_1$Z, templateObject_2$L, templateObject_3$I, templateObject_4$z, templateObject_5$s, templateObject_6$m, templateObject_7$k;
|
|
19537
19548
|
|
|
19538
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
19539
|
-
var Text$1 = newStyled.p(templateObject_2$
|
|
19549
|
+
var Container$F = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
19550
|
+
var Text$1 = newStyled.p(templateObject_2$K || (templateObject_2$K = __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; });
|
|
19540
19551
|
var ScrollToTop = function (_a) {
|
|
19541
19552
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19542
19553
|
var theme = useTheme();
|
|
19543
19554
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19544
19555
|
return (jsxRuntime.jsxs(Container$F, __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));
|
|
19545
19556
|
};
|
|
19546
|
-
var templateObject_1$
|
|
19557
|
+
var templateObject_1$Y, templateObject_2$K;
|
|
19547
19558
|
|
|
19548
|
-
var Button$5 = newStyled.button(templateObject_1$
|
|
19559
|
+
var Button$5 = newStyled.button(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", "\n"])), mediaQueries({
|
|
19549
19560
|
right: ['1rem', '7.75rem'],
|
|
19550
19561
|
top: ['0.75rem', '0.75rem'],
|
|
19551
19562
|
}));
|
|
19552
|
-
var templateObject_1$
|
|
19563
|
+
var templateObject_1$X;
|
|
19553
19564
|
|
|
19554
19565
|
var ClearButton = function (_a) {
|
|
19555
19566
|
var onClick = _a.onClick;
|
|
@@ -19568,7 +19579,7 @@ var Footer = function (_a) {
|
|
|
19568
19579
|
return (jsxRuntime.jsx(Container$E, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19569
19580
|
};
|
|
19570
19581
|
|
|
19571
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
19582
|
+
var Container$D = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", "\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", "\n"])), mediaQueries({
|
|
19572
19583
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19573
19584
|
}));
|
|
19574
19585
|
var Description = newStyled.div({
|
|
@@ -19582,7 +19593,7 @@ var Description = newStyled.div({
|
|
|
19582
19593
|
textAlign: 'start',
|
|
19583
19594
|
},
|
|
19584
19595
|
});
|
|
19585
|
-
var templateObject_1$
|
|
19596
|
+
var templateObject_1$W;
|
|
19586
19597
|
|
|
19587
19598
|
var ProductItem = function (_a) {
|
|
19588
19599
|
var _b;
|
|
@@ -19595,7 +19606,7 @@ var OptionsList = newStyled.ul({
|
|
|
19595
19606
|
margin: '0px',
|
|
19596
19607
|
padding: '0px',
|
|
19597
19608
|
});
|
|
19598
|
-
var OptionItem = newStyled.li(templateObject_1$
|
|
19609
|
+
var OptionItem = newStyled.li(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", "\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", "\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
19599
19610
|
padding: [0, '0rem 1rem'],
|
|
19600
19611
|
borderRadius: [0, '0.5rem'],
|
|
19601
19612
|
}));
|
|
@@ -19607,20 +19618,20 @@ var Anchor = newStyled.a({
|
|
|
19607
19618
|
padding: 0,
|
|
19608
19619
|
textDecoration: 'none',
|
|
19609
19620
|
});
|
|
19610
|
-
var Container$C = newStyled.div(templateObject_2$
|
|
19621
|
+
var Container$C = newStyled.div(templateObject_2$J || (templateObject_2$J = __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({
|
|
19611
19622
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19612
19623
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19613
19624
|
borderRadius: ['0', '0.5rem'],
|
|
19614
19625
|
}));
|
|
19615
|
-
var Header$
|
|
19626
|
+
var Header$3 = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mediaQueries({
|
|
19616
19627
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19617
19628
|
}));
|
|
19618
|
-
var templateObject_1$
|
|
19629
|
+
var templateObject_1$V, templateObject_2$J, templateObject_3$H;
|
|
19619
19630
|
|
|
19620
19631
|
var ResultsPanel = function (_a) {
|
|
19621
19632
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19622
19633
|
var theme = useTheme();
|
|
19623
|
-
return (jsxRuntime.jsxs(Container$C, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$
|
|
19634
|
+
return (jsxRuntime.jsxs(Container$C, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$3, __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) {
|
|
19624
19635
|
var optionUrl = _a.optionUrl, price = _a.price, src = _a.src, title = _a.title;
|
|
19625
19636
|
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));
|
|
19626
19637
|
}) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
@@ -19634,8 +19645,8 @@ var SearchIconContainer = newStyled.div({
|
|
|
19634
19645
|
background: 'white',
|
|
19635
19646
|
alignSelf: 'center',
|
|
19636
19647
|
});
|
|
19637
|
-
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$
|
|
19638
|
-
var templateObject_1$
|
|
19648
|
+
var StyledButton$2 = newStyled(ButtonSecondary)(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
19649
|
+
var templateObject_1$U;
|
|
19639
19650
|
|
|
19640
19651
|
var SearchControl = function (_a) {
|
|
19641
19652
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
@@ -19747,12 +19758,12 @@ var SearchBar = function (_a) {
|
|
|
19747
19758
|
} }, 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));
|
|
19748
19759
|
};
|
|
19749
19760
|
|
|
19750
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
19751
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19752
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19753
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19754
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19755
|
-
var templateObject_1$
|
|
19761
|
+
var Container$A = newStyled.div(templateObject_1$T || (templateObject_1$T = __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"])));
|
|
19762
|
+
var BackArrow = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19763
|
+
var BoldSpan = newStyled.span(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
19764
|
+
var NormalSpan = newStyled.span(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
19765
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$r || (templateObject_5$r = __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"])));
|
|
19766
|
+
var templateObject_1$T, templateObject_2$I, templateObject_3$G, templateObject_4$y, templateObject_5$r;
|
|
19756
19767
|
|
|
19757
19768
|
var SearchNavigation = function (_a) {
|
|
19758
19769
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
@@ -19761,7 +19772,7 @@ var SearchNavigation = function (_a) {
|
|
|
19761
19772
|
}) }, void 0)] }, void 0));
|
|
19762
19773
|
};
|
|
19763
19774
|
|
|
19764
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
19775
|
+
var Container$z = newStyled.div(templateObject_1$S || (templateObject_1$S = __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) {
|
|
19765
19776
|
var alignCenter = _a.alignCenter;
|
|
19766
19777
|
return alignCenter &&
|
|
19767
19778
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19771,26 +19782,26 @@ var Container$z = newStyled.div(templateObject_1$R || (templateObject_1$R = __ma
|
|
|
19771
19782
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19772
19783
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19773
19784
|
});
|
|
19774
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19775
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19785
|
+
var TitleText = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
19786
|
+
var BannerText = newStyled.div(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
19776
19787
|
var ShortBanner = function (_a) {
|
|
19777
19788
|
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;
|
|
19778
19789
|
var theme = useTheme();
|
|
19779
19790
|
return (jsxRuntime.jsxs(Container$z, __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));
|
|
19780
19791
|
};
|
|
19781
|
-
var templateObject_1$
|
|
19792
|
+
var templateObject_1$S, templateObject_2$H, templateObject_3$F;
|
|
19782
19793
|
|
|
19783
|
-
var TableElement$3 = newStyled.table(templateObject_1$
|
|
19784
|
-
var TableCell$3 = newStyled.td(templateObject_2$
|
|
19785
|
-
var TableHead$3 = newStyled.th(templateObject_3$
|
|
19786
|
-
var Label$2 = newStyled('div')(templateObject_4$
|
|
19787
|
-
var TopLabel$1 = newStyled(Label$2)(templateObject_5$
|
|
19794
|
+
var TableElement$3 = newStyled.table(templateObject_1$R || (templateObject_1$R = __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; });
|
|
19795
|
+
var TableCell$3 = newStyled.td(templateObject_2$G || (templateObject_2$G = __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; });
|
|
19796
|
+
var TableHead$3 = newStyled.th(templateObject_3$E || (templateObject_3$E = __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; });
|
|
19797
|
+
var Label$2 = newStyled('div')(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
19798
|
+
var TopLabel$1 = newStyled(Label$2)(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19788
19799
|
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19789
19800
|
var Container$y = newStyled('div')(templateObject_7$j || (templateObject_7$j = __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"])));
|
|
19790
19801
|
var LabelText$1 = newStyled('span')(templateObject_8$f || (templateObject_8$f = __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"])));
|
|
19791
19802
|
var Column$2 = newStyled('div')(templateObject_9$a || (templateObject_9$a = __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"])));
|
|
19792
19803
|
var TableRow$3 = newStyled.tr(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19793
|
-
var templateObject_1$
|
|
19804
|
+
var templateObject_1$R, templateObject_2$G, templateObject_3$E, templateObject_4$x, templateObject_5$q, templateObject_6$l, templateObject_7$j, templateObject_8$f, templateObject_9$a, templateObject_10$8;
|
|
19794
19805
|
|
|
19795
19806
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19796
19807
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -19831,16 +19842,16 @@ var SizeChartTable = function (_a) {
|
|
|
19831
19842
|
}, 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));
|
|
19832
19843
|
};
|
|
19833
19844
|
|
|
19834
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19835
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19836
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19837
|
-
var TableRow$2 = newStyled.tr(templateObject_4$
|
|
19845
|
+
var TableElement$2 = newStyled.table(templateObject_1$Q || (templateObject_1$Q = __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; });
|
|
19846
|
+
var TableCell$2 = newStyled.td(templateObject_2$F || (templateObject_2$F = __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; });
|
|
19847
|
+
var TableHead$2 = newStyled.th(templateObject_3$D || (templateObject_3$D = __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; });
|
|
19848
|
+
var TableRow$2 = newStyled.tr(templateObject_4$w || (templateObject_4$w = __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; });
|
|
19838
19849
|
var SizeTable = function (_a) {
|
|
19839
19850
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19840
19851
|
var theme = useTheme();
|
|
19841
19852
|
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));
|
|
19842
19853
|
};
|
|
19843
|
-
var templateObject_1$
|
|
19854
|
+
var templateObject_1$Q, templateObject_2$F, templateObject_3$D, templateObject_4$w;
|
|
19844
19855
|
|
|
19845
19856
|
var getStylesBySize$7 = function (size) {
|
|
19846
19857
|
switch (size) {
|
|
@@ -19867,7 +19878,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19867
19878
|
} });
|
|
19868
19879
|
};
|
|
19869
19880
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19870
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19881
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$P || (templateObject_1$P = __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));
|
|
19871
19882
|
};
|
|
19872
19883
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19873
19884
|
if (disabled)
|
|
@@ -19883,23 +19894,23 @@ var TextButton = function (_a) {
|
|
|
19883
19894
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19884
19895
|
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));
|
|
19885
19896
|
};
|
|
19886
|
-
var templateObject_1$
|
|
19897
|
+
var templateObject_1$P;
|
|
19887
19898
|
|
|
19888
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
19889
|
-
var P = newStyled.p(templateObject_2$
|
|
19890
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19899
|
+
var Container$x = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
19900
|
+
var P = newStyled.p(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n margin: 0 0 0 10px;\n"], ["\n margin: 0 0 0 10px;\n"])));
|
|
19901
|
+
var PercentageSpan = newStyled.span(templateObject_3$C || (templateObject_3$C = __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"])));
|
|
19891
19902
|
var SizeFitGuide = function (_a) {
|
|
19892
19903
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19893
19904
|
return (jsxRuntime.jsxs(Container$x, { 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));
|
|
19894
19905
|
};
|
|
19895
|
-
var templateObject_1$
|
|
19906
|
+
var templateObject_1$O, templateObject_2$E, templateObject_3$C;
|
|
19896
19907
|
|
|
19897
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19908
|
+
var ButtonsContainer = newStyled.div(templateObject_1$N || (templateObject_1$N = __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) {
|
|
19898
19909
|
var inline = _a.inline;
|
|
19899
19910
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19900
19911
|
});
|
|
19901
|
-
var Row = newStyled.div(templateObject_2$
|
|
19902
|
-
var templateObject_1$
|
|
19912
|
+
var Row = newStyled.div(templateObject_2$D || (templateObject_2$D = __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"])));
|
|
19913
|
+
var templateObject_1$N, templateObject_2$D;
|
|
19903
19914
|
|
|
19904
19915
|
var SizeSelector = function (_a) {
|
|
19905
19916
|
var _b;
|
|
@@ -19921,7 +19932,7 @@ var SizeSelector = function (_a) {
|
|
|
19921
19932
|
}) }), void 0)] }), void 0));
|
|
19922
19933
|
};
|
|
19923
19934
|
|
|
19924
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19935
|
+
var TabContainer = newStyled.div(templateObject_1$M || (templateObject_1$M = __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) {
|
|
19925
19936
|
var titleSize = _a.titleSize;
|
|
19926
19937
|
return titleSize;
|
|
19927
19938
|
}, function (_a) {
|
|
@@ -19938,18 +19949,18 @@ var Tab = function (_a) {
|
|
|
19938
19949
|
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;
|
|
19939
19950
|
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));
|
|
19940
19951
|
};
|
|
19941
|
-
var templateObject_1$
|
|
19952
|
+
var templateObject_1$M;
|
|
19942
19953
|
|
|
19943
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
19944
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19954
|
+
var Container$w = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19955
|
+
var TabList = newStyled.div(templateObject_2$C || (templateObject_2$C = __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) {
|
|
19945
19956
|
var backgroundColor = _a.backgroundColor;
|
|
19946
19957
|
return backgroundColor;
|
|
19947
19958
|
}, function (_a) {
|
|
19948
19959
|
var borderColor = _a.borderColor;
|
|
19949
19960
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19950
19961
|
});
|
|
19951
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19952
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19962
|
+
var TabContent = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19963
|
+
var TabSeparator = newStyled.div(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
19953
19964
|
var Tabs = function (_a) {
|
|
19954
19965
|
var _b;
|
|
19955
19966
|
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;
|
|
@@ -19960,14 +19971,14 @@ var Tabs = function (_a) {
|
|
|
19960
19971
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19961
19972
|
return (jsxRuntime.jsxs(Container$w, __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));
|
|
19962
19973
|
};
|
|
19963
|
-
var templateObject_1$
|
|
19974
|
+
var templateObject_1$L, templateObject_2$C, templateObject_3$B, templateObject_4$v;
|
|
19964
19975
|
|
|
19965
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
19976
|
+
var Container$v = newStyled.div(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
19966
19977
|
var Tag = function (_a) {
|
|
19967
19978
|
var text = _a.text, className = _a.className;
|
|
19968
19979
|
return jsxRuntime.jsx(Container$v, __assign$1({ className: className }, { children: text }), void 0);
|
|
19969
19980
|
};
|
|
19970
|
-
var templateObject_1$
|
|
19981
|
+
var templateObject_1$K;
|
|
19971
19982
|
|
|
19972
19983
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19973
19984
|
switch (size) {
|
|
@@ -20080,9 +20091,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
20080
20091
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
20081
20092
|
};
|
|
20082
20093
|
|
|
20083
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
20084
|
-
var VideoOverlay$1 = newStyled.div(templateObject_2$
|
|
20085
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
20094
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
20095
|
+
var VideoOverlay$1 = newStyled.div(templateObject_2$B || (templateObject_2$B = __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"])));
|
|
20096
|
+
var FullscreenVideo = newStyled.div(templateObject_3$A || (templateObject_3$A = __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"])));
|
|
20086
20097
|
var ImageVideo = function (_a) {
|
|
20087
20098
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
20088
20099
|
var video = React$2.useRef(null);
|
|
@@ -20102,12 +20113,12 @@ var ImageVideo = function (_a) {
|
|
|
20102
20113
|
height: '100%',
|
|
20103
20114
|
} }, void 0)] }, void 0))] }, void 0));
|
|
20104
20115
|
};
|
|
20105
|
-
var templateObject_1$
|
|
20116
|
+
var templateObject_1$J, templateObject_2$B, templateObject_3$A;
|
|
20106
20117
|
|
|
20107
|
-
var ContainerDesktop = css(templateObject_1$
|
|
20108
|
-
var ContainerMobile = css(templateObject_2$
|
|
20109
|
-
var Container$u = newStyled.div(templateObject_3$
|
|
20110
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
20118
|
+
var ContainerDesktop = css(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
20119
|
+
var ContainerMobile = css(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
20120
|
+
var Container$u = newStyled.div(templateObject_3$z || (templateObject_3$z = __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);
|
|
20121
|
+
var TextContainer = newStyled.div(templateObject_4$u || (templateObject_4$u = __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"])));
|
|
20111
20122
|
var TextWithImage = function (_a) {
|
|
20112
20123
|
var _b, _c, _d, _e;
|
|
20113
20124
|
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"]);
|
|
@@ -20137,18 +20148,18 @@ var TextWithImage = function (_a) {
|
|
|
20137
20148
|
},
|
|
20138
20149
|
} }, 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));
|
|
20139
20150
|
};
|
|
20140
|
-
var templateObject_1$
|
|
20151
|
+
var templateObject_1$I, templateObject_2$A, templateObject_3$z, templateObject_4$u;
|
|
20141
20152
|
|
|
20142
20153
|
var slideInAnimation = function (distanceFromTop) {
|
|
20143
20154
|
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20144
|
-
return keyframes(templateObject_1$
|
|
20155
|
+
return keyframes(templateObject_1$H || (templateObject_1$H = __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);
|
|
20145
20156
|
};
|
|
20146
20157
|
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20147
20158
|
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20148
|
-
return keyframes(templateObject_2$
|
|
20159
|
+
return keyframes(templateObject_2$z || (templateObject_2$z = __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);
|
|
20149
20160
|
};
|
|
20150
|
-
var ToastContainer = newStyled.div(templateObject_3$
|
|
20151
|
-
var ToastContent = newStyled.div(templateObject_4$
|
|
20161
|
+
var ToastContainer = newStyled.div(templateObject_3$y || (templateObject_3$y = __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"])));
|
|
20162
|
+
var ToastContent = newStyled.div(templateObject_4$t || (templateObject_4$t = __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) {
|
|
20152
20163
|
var distanceFromTop = _a.distanceFromTop;
|
|
20153
20164
|
return distanceFromTop || '124px';
|
|
20154
20165
|
}, function (_a) {
|
|
@@ -20161,12 +20172,12 @@ var ToastContent = newStyled.div(templateObject_4$s || (templateObject_4$s = __m
|
|
|
20161
20172
|
var distanceFromTop = _a.distanceFromTop;
|
|
20162
20173
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20163
20174
|
});
|
|
20164
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20175
|
+
var ToastText = newStyled.p(templateObject_5$p || (templateObject_5$p = __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) {
|
|
20165
20176
|
var severity = _a.severity;
|
|
20166
20177
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20167
20178
|
});
|
|
20168
20179
|
var CloseIcon = newStyled.div(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20169
|
-
var templateObject_1$
|
|
20180
|
+
var templateObject_1$H, templateObject_2$z, templateObject_3$y, templateObject_4$t, templateObject_5$p, templateObject_6$k;
|
|
20170
20181
|
|
|
20171
20182
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20172
20183
|
var _b;
|
|
@@ -20188,9 +20199,9 @@ var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
20188
20199
|
});
|
|
20189
20200
|
Toast.displayName = 'Toast';
|
|
20190
20201
|
|
|
20191
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20192
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20193
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20202
|
+
var Wrapper$1 = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
20203
|
+
var GrandTotal = newStyled.h1(templateObject_2$y || (templateObject_2$y = __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; });
|
|
20204
|
+
var Currency = newStyled.span(templateObject_3$x || (templateObject_3$x = __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) {
|
|
20194
20205
|
var theme = _a.theme;
|
|
20195
20206
|
return theme.component.total.basicTotal.currency.color;
|
|
20196
20207
|
}, function (_a) {
|
|
@@ -20203,11 +20214,11 @@ var Currency = newStyled.span(templateObject_3$w || (templateObject_3$w = __make
|
|
|
20203
20214
|
var theme = _a.theme;
|
|
20204
20215
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20205
20216
|
});
|
|
20206
|
-
var Container$t = newStyled.div(templateObject_4$
|
|
20217
|
+
var Container$t = newStyled.div(templateObject_4$s || (templateObject_4$s = __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) {
|
|
20207
20218
|
var highlightColor = _a.highlightColor;
|
|
20208
20219
|
return highlightColor;
|
|
20209
20220
|
});
|
|
20210
|
-
var TotalContainer = newStyled(Container$t)(templateObject_5$
|
|
20221
|
+
var TotalContainer = newStyled(Container$t)(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20211
20222
|
var showTotalLabel = _a.showTotalLabel;
|
|
20212
20223
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20213
20224
|
});
|
|
@@ -20217,7 +20228,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$i || (templateObject_7$i = __
|
|
|
20217
20228
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20218
20229
|
});
|
|
20219
20230
|
var TotalLabel = newStyled(Text$7)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20220
|
-
var templateObject_1$
|
|
20231
|
+
var templateObject_1$G, templateObject_2$y, templateObject_3$x, templateObject_4$s, templateObject_5$o, templateObject_6$j, templateObject_7$i, templateObject_8$e;
|
|
20221
20232
|
|
|
20222
20233
|
var Total = function (_a) {
|
|
20223
20234
|
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;
|
|
@@ -20225,19 +20236,19 @@ var Total = function (_a) {
|
|
|
20225
20236
|
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$t, __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));
|
|
20226
20237
|
};
|
|
20227
20238
|
|
|
20228
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20239
|
+
var Wrapper = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20229
20240
|
var color = _a.color;
|
|
20230
20241
|
return color;
|
|
20231
20242
|
});
|
|
20232
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20233
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20243
|
+
var ItemContainer = newStyled.div(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
20244
|
+
var Item = newStyled.h4(templateObject_3$w || (templateObject_3$w = __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) {
|
|
20234
20245
|
var theme = _a.theme;
|
|
20235
20246
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20236
20247
|
}, function (_a) {
|
|
20237
20248
|
var theme = _a.theme;
|
|
20238
20249
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20239
20250
|
});
|
|
20240
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20251
|
+
var CouponItem = newStyled(Item)(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20241
20252
|
var color = _a.color;
|
|
20242
20253
|
return color;
|
|
20243
20254
|
});
|
|
@@ -20250,18 +20261,18 @@ var Subtotal = function (_a) {
|
|
|
20250
20261
|
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));
|
|
20251
20262
|
})] }), void 0));
|
|
20252
20263
|
};
|
|
20253
|
-
var templateObject_1$
|
|
20264
|
+
var templateObject_1$F, templateObject_2$x, templateObject_3$w, templateObject_4$r;
|
|
20254
20265
|
|
|
20255
20266
|
var Totals = {
|
|
20256
20267
|
Total: Total,
|
|
20257
20268
|
Subtotal: Subtotal,
|
|
20258
20269
|
};
|
|
20259
20270
|
|
|
20260
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
20261
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20262
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20263
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20264
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20271
|
+
var Container$s = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20272
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20273
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$v || (templateObject_3$v = __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; });
|
|
20274
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$q || (templateObject_4$q = __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'); });
|
|
20275
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
20265
20276
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$i || (templateObject_6$i = __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) {
|
|
20266
20277
|
return props.finishedTrack
|
|
20267
20278
|
? props.finishedTrackColor
|
|
@@ -20309,13 +20320,13 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20309
20320
|
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));
|
|
20310
20321
|
})] }), void 0));
|
|
20311
20322
|
};
|
|
20312
|
-
var templateObject_1$
|
|
20323
|
+
var templateObject_1$E, templateObject_2$w, templateObject_3$v, templateObject_4$q, templateObject_5$n, templateObject_6$i, templateObject_7$h, templateObject_8$d, templateObject_9$9, templateObject_10$7, templateObject_11$5;
|
|
20313
20324
|
|
|
20314
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
20315
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20316
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20317
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20318
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20325
|
+
var Container$r = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20326
|
+
var CheckpointContainer = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20327
|
+
var CheckpointDate = newStyled.div(templateObject_3$u || (templateObject_3$u = __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; });
|
|
20328
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$p || (templateObject_4$p = __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'); });
|
|
20329
|
+
var CheckpointStatus = newStyled.p(templateObject_5$m || (templateObject_5$m = __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'); });
|
|
20319
20330
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$h || (templateObject_6$h = __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) {
|
|
20320
20331
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20321
20332
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20349,19 +20360,19 @@ var TrackingProgress = function (_a) {
|
|
|
20349
20360
|
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));
|
|
20350
20361
|
})] }), void 0));
|
|
20351
20362
|
};
|
|
20352
|
-
var templateObject_1$
|
|
20363
|
+
var templateObject_1$D, templateObject_2$v, templateObject_3$u, templateObject_4$p, templateObject_5$m, templateObject_6$h, templateObject_7$g, templateObject_8$c;
|
|
20353
20364
|
|
|
20354
|
-
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20365
|
+
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
20355
20366
|
var checked = _a.checked;
|
|
20356
20367
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20357
20368
|
});
|
|
20358
|
-
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$
|
|
20359
|
-
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$
|
|
20360
|
-
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$
|
|
20361
|
-
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$
|
|
20369
|
+
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
20370
|
+
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$t || (templateObject_3$t = __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"])));
|
|
20371
|
+
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
20372
|
+
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20362
20373
|
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$g || (templateObject_6$g = __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"])));
|
|
20363
20374
|
var CheckboxInput = newStyled.input(templateObject_7$f || (templateObject_7$f = __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"])));
|
|
20364
|
-
var templateObject_1$
|
|
20375
|
+
var templateObject_1$C, templateObject_2$u, templateObject_3$t, templateObject_4$o, templateObject_5$l, templateObject_6$g, templateObject_7$f;
|
|
20365
20376
|
|
|
20366
20377
|
function AutoshipOfferCard(_a) {
|
|
20367
20378
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20385,18 +20396,18 @@ function AutoshipOfferCard(_a) {
|
|
|
20385
20396
|
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));
|
|
20386
20397
|
}
|
|
20387
20398
|
|
|
20388
|
-
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$
|
|
20399
|
+
var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
20389
20400
|
var checked = _a.checked;
|
|
20390
20401
|
return (checked ? 'none' : '1px solid #e5e5e5;');
|
|
20391
20402
|
});
|
|
20392
|
-
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$
|
|
20393
|
-
var AutoShipBodyWrapper = newStyled.div(templateObject_3$
|
|
20394
|
-
var AutoShipBodyTitle = newStyled.div(templateObject_4$
|
|
20395
|
-
var AutoShipBodyListItem = newStyled.div(templateObject_5$
|
|
20403
|
+
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$t || (templateObject_2$t = __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"])));
|
|
20404
|
+
var AutoShipBodyWrapper = newStyled.div(templateObject_3$s || (templateObject_3$s = __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"])));
|
|
20405
|
+
var AutoShipBodyTitle = newStyled.div(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
20406
|
+
var AutoShipBodyListItem = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20396
20407
|
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20397
20408
|
newStyled.input(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20398
20409
|
var ButtonRemoveWrapper = newStyled.div(templateObject_8$b || (templateObject_8$b = __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"])));
|
|
20399
|
-
var templateObject_1$
|
|
20410
|
+
var templateObject_1$B, templateObject_2$t, templateObject_3$s, templateObject_4$n, templateObject_5$k, templateObject_6$f, templateObject_7$e, templateObject_8$b;
|
|
20400
20411
|
|
|
20401
20412
|
function AutoshipOfferCardCta(_a) {
|
|
20402
20413
|
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;
|
|
@@ -20414,18 +20425,18 @@ function AutoshipOfferCardCta(_a) {
|
|
|
20414
20425
|
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));
|
|
20415
20426
|
}
|
|
20416
20427
|
|
|
20417
|
-
var ContainerBase$3 = newStyled.div(templateObject_1$
|
|
20418
|
-
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_2$
|
|
20419
|
-
var SubscriptionHeader$3 = newStyled.div(templateObject_3$
|
|
20420
|
-
newStyled.div(templateObject_4$
|
|
20421
|
-
newStyled.div(templateObject_5$
|
|
20428
|
+
var ContainerBase$3 = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
20429
|
+
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
20430
|
+
var SubscriptionHeader$3 = newStyled.div(templateObject_3$r || (templateObject_3$r = __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"])));
|
|
20431
|
+
newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20432
|
+
newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
20422
20433
|
newStyled(Text$7)(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20423
20434
|
var Container$q = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20424
20435
|
var Benefits$2 = newStyled.div(templateObject_8$a || (templateObject_8$a = __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) {
|
|
20425
20436
|
var height = _a.height;
|
|
20426
20437
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20427
20438
|
});
|
|
20428
|
-
var templateObject_1$
|
|
20439
|
+
var templateObject_1$A, templateObject_2$s, templateObject_3$r, templateObject_4$m, templateObject_5$j, templateObject_6$e, templateObject_7$d, templateObject_8$a;
|
|
20429
20440
|
|
|
20430
20441
|
var renderCopy = function (copy) {
|
|
20431
20442
|
if (typeof copy === 'string') {
|
|
@@ -20465,15 +20476,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
20465
20476
|
justifyContent: 'center',
|
|
20466
20477
|
gap: '10px',
|
|
20467
20478
|
});
|
|
20468
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
20479
|
+
var StyledContent = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
20469
20480
|
var bgColor = _a.bgColor;
|
|
20470
20481
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
20471
20482
|
}, function (_a) {
|
|
20472
20483
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
20473
20484
|
return width;
|
|
20474
20485
|
});
|
|
20475
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
20476
|
-
var templateObject_1$
|
|
20486
|
+
var StyledController = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
20487
|
+
var templateObject_1$z, templateObject_2$r;
|
|
20477
20488
|
|
|
20478
20489
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
20479
20490
|
var background = _a.background, width = _a.width;
|
|
@@ -20514,14 +20525,14 @@ var BasicAccordion = function (_a) {
|
|
|
20514
20525
|
} }), void 0));
|
|
20515
20526
|
};
|
|
20516
20527
|
|
|
20517
|
-
var ContainerWrapper$2 = newStyled.div(templateObject_1$
|
|
20518
|
-
var ImageWrapper = newStyled.div(templateObject_2$
|
|
20519
|
-
var ImageComponent = newStyled(Image$3)(templateObject_3$
|
|
20520
|
-
var RightComponentWrapper = newStyled.div(templateObject_4$
|
|
20521
|
-
var TitleWrapper$2 = newStyled.div(templateObject_5$
|
|
20528
|
+
var ContainerWrapper$2 = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"], ["\n display: flex;\n flex-direction: row;\n max-height: 180px;\n width: auto;\n max-width: 450px;\n gap: 5px;\n @media (max-width: 480px) {\n gap: 0px;\n font-size: 12px !important;\n }\n"])));
|
|
20529
|
+
var ImageWrapper = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"])));
|
|
20530
|
+
var ImageComponent = newStyled(Image$3)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"])));
|
|
20531
|
+
var RightComponentWrapper = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"])));
|
|
20532
|
+
var TitleWrapper$2 = newStyled.div(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
20522
20533
|
var SubTitleWrapper = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"])));
|
|
20523
20534
|
var ButtonsWrapper = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20524
|
-
var templateObject_1$
|
|
20535
|
+
var templateObject_1$y, templateObject_2$q, templateObject_3$q, templateObject_4$l, templateObject_5$i, templateObject_6$d, templateObject_7$c;
|
|
20525
20536
|
|
|
20526
20537
|
function CartItemCard(_a) {
|
|
20527
20538
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20567,9 +20578,9 @@ var Shades200Color$1 = '#bbbbbb';
|
|
|
20567
20578
|
var Shades700Color$1 = '#292929';
|
|
20568
20579
|
var PrimaryColor$1 = '#f7a08b';
|
|
20569
20580
|
var ClubBorderColor$1 = '#882a2b';
|
|
20570
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
20571
|
-
var DiscountTag$2 = newStyled.div(templateObject_2$
|
|
20572
|
-
var ContainerBase$2 = newStyled.div(templateObject_3$
|
|
20581
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20582
|
+
var DiscountTag$2 = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient$1);
|
|
20583
|
+
var ContainerBase$2 = newStyled.div(templateObject_3$p || (templateObject_3$p = __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) {
|
|
20573
20584
|
var selected = _a.selected;
|
|
20574
20585
|
return selected ? "1.5px solid ".concat(ClubBorderColor$1) : "1px solid ".concat(Shades200Color$1);
|
|
20575
20586
|
}, function (_a) {
|
|
@@ -20578,14 +20589,14 @@ var ContainerBase$2 = newStyled.div(templateObject_3$o || (templateObject_3$o =
|
|
|
20578
20589
|
? "& label {\n font-weight: 700;\n }"
|
|
20579
20590
|
: '';
|
|
20580
20591
|
}, PrimaryColor$1);
|
|
20581
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
20592
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
20582
20593
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20583
20594
|
return (isNoMember && selected ? Shades700Color$1 : '');
|
|
20584
20595
|
}, function (_a) {
|
|
20585
20596
|
var onClick = _a.onClick;
|
|
20586
20597
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20587
20598
|
});
|
|
20588
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$
|
|
20599
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
20589
20600
|
var SubscriptionHeader$2 = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
20590
20601
|
var isSelected = _a.isSelected;
|
|
20591
20602
|
return (isSelected ? "1px solid ".concat(Shades200Color$1) : "none");
|
|
@@ -20610,7 +20621,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_10$6 || (templateOb
|
|
|
20610
20621
|
: Shades200Color$1;
|
|
20611
20622
|
});
|
|
20612
20623
|
var Container$p = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20613
|
-
var templateObject_1$
|
|
20624
|
+
var templateObject_1$x, templateObject_2$p, templateObject_3$p, templateObject_4$k, templateObject_5$h, templateObject_6$c, templateObject_7$b, templateObject_8$9, templateObject_9$8, templateObject_10$6, templateObject_11$4;
|
|
20614
20625
|
|
|
20615
20626
|
var ClubOfferSelector = function (_a) {
|
|
20616
20627
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20670,9 +20681,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20670
20681
|
var Shades700Color = '#292929';
|
|
20671
20682
|
var PrimaryColor = '#f7a08b';
|
|
20672
20683
|
var ClubBorderColor = '#882a2b';
|
|
20673
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
20674
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
20675
|
-
var ContainerBase$1 = newStyled.div(templateObject_3$
|
|
20684
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20685
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient);
|
|
20686
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __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) {
|
|
20676
20687
|
var selected = _a.selected;
|
|
20677
20688
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20678
20689
|
}, function (_a) {
|
|
@@ -20681,14 +20692,14 @@ var ContainerBase$1 = newStyled.div(templateObject_3$n || (templateObject_3$n =
|
|
|
20681
20692
|
? "& label {\n font-weight: 700;\n }"
|
|
20682
20693
|
: '';
|
|
20683
20694
|
}, PrimaryColor);
|
|
20684
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
20695
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
20685
20696
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20686
20697
|
return (isNoMember && selected ? Shades700Color : '');
|
|
20687
20698
|
}, function (_a) {
|
|
20688
20699
|
var onClick = _a.onClick;
|
|
20689
20700
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20690
20701
|
});
|
|
20691
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
20702
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
20692
20703
|
var SubscriptionHeader$1 = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
20693
20704
|
var isSelected = _a.isSelected;
|
|
20694
20705
|
return (isSelected ? "1px solid ".concat(Shades200Color) : "none");
|
|
@@ -20714,7 +20725,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$5 || (templateOb
|
|
|
20714
20725
|
});
|
|
20715
20726
|
var Container$o = newStyled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20716
20727
|
var TermsText = newStyled(Text$7)(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20717
|
-
var templateObject_1$
|
|
20728
|
+
var templateObject_1$w, templateObject_2$o, templateObject_3$o, templateObject_4$j, templateObject_5$g, templateObject_6$b, templateObject_7$a, templateObject_8$8, templateObject_9$7, templateObject_10$5, templateObject_11$3, templateObject_12$2;
|
|
20718
20729
|
|
|
20719
20730
|
var ClubOfferSelector2 = function (_a) {
|
|
20720
20731
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs, termsTextLink = _a.termsTextLink;
|
|
@@ -20760,25 +20771,25 @@ var ClubOfferSelector2 = function (_a) {
|
|
|
20760
20771
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector2.id) }, void 0) }, void 0), jsxRuntime.jsx(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsxRuntime.jsx(BenefitsContainer$1, { children: jsxRuntime.jsx(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: updatedClubOfferBenefits[0] } }, void 0) }, void 0))] }), void 0), isSelected && (jsxRuntime.jsxs(TermsText, __assign$1({ variant: "body" }, { children: [updatedClubOfferBenefits[1], jsxRuntime.jsxs("span", { children: ["Terms ", jsxRuntime.jsx("a", __assign$1({ href: termsTextLink }, { children: "here" }), void 0), "."] }, void 0)] }), void 0)), jsxRuntime.jsxs(SinglePurchaseContainer$1, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$1, { isNoMember: true, testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20761
20772
|
};
|
|
20762
20773
|
|
|
20763
|
-
var ContainerWrapper$1 = newStyled.div(templateObject_1$
|
|
20774
|
+
var ContainerWrapper$1 = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
20764
20775
|
var $checked = _a.$checked;
|
|
20765
20776
|
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20766
20777
|
}, function (_a) {
|
|
20767
20778
|
var $checked = _a.$checked;
|
|
20768
20779
|
return ($checked ? '#FFE1B8' : '#E5E5E5');
|
|
20769
20780
|
});
|
|
20770
|
-
var CardHeaderWrapper = newStyled.div(templateObject_2$
|
|
20771
|
-
var CardBody = newStyled.div(templateObject_3$
|
|
20772
|
-
var ClubCopyWrapper = newStyled.div(templateObject_4$
|
|
20773
|
-
var ClubCopyTextWrapper = newStyled.div(templateObject_5$
|
|
20774
|
-
var templateObject_1$
|
|
20781
|
+
var CardHeaderWrapper = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
20782
|
+
var CardBody = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20783
|
+
var ClubCopyWrapper = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20784
|
+
var ClubCopyTextWrapper = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20785
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$n, templateObject_4$i, templateObject_5$f;
|
|
20775
20786
|
|
|
20776
20787
|
function Card(_a) {
|
|
20777
20788
|
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _c = _a.termsText, termsText = _c === void 0 ? 'Terms here.' : _c;
|
|
20778
20789
|
return (jsxRuntime.jsxs(ContainerWrapper$1, __assign$1({ "$checked": isChecked, style: style }, { children: [jsxRuntime.jsxs(CardHeaderWrapper, { children: [jsxRuntime.jsxs(ClubCopyWrapper, { children: [icon, jsxRuntime.jsx(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsxRuntime.jsx("div", { children: children }, void 0)] }, void 0), !isChecked && (jsxRuntime.jsxs(CardBody, __assign$1({ id: "joinClubCardBody" }, { children: [bodyCopy, ' ', jsxRuntime.jsx("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: termsText }), void 0)] }), void 0))] }), void 0));
|
|
20779
20790
|
}
|
|
20780
20791
|
|
|
20781
|
-
var StyledButton = newStyled.button(templateObject_1$
|
|
20792
|
+
var StyledButton = newStyled.button(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n padding: 10px 20px;\n border-radius: 8px;\n background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n color: var(--neutrals-white-ffffff, #fff);\n text-align: center;\n font-family: 'Avenir Next';\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 18px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n ", ";\n"], ["\n padding: 10px 20px;\n border-radius: 8px;\n background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n color: var(--neutrals-white-ffffff, #fff);\n text-align: center;\n font-family: 'Avenir Next';\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 18px;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n ", ";\n"])), function (_a) {
|
|
20782
20793
|
var customStyle = _a.customStyle;
|
|
20783
20794
|
return customStyle && __assign$1({}, customStyle);
|
|
20784
20795
|
});
|
|
@@ -20791,7 +20802,7 @@ var JoinClubCard = function (_a) {
|
|
|
20791
20802
|
};
|
|
20792
20803
|
return (jsxRuntime.jsx(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style, termsText: termsText }, { children: showButton ? (jsxRuntime.jsx(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsxRuntime.jsx(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked, color: toggleColor }, void 0)) }), void 0));
|
|
20793
20804
|
};
|
|
20794
|
-
var templateObject_1$
|
|
20805
|
+
var templateObject_1$u;
|
|
20795
20806
|
|
|
20796
20807
|
function useOfferAtCartForAutoshipCrossSell(props) {
|
|
20797
20808
|
var theme = useTheme$1();
|
|
@@ -20815,21 +20826,21 @@ function useOfferAtCartForAutoshipCrossSell(props) {
|
|
|
20815
20826
|
return __assign$1({ handleOnClick: handleOnClick, theme: theme, isMobile: isMobile, selectedSize: selectedSize, setSelectedSize: setSelectedSize, showErrorMessage: showErrorMessage, setShowErrorMessage: setShowErrorMessage }, props);
|
|
20816
20827
|
}
|
|
20817
20828
|
|
|
20818
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
20819
|
-
var Body$2 = newStyled.div(templateObject_2$
|
|
20829
|
+
var Container$n = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n"])));
|
|
20830
|
+
var Body$2 = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"], ["\n display: flex;\n gap: 8px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"])), function (_a) {
|
|
20820
20831
|
var height = _a.height;
|
|
20821
20832
|
return height;
|
|
20822
20833
|
});
|
|
20823
|
-
var RightContent = newStyled.div(templateObject_3$
|
|
20824
|
-
var Benefits$1 = newStyled.div(templateObject_4$
|
|
20834
|
+
var RightContent = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 8px;\n height: 100%;\n width: 100%;\n"])));
|
|
20835
|
+
var Benefits$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n padding: 6px 10px;\n border-radius: 8px;\n background-color: ", ";\n"])), function (_a) {
|
|
20825
20836
|
var height = _a.height;
|
|
20826
20837
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20827
20838
|
}, function (_a) {
|
|
20828
20839
|
var theme = _a.theme, backgroundColor = _a.backgroundColor;
|
|
20829
20840
|
return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades['10'].color;
|
|
20830
20841
|
});
|
|
20831
|
-
var Actions = newStyled.div(templateObject_5$
|
|
20832
|
-
var templateObject_1$
|
|
20842
|
+
var Actions = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n"])));
|
|
20843
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$m, templateObject_4$h, templateObject_5$e;
|
|
20833
20844
|
|
|
20834
20845
|
var getTitleProps = function (_a) {
|
|
20835
20846
|
var titleContent = _a.content, bold = _a.bold;
|
|
@@ -20868,15 +20879,15 @@ var VariantType$1;
|
|
|
20868
20879
|
VariantType["V1"] = "v1";
|
|
20869
20880
|
VariantType["V2"] = "v2";
|
|
20870
20881
|
})(VariantType$1 || (VariantType$1 = {}));
|
|
20871
|
-
var ContainerV2 = newStyled.div(templateObject_1$
|
|
20882
|
+
var ContainerV2 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: ", ";\n"])), function (_a) {
|
|
20872
20883
|
var variant = _a.variant;
|
|
20873
20884
|
return (variant === VariantType$1.V2 ? '#F7F7F7' : 'white');
|
|
20874
20885
|
});
|
|
20875
|
-
var ActionsV2 = newStyled.div(templateObject_2$
|
|
20876
|
-
var SizeCardItem = newStyled.div(templateObject_3$
|
|
20877
|
-
var SizeCardWrapper = newStyled.div(templateObject_4$
|
|
20878
|
-
var BottomCopyWrapper$1 = newStyled.div(templateObject_5$
|
|
20879
|
-
var templateObject_1$
|
|
20886
|
+
var ActionsV2 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"])));
|
|
20887
|
+
var SizeCardItem = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"], ["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"])));
|
|
20888
|
+
var SizeCardWrapper = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"], ["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"])));
|
|
20889
|
+
var BottomCopyWrapper$1 = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"])));
|
|
20890
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$l, templateObject_4$g, templateObject_5$d;
|
|
20880
20891
|
|
|
20881
20892
|
var SizeOptions = function (_a) {
|
|
20882
20893
|
var onAddToCart = _a.onAddToCart, sizeOptions = _a.sizeOptions;
|
|
@@ -20896,12 +20907,12 @@ var OfferAtCartV2 = function (_a) {
|
|
|
20896
20907
|
return (jsxRuntime.jsxs(ContainerV2, __assign$1({ className: className, variant: bottomCopy ? VariantType$1.V2 : VariantType$1.V1 }, { children: [jsxRuntime.jsx(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxRuntime.jsxs(Body$2, { children: [src && alt && (jsxRuntime.jsx(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating, width: isMobile ? '90px' : '122px' }, void 0)), jsxRuntime.jsx(RightContent, { children: jsxRuntime.jsx(Benefits$1, { children: jsxRuntime.jsx(OfferAtCartBenefits, { benefits: benefits }, void 0) }, void 0) }, void 0)] }, void 0), jsxRuntime.jsx("div", { children: !isMobile && ActionsSection }, void 0), isMobile && ActionsSection, bottomCopy && jsxRuntime.jsx(BottomCopyWrapper$1, { children: renderBottomCopy(bottomCopy) }, void 0)] }), void 0));
|
|
20897
20908
|
};
|
|
20898
20909
|
|
|
20899
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
20900
|
-
var QuatityLabel$1 = newStyled.div(templateObject_2$
|
|
20901
|
-
var TextSmallLineHeight = newStyled(Text$7)(templateObject_3$
|
|
20902
|
-
var ButtonSecondaryNoWrap = newStyled(ButtonSecondary)(templateObject_4$
|
|
20903
|
-
var ContentWrapper = newStyled.div(templateObject_5$
|
|
20904
|
-
var templateObject_1$
|
|
20910
|
+
var Container$m = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n width: 100%;\n padding: ", ";\n gap: 20px;\n background-color: #f6f0e7;\n align-items: center;\n @media (max-width: 767px) {\n gap: 15px;\n }\n"], ["\n display: flex;\n width: 100%;\n padding: ", ";\n gap: 20px;\n background-color: #f6f0e7;\n align-items: center;\n @media (max-width: 767px) {\n gap: 15px;\n }\n"])), function (props) { return (props.isMobile ? '16px 8px' : '20px 12px'); });
|
|
20911
|
+
var QuatityLabel$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n background: #d4605b;\n border-radius: 50%;\n width: 53px;\n height: 53px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 53px;\n @media (max-width: 767px) {\n min-width: 56px;\n width: 56px;\n height: 56px;\n }\n"], ["\n background: #d4605b;\n border-radius: 50%;\n width: 53px;\n height: 53px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 53px;\n @media (max-width: 767px) {\n min-width: 56px;\n width: 56px;\n height: 56px;\n }\n"])));
|
|
20912
|
+
var TextSmallLineHeight = newStyled(Text$7)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n line-height: 17px;\n"], ["\n line-height: 17px;\n"])));
|
|
20913
|
+
var ButtonSecondaryNoWrap = newStyled(ButtonSecondary)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n padding: ", ";\n white-space: nowrap;\n"], ["\n padding: ", ";\n white-space: nowrap;\n"])), function (props) { return (props.size === exports.ComponentSize.XSmall ? '8px' : '14px 32px'); });
|
|
20914
|
+
var ContentWrapper = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 6px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 6px;\n"])));
|
|
20915
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$k, templateObject_4$f, templateObject_5$c;
|
|
20905
20916
|
|
|
20906
20917
|
var OfferAtCartV3 = function (_a) {
|
|
20907
20918
|
var className = _a.className, _b = _a.quantity, quantity = _b === void 0 ? '2X' : _b, titleContent = _a.title.content, onAddToCart = _a.onAddToCart, ctaText = _a.ctaText;
|
|
@@ -20911,20 +20922,20 @@ var OfferAtCartV3 = function (_a) {
|
|
|
20911
20922
|
|
|
20912
20923
|
var classNames = ".twoOffers > div > div > div{background-color:white;}.benefits{display:flex;flex-direction:column;width:100%!important;}.benefits > div > div{width:100%!important;}.benefits > div > div > div{display:flex;flex-direction:row;gap:8px;width:100%;justify-content:space-between;}";
|
|
20913
20924
|
|
|
20914
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
20915
|
-
var TitleWrapper$1 = newStyled.div(templateObject_2$
|
|
20916
|
-
var Body$1 = newStyled.div(templateObject_3$
|
|
20925
|
+
var Container$l = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #f7f7f7;\n font-size: 14px;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n padding: 12px;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #f7f7f7;\n font-size: 14px;\n"])));
|
|
20926
|
+
var TitleWrapper$1 = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n gap: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid #d1d1d1;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n gap: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid #d1d1d1;\n"])));
|
|
20927
|
+
var Body$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n height: ", ";\n margin-bottom: 1%;\n"])), function (_a) {
|
|
20917
20928
|
var height = _a.height;
|
|
20918
20929
|
return height;
|
|
20919
20930
|
});
|
|
20920
|
-
var Benefits = newStyled.div(templateObject_4$
|
|
20931
|
+
var Benefits = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n background-color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n background-color: ", ";\n"])), function (_a) {
|
|
20921
20932
|
var height = _a.height;
|
|
20922
20933
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20923
20934
|
}, function (_a) {
|
|
20924
20935
|
var theme = _a.theme, backgroundColor = _a.backgroundColor;
|
|
20925
20936
|
return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades['10'].color;
|
|
20926
20937
|
});
|
|
20927
|
-
var templateObject_1$
|
|
20938
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$j, templateObject_4$e;
|
|
20928
20939
|
|
|
20929
20940
|
var OfferAtCartV4 = function (props) {
|
|
20930
20941
|
var _a = useOfferAtCartForAutoshipCrossSell(props), className = _a.className, _b = _a.title, titleContent = _b.content, bold = _b.bold, image = _a.image, benefits = _a.benefits, _c = _a.ctaText, ctaText = _c === void 0 ? 'Yes, I want this offer' : _c, sizeOptions = _a.sizeOptions, rating = _a.rating, bottomCopy = _a.bottomCopy, theme = _a.theme, setSelectedSize = _a.setSelectedSize, setShowErrorMessage = _a.setShowErrorMessage, isMobile = _a.isMobile, showErrorMessage = _a.showErrorMessage, handleOnClick = _a.handleOnClick;
|
|
@@ -20934,16 +20945,16 @@ var OfferAtCartV4 = function (props) {
|
|
|
20934
20945
|
return (jsxRuntime.jsx(Container$l, __assign$1({ className: className }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TitleWrapper$1, { children: [image && (jsxRuntime.jsx(OfferAtCartImage, { width: "66px", height: "66px", isMobile: isMobile, src: image.src, alt: image.alt, rating: rating }, void 0)), jsxRuntime.jsx(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0)] }, void 0), jsxRuntime.jsxs(Body$1, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [jsxRuntime.jsx("span", { children: "Includes:" }, void 0), jsxRuntime.jsxs(RightContent, { children: [jsxRuntime.jsx(Benefits, __assign$1({ id: "benefits", className: classNames.benefits }, { children: jsxRuntime.jsx(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0), !isMobile && RenderActionSection(), !isMobile && showErrorMessage && ErrorMessage(theme)] }, void 0)] }), void 0), isMobile && RenderActionSection(), isMobile && showErrorMessage && ErrorMessage(theme), bottomCopy && jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: bottomCopy } }, void 0)] }, void 0) }), void 0));
|
|
20935
20946
|
};
|
|
20936
20947
|
|
|
20937
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
20938
|
-
var ProductImageContainer = newStyled.div(templateObject_2$
|
|
20939
|
-
var Body = newStyled.div(templateObject_3$
|
|
20940
|
-
var QuatityLabel = newStyled.div(templateObject_4$
|
|
20941
|
-
newStyled.div(templateObject_5$
|
|
20948
|
+
var Container$k = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n width: 100%;\n padding: 16px;\n border: 1px solid #d1d1d1;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #fff;\n"], ["\n display: flex;\n width: 100%;\n padding: 16px;\n border: 1px solid #d1d1d1;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #fff;\n"])));
|
|
20949
|
+
var ProductImageContainer = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n position: relative;\n margin-right: 16.5px;\n"], ["\n position: relative;\n margin-right: 16.5px;\n"])));
|
|
20950
|
+
var Body = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 5px;\n"])));
|
|
20951
|
+
var QuatityLabel = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n background: #d4605b;\n border-radius: 50%;\n width: 33px;\n height: 33px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 5px;\n right: -16.5px;\n"], ["\n background: #d4605b;\n border-radius: 50%;\n width: 33px;\n height: 33px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 5px;\n right: -16.5px;\n"])));
|
|
20952
|
+
newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 700;\n color: #292929;\n line-height: 20px;\n margin-top: 10px;\n"], ["\n font-size: 14px;\n font-weight: 700;\n color: #292929;\n line-height: 20px;\n margin-top: 10px;\n"])));
|
|
20942
20953
|
var OfferTitle = newStyled(Text$7)(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n font-size: 20px;\n margin-top: 10px;\n @media (max-width: 768px) {\n font-size: 14px;\n }\n"], ["\n font-size: 20px;\n margin-top: 10px;\n @media (max-width: 768px) {\n font-size: 14px;\n }\n"])));
|
|
20943
20954
|
var OfferText = newStyled(Text$7)(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 16px;\n display: inline;\n max-width: 190px;\n"], ["\n font-size: 12px;\n line-height: 16px;\n display: inline;\n max-width: 190px;\n"])));
|
|
20944
20955
|
var DiscountValueText = newStyled.span(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
20945
20956
|
var OfferButton = newStyled(ButtonSecondary)(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n font-size: 0.75rem;\n padding: 0.875rem 2rem;\n"], ["\n font-size: 0.75rem;\n padding: 0.875rem 2rem;\n"])));
|
|
20946
|
-
var templateObject_1$
|
|
20957
|
+
var templateObject_1$p, templateObject_2$i, templateObject_3$i, templateObject_4$d, templateObject_5$b, templateObject_6$a, templateObject_7$9, templateObject_8$7, templateObject_9$6;
|
|
20947
20958
|
|
|
20948
20959
|
var VariantType;
|
|
20949
20960
|
(function (VariantType) {
|
|
@@ -20965,11 +20976,11 @@ var ImageContainer$1 = newStyled.div(function (_a) {
|
|
|
20965
20976
|
height: height,
|
|
20966
20977
|
});
|
|
20967
20978
|
});
|
|
20968
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
20969
|
-
var Container$j = newStyled.a(templateObject_2$
|
|
20970
|
-
var ProdCardContainer$2 = newStyled.div(templateObject_3$
|
|
20971
|
-
var Title$2 = newStyled.h2(templateObject_4$
|
|
20972
|
-
newStyled.div(templateObject_5$
|
|
20979
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
20980
|
+
var Container$j = newStyled.a(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
20981
|
+
var ProdCardContainer$2 = newStyled.div(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
20982
|
+
var Title$2 = newStyled.h2(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
20983
|
+
newStyled.div(templateObject_5$a || (templateObject_5$a = __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) {
|
|
20973
20984
|
var style = _a.style;
|
|
20974
20985
|
return style.width;
|
|
20975
20986
|
});
|
|
@@ -20979,7 +20990,7 @@ var BottomTagContainer$6 = newStyled.div(templateObject_6$9 || (templateObject_6
|
|
|
20979
20990
|
});
|
|
20980
20991
|
newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
20981
20992
|
var DiscountLabel$2 = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n &:empty {\n display: none;\n }\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n &:empty {\n display: none;\n }\n"])));
|
|
20982
|
-
var templateObject_1$
|
|
20993
|
+
var templateObject_1$o, templateObject_2$h, templateObject_3$h, templateObject_4$c, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$6;
|
|
20983
20994
|
|
|
20984
20995
|
var PriceLabelDisplay = function (_a) {
|
|
20985
20996
|
var price = _a.price, discountTag = _a.discountTag;
|
|
@@ -21016,7 +21027,7 @@ var getStylesBySize$2 = function (size) {
|
|
|
21016
21027
|
};
|
|
21017
21028
|
}
|
|
21018
21029
|
};
|
|
21019
|
-
var TopTagContainer$6 = newStyled.div(templateObject_1$
|
|
21030
|
+
var TopTagContainer$6 = newStyled.div(templateObject_1$n || (templateObject_1$n = __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) {
|
|
21020
21031
|
var style = _a.style;
|
|
21021
21032
|
return style.width;
|
|
21022
21033
|
});
|
|
@@ -21034,7 +21045,7 @@ var ProductCard = function (_a) {
|
|
|
21034
21045
|
}, [size]);
|
|
21035
21046
|
return (jsxRuntime.jsxs(ProdCardContainer$2, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxRuntime.jsxs(Container$j, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxRuntime.jsxs(ImageContainer$1, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsxRuntime.jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsxRuntime.jsx(TopTagContainer$6, __assign$1({ style: { width: 'inherit' } }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$6, __assign$1({ style: { width: 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsxRuntime.jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsxRuntime.jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), jsxRuntime.jsxs(Container$j, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: "".concat(size === exports.ComponentSize.Small ? 'start' : 'center') } }, { children: [jsxRuntime.jsx(Spacing, { size: space }, void 0), ratingPos !== 'bottom' && (jsxRuntime.jsx(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0)), jsxRuntime.jsx(Spacing, { size: space }, void 0), jsxRuntime.jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsxRuntime.jsx(Spacing, { size: space }, void 0), priceLoading ? (jsxRuntime.jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxRuntime.jsx(PriceLabelDisplay, { price: price, discountTag: discountTag }, void 0)), jsxRuntime.jsx(Spacing, { size: space }, void 0), ratingPos === 'bottom' && (jsxRuntime.jsx(RatingDisplay, { rating: rating, size: size, isRatingLoading: isRatingLoading }, void 0))] }), void 0)] }), void 0));
|
|
21036
21047
|
};
|
|
21037
|
-
var templateObject_1$
|
|
21048
|
+
var templateObject_1$n;
|
|
21038
21049
|
|
|
21039
21050
|
var ImageContainer = newStyled.div(function (_a) {
|
|
21040
21051
|
var width = _a.width, height = _a.height;
|
|
@@ -21044,11 +21055,11 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
21044
21055
|
height: height,
|
|
21045
21056
|
});
|
|
21046
21057
|
});
|
|
21047
|
-
var DiscountLabel$1 = newStyled.div(templateObject_1$
|
|
21048
|
-
var ImageHoverContainer = newStyled.img(templateObject_2$
|
|
21049
|
-
var Container$i = newStyled.a(templateObject_3$
|
|
21050
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_4$
|
|
21051
|
-
var Title$1 = newStyled.h2(templateObject_5$
|
|
21058
|
+
var DiscountLabel$1 = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
21059
|
+
var ImageHoverContainer = newStyled.img(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
21060
|
+
var Container$i = newStyled.a(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
21061
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __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"])));
|
|
21062
|
+
var Title$1 = newStyled.h2(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
21052
21063
|
var TopTagContainer$5 = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
21053
21064
|
var style = _a.style;
|
|
21054
21065
|
return style.width;
|
|
@@ -21066,7 +21077,7 @@ var BottomTagContainer$5 = newStyled.div(templateObject_7$7 || (templateObject_7
|
|
|
21066
21077
|
var style = _a.style;
|
|
21067
21078
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
21068
21079
|
});
|
|
21069
|
-
var templateObject_1$
|
|
21080
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$g, templateObject_4$b, templateObject_5$9, templateObject_6$8, templateObject_7$7;
|
|
21070
21081
|
|
|
21071
21082
|
var getStylesBySize$1 = function (size) {
|
|
21072
21083
|
switch (size) {
|
|
@@ -21142,11 +21153,11 @@ newStyled.div(function (_a) {
|
|
|
21142
21153
|
height: height,
|
|
21143
21154
|
});
|
|
21144
21155
|
});
|
|
21145
|
-
var DiscountLabel = newStyled.div(templateObject_1$
|
|
21146
|
-
newStyled.img(templateObject_2$
|
|
21147
|
-
var Container$h = newStyled.a(templateObject_3$
|
|
21148
|
-
var ProdCardContainer = newStyled.div(templateObject_4$
|
|
21149
|
-
var Title = newStyled.h2(templateObject_5$
|
|
21156
|
+
var DiscountLabel = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"], ["\n background-color: #c64844;\n color: white;\n font-size: 10px;\n line-height: 14px;\n padding: 4px 6px 4px 6px;\n font-weight: bold;\n border-radius: 4px;\n margin-top: 2px;\n height: fit-content;\n"])));
|
|
21157
|
+
newStyled.img(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
21158
|
+
var Container$h = newStyled.a(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
21159
|
+
var ProdCardContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n width: fit-content;\n text-decoration: none;\n"])));
|
|
21160
|
+
var Title = newStyled.h2(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
21150
21161
|
newStyled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
21151
21162
|
var style = _a.style;
|
|
21152
21163
|
return style.width;
|
|
@@ -21164,7 +21175,7 @@ newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject([
|
|
|
21164
21175
|
var style = _a.style;
|
|
21165
21176
|
return (_b = style.width) !== null && _b !== void 0 ? _b : 'auto';
|
|
21166
21177
|
});
|
|
21167
|
-
var templateObject_1$
|
|
21178
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$f, templateObject_4$a, templateObject_5$8, templateObject_6$7, templateObject_7$6;
|
|
21168
21179
|
|
|
21169
21180
|
var getStylesBySize = function (size) {
|
|
21170
21181
|
switch (size) {
|
|
@@ -21285,7 +21296,7 @@ var playVideoCommand = function () {
|
|
|
21285
21296
|
sendCommandToIframe('playVideo');
|
|
21286
21297
|
};
|
|
21287
21298
|
|
|
21288
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
21299
|
+
var Container$g = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
21289
21300
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21290
21301
|
return borderRadiusVariant &&
|
|
21291
21302
|
"\n border-radius: 40px;\n ";
|
|
@@ -21293,10 +21304,10 @@ var Container$g = newStyled.div(templateObject_1$j || (templateObject_1$j = __ma
|
|
|
21293
21304
|
var theme = _a.theme;
|
|
21294
21305
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
21295
21306
|
});
|
|
21296
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
21297
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_3$
|
|
21298
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_4$
|
|
21299
|
-
var NavButtonContainer$3 = newStyled.div(templateObject_5$
|
|
21307
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
21308
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
21309
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21310
|
+
var NavButtonContainer$3 = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
21300
21311
|
var Button$4 = newStyled.button(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
21301
21312
|
var settings$4 = {
|
|
21302
21313
|
dots: true,
|
|
@@ -21375,16 +21386,16 @@ var ImageProductSlide = function (_a) {
|
|
|
21375
21386
|
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: getImageAttributes$1(idx, itemsOnViewport, imgAttributes), height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
21376
21387
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21377
21388
|
};
|
|
21378
|
-
var templateObject_1$
|
|
21389
|
+
var templateObject_1$k, templateObject_2$e, templateObject_3$e, templateObject_4$9, templateObject_5$7, templateObject_6$6;
|
|
21379
21390
|
|
|
21380
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
21391
|
+
var Container$f = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
21381
21392
|
var ProductGalleryMobile = function (_a) {
|
|
21382
21393
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
|
|
21383
21394
|
var _e = React$2.useState(0), activeIndex = _e[0], setActiveIndex = _e[1];
|
|
21384
21395
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
21385
21396
|
return (jsxRuntime.jsx(Container$f, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); }, itemsOnViewport: itemsOnViewport }, void 0) }), void 0));
|
|
21386
21397
|
};
|
|
21387
|
-
var templateObject_1$
|
|
21398
|
+
var templateObject_1$j;
|
|
21388
21399
|
|
|
21389
21400
|
function _extends() {
|
|
21390
21401
|
_extends = Object.assign || function (target) {
|
|
@@ -21651,14 +21662,14 @@ function useSwipeable(options) {
|
|
|
21651
21662
|
return handlers;
|
|
21652
21663
|
}
|
|
21653
21664
|
|
|
21654
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
21665
|
+
var Button$3 = newStyled.button(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
21655
21666
|
var ArrowButton = function (_a) {
|
|
21656
21667
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
21657
21668
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
21658
21669
|
};
|
|
21659
|
-
var templateObject_1$
|
|
21670
|
+
var templateObject_1$i;
|
|
21660
21671
|
|
|
21661
|
-
var Container$e = newStyled.div(templateObject_1$
|
|
21672
|
+
var Container$e = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
21662
21673
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
21663
21674
|
var SlideDots = function (_a) {
|
|
21664
21675
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -21667,11 +21678,11 @@ var SlideDots = function (_a) {
|
|
|
21667
21678
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
21668
21679
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
21669
21680
|
};
|
|
21670
|
-
var templateObject_1$
|
|
21681
|
+
var templateObject_1$h;
|
|
21671
21682
|
|
|
21672
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
21673
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
21674
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
21683
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
21684
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
21685
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
21675
21686
|
var SlideNavigation = function (_a) {
|
|
21676
21687
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
21677
21688
|
var theme = useTheme();
|
|
@@ -21683,23 +21694,23 @@ var SlideNavigation = function (_a) {
|
|
|
21683
21694
|
onNavigate(selectedIndex + 1);
|
|
21684
21695
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
21685
21696
|
};
|
|
21686
|
-
var templateObject_1$
|
|
21697
|
+
var templateObject_1$g, templateObject_2$d, templateObject_3$d;
|
|
21687
21698
|
|
|
21688
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
21699
|
+
var Container$d = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
21689
21700
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21690
21701
|
return borderRadiusVariant &&
|
|
21691
21702
|
"\n border-radius: 40px;\n ";
|
|
21692
21703
|
});
|
|
21693
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
21694
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
21704
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
21705
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21695
21706
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
21696
21707
|
var _b, _c;
|
|
21697
21708
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
21698
21709
|
return (jsxRuntime.jsxs(Container$d, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
21699
21710
|
});
|
|
21700
|
-
var templateObject_1$
|
|
21711
|
+
var templateObject_1$f, templateObject_2$c, templateObject_3$c;
|
|
21701
21712
|
|
|
21702
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
21713
|
+
var Container$c = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
21703
21714
|
var ProductGalleryMobileV2 = function (_a) {
|
|
21704
21715
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
21705
21716
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -21723,9 +21734,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
21723
21734
|
}, [index, images]);
|
|
21724
21735
|
return (jsxRuntime.jsxs(Container$c, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
21725
21736
|
};
|
|
21726
|
-
var templateObject_1$
|
|
21737
|
+
var templateObject_1$e;
|
|
21727
21738
|
|
|
21728
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
21739
|
+
var Container$b = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
21729
21740
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21730
21741
|
return borderRadiusVariant &&
|
|
21731
21742
|
"\n border-radius: 40px;\n ";
|
|
@@ -21733,10 +21744,10 @@ var Container$b = newStyled.div(templateObject_1$c || (templateObject_1$c = __ma
|
|
|
21733
21744
|
var theme = _a.theme;
|
|
21734
21745
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
21735
21746
|
});
|
|
21736
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
21737
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
21738
|
-
var VideoOverlay = newStyled.div(templateObject_4$
|
|
21739
|
-
var Video = newStyled.div(templateObject_5$
|
|
21747
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
21748
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21749
|
+
var VideoOverlay = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
21750
|
+
var Video = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
21740
21751
|
var VideoTag = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
21741
21752
|
var Text = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
21742
21753
|
var NavButtonContainer$2 = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
@@ -21800,14 +21811,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
21800
21811
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
21801
21812
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21802
21813
|
};
|
|
21803
|
-
var templateObject_1$
|
|
21814
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$b, templateObject_4$8, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$5, templateObject_9$5;
|
|
21804
21815
|
|
|
21805
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
21816
|
+
var Container$a = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
21806
21817
|
var ProductGalleryMobileV3 = function (_a) {
|
|
21807
21818
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
21808
21819
|
return (jsxRuntime.jsx(Container$a, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
21809
21820
|
};
|
|
21810
|
-
var templateObject_1$
|
|
21821
|
+
var templateObject_1$c;
|
|
21811
21822
|
|
|
21812
21823
|
function closeZoom() {
|
|
21813
21824
|
var closeButton = document.querySelectorAll('.iiz__btn.iiz__close.iiz__close--visible')[0];
|
|
@@ -21828,10 +21839,10 @@ var afterChangeSlide = function (_a) {
|
|
|
21828
21839
|
closeZoom();
|
|
21829
21840
|
};
|
|
21830
21841
|
|
|
21831
|
-
var TopTagContainer$1 = newStyled.div(templateObject_1$
|
|
21832
|
-
var TopRightTagContainer = newStyled.div(templateObject_2$
|
|
21833
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
21834
|
-
var Container$9 = newStyled.div(templateObject_4$
|
|
21842
|
+
var TopTagContainer$1 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n border-top-left-radius: 8px;\n border-end-end-radius: 16px;\n overflow: hidden;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
21843
|
+
var TopRightTagContainer = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"])));
|
|
21844
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
21845
|
+
var Container$9 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n ", "\n\n padding-left: 15px;\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n margin-left: -7px;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li:last-child button:before {\n ", "\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n"], ["\n ", "\n\n padding-left: 15px;\n position: relative;\n max-height: 524px;\n overflow: hidden;\n\n video {\n width: none;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slider {\n height: 100%;\n min-height: calc(414px + 50px);\n }\n\n .slick-active > div {\n position: absolute;\n }\n .slick-slide:nth-last-of-type(2):not(:last-of-type) > div {\n position: absolute;\n }\n\n .slider-mobile-gallery {\n zoom: 0.8;\n border-radius: 8px;\n overflow: hidden;\n }\n\n .slick-slide:not(.slick-current) .banner-concealable {\n display: none;\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n display: none !important;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n margin-left: -7px;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li:before {\n background-color: var(--truekind-default-secondary);\n }\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background-color: var(--truekind-default-secondary, #292929);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 12px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 12px;\n opacity: 1;\n }\n\n .slick-dots li:last-child button:before {\n ", "\n }\n\n .slick-dots li.slick-active button:before {\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: none;\n }\n\n @media only screen and (max-width: 768px) {\n div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track {\n height: auto;\n }\n\n div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div {\n height: auto;\n }\n }\n"])), function (_a) {
|
|
21835
21846
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21836
21847
|
return borderRadiusVariant &&
|
|
21837
21848
|
"\n border-radius: 40px;\n ";
|
|
@@ -21843,7 +21854,7 @@ var Container$9 = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __ma
|
|
|
21843
21854
|
return lastImage &&
|
|
21844
21855
|
"\n background-color: var(--colors-pallete-primary-color, #cc4125) !important;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: 0;\n ";
|
|
21845
21856
|
});
|
|
21846
|
-
var templateObject_1$
|
|
21857
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$a, templateObject_4$7;
|
|
21847
21858
|
|
|
21848
21859
|
var settings$2 = {
|
|
21849
21860
|
dots: true,
|
|
@@ -21902,9 +21913,9 @@ var ContentGallery = function (_a) {
|
|
|
21902
21913
|
}) }), void 0) }), void 0)] }, void 0));
|
|
21903
21914
|
};
|
|
21904
21915
|
|
|
21905
|
-
var NavButtonContainer$1 = newStyled.div(templateObject_1$
|
|
21906
|
-
var Button$1 = newStyled.button(templateObject_2$
|
|
21907
|
-
var Container$8 = newStyled.div(templateObject_3$
|
|
21916
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
21917
|
+
var Button$1 = newStyled.button(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
21918
|
+
var Container$8 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n max-width: 440px;\n overflow: hidden;\n\n @media screen and (min-width: 480px) {\n margin: 0 auto;\n }\n\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .iiz {\n max-width: 100%;\n margin: 0;\n position: relative;\n overflow: hidden;\n display: inline-block;\n cursor: -webkit-zoom-in;\n cursor: zoom-in;\n }\n\n .zoomWrapper.iiz {\n max-height: 524px;\n vertical-align: top;\n }\n\n .iiz--drag .iiz__zoom-img--visible {\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n .iiz__img {\n max-width: 100%;\n height: auto;\n display: block;\n pointer-events: none;\n visibility: visible;\n opacity: 1;\n }\n\n .iiz__img--hidden {\n visibility: hidden;\n opacity: 0;\n }\n\n .iiz__img--abs {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n }\n\n .iiz__zoom-img {\n width: auto !important;\n max-width: none !important;\n position: absolute;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n display: block;\n }\n\n .iiz__zoom-img--visible {\n visibility: visible;\n opacity: 1;\n pointer-events: auto;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n -ms-touch-action: none;\n touch-action: none;\n zoom: 1.2;\n }\n\n .iiz__zoom-portal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 99999;\n }\n\n .iiz__btn {\n background: rgba(255, 255, 255, 0.8);\n max-width: 98px;\n min-width: fit-content;\n height: 32px;\n border: none;\n outline: none;\n padding: 0 8px;\n position: absolute;\n z-index: 5;\n text-decoration: none;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .iiz__btn:before {\n content: ' ';\n background-position: center;\n background-repeat: no-repeat;\n display: block;\n }\n\n .iiz__hint {\n bottom: 10%;\n right: 0;\n pointer-events: none;\n border-radius: 150px 0 0 150px;\n }\n\n .iiz__hint:before {\n content: '+';\n background-image: none;\n width: 17px;\n height: 17px;\n font-size: 19px;\n border-radius: 500px;\n border: 2px solid #292929;\n display: inline-block;\n position: relative;\n text-align: center;\n line-height: 17px;\n font-weight: 600;\n }\n\n .iiz__hint:after {\n content: 'Zoom in';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n\n .iiz__close {\n border-radius: 150px;\n top: auto;\n right: 0;\n left: 0;\n margin: auto;\n bottom: 20px;\n visibility: hidden;\n opacity: 0;\n color: #292929;\n }\n\n .iiz__close--visible {\n visibility: visible;\n opacity: 1;\n cursor: pointer;\n }\n\n .iiz__close::before {\n content: ' ';\n width: 16px;\n height: 16px;\n background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#222)),\n -webkit-gradient(linear, left top, left bottom, from(#222), to(#222));\n background-image: linear-gradient(#222, #222), linear-gradient(#222, #222);\n background-size: 65% 2px, 2px 65%;\n transform: rotate(45deg);\n border-radius: 500px;\n border: 2px solid #292929;\n }\n\n .iiz__close::after {\n content: 'Close';\n font-size: 14px;\n font-weight: 600;\n display: inline-block;\n margin-left: 5px;\n }\n"])), function (_a) {
|
|
21908
21919
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
21909
21920
|
return borderRadiusVariant &&
|
|
21910
21921
|
"\n border-radius: 40px;\n ";
|
|
@@ -21912,7 +21923,7 @@ var Container$8 = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __ma
|
|
|
21912
21923
|
var theme = _a.theme;
|
|
21913
21924
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
21914
21925
|
});
|
|
21915
|
-
var templateObject_1$
|
|
21926
|
+
var templateObject_1$a, templateObject_2$9, templateObject_3$9;
|
|
21916
21927
|
|
|
21917
21928
|
var settings$1 = {
|
|
21918
21929
|
dots: false,
|
|
@@ -22079,7 +22090,7 @@ var SubContainer = newStyled.div({
|
|
|
22079
22090
|
marginTop: '0px',
|
|
22080
22091
|
},
|
|
22081
22092
|
});
|
|
22082
|
-
var Header$
|
|
22093
|
+
var Header$2 = newStyled.div({
|
|
22083
22094
|
display: 'flex',
|
|
22084
22095
|
justifyContent: 'end',
|
|
22085
22096
|
alignItems: 'center',
|
|
@@ -22108,7 +22119,7 @@ var GalleryDetailed = function (_a) {
|
|
|
22108
22119
|
function closeGallery() {
|
|
22109
22120
|
setGalleryOpened(false);
|
|
22110
22121
|
}
|
|
22111
|
-
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Header$
|
|
22122
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Header$2, { children: jsxRuntime.jsx(IconContainer, __assign$1({ onClick: closeGallery }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.1, width: 1.1 }, void 0) }), void 0) }, void 0), jsxRuntime.jsxs(SubContainer, { children: [jsxRuntime.jsx(MainContent, { contents: images, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, itemsOnViewport: itemsOnViewport }, void 0), jsxRuntime.jsx(Slider, { images: images, test: !!productImageDataTestId, selectedImageIndex: selectedImageIndex, setSelectedImageIndex: setSelectedImageIndex }, void 0)] }, void 0)] }, void 0));
|
|
22112
22123
|
};
|
|
22113
22124
|
|
|
22114
22125
|
var ProductGalleryMobileV4 = function (_a) {
|
|
@@ -22180,8 +22191,8 @@ var THUMBNAIL_SETTINGS = {
|
|
|
22180
22191
|
],
|
|
22181
22192
|
};
|
|
22182
22193
|
|
|
22183
|
-
var Container$5 = newStyled.div(templateObject_1$
|
|
22184
|
-
var SliderContainer = newStyled.div(templateObject_2$
|
|
22194
|
+
var Container$5 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
22195
|
+
var SliderContainer = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
22185
22196
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
22186
22197
|
return borderRadiusVariant &&
|
|
22187
22198
|
"\n border-radius: 40px;\n ";
|
|
@@ -22189,9 +22200,9 @@ var SliderContainer = newStyled.div(templateObject_2$7 || (templateObject_2$7 =
|
|
|
22189
22200
|
var theme = _a.theme;
|
|
22190
22201
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
22191
22202
|
});
|
|
22192
|
-
var TopTagContainer = newStyled.div(templateObject_3$
|
|
22193
|
-
var BottomTagContainer = newStyled.div(templateObject_4$
|
|
22194
|
-
var NavButtonContainer = newStyled.div(templateObject_5$
|
|
22203
|
+
var TopTagContainer = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: absolute;\n left: 0px;\n top: 21px;\n"], ["\n position: absolute;\n left: 0px;\n top: 21px;\n"])));
|
|
22204
|
+
var BottomTagContainer = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
22205
|
+
var NavButtonContainer = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"], ["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"])), function (_a) {
|
|
22195
22206
|
var theme = _a.theme;
|
|
22196
22207
|
return theme.colors.shades.white.color;
|
|
22197
22208
|
});
|
|
@@ -22218,7 +22229,7 @@ var ThumbnailImage = newStyled(Image$3)(templateObject_10$4 || (templateObject_1
|
|
|
22218
22229
|
var borderRadius = _a.borderRadius;
|
|
22219
22230
|
return borderRadius || '0px';
|
|
22220
22231
|
});
|
|
22221
|
-
var templateObject_1$
|
|
22232
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$6, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$4, templateObject_9$4, templateObject_10$4;
|
|
22222
22233
|
|
|
22223
22234
|
var ProductGalleryMobileV5 = function (_a) {
|
|
22224
22235
|
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings, _b = _a.isRatioSquare, isRatioSquare = _b === void 0 ? false : _b;
|
|
@@ -22245,10 +22256,10 @@ var ProductGalleryMobileV5 = function (_a) {
|
|
|
22245
22256
|
}) }), void 0)] }), void 0) }), void 0));
|
|
22246
22257
|
};
|
|
22247
22258
|
|
|
22248
|
-
var Container$4 = newStyled.div(templateObject_1$
|
|
22249
|
-
var ThumbnailWrapper = newStyled.button(templateObject_2$
|
|
22250
|
-
var Thumbnail = newStyled(Image$3)(templateObject_3$
|
|
22251
|
-
var templateObject_1$
|
|
22259
|
+
var Container$4 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n padding-top: 8px;\n gap: 8px;\n overflow-x: auto;\n overflow-y: hidden;\n"], ["\n display: flex;\n padding-top: 8px;\n gap: 8px;\n overflow-x: auto;\n overflow-y: hidden;\n"])));
|
|
22260
|
+
var ThumbnailWrapper = newStyled.button(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n all: unset;\n flex-shrink: 0;\n display: block;\n border: none;\n padding: 0;\n width: 81px;\n height: 86px;\n overflow: hidden;\n scroll-margin-left: 0.5rem;\n scroll-margin-right: 0.5rem;\n box-sizing: border-box;\n border: ", ";\n"], ["\n all: unset;\n flex-shrink: 0;\n display: block;\n border: none;\n padding: 0;\n width: 81px;\n height: 86px;\n overflow: hidden;\n scroll-margin-left: 0.5rem;\n scroll-margin-right: 0.5rem;\n box-sizing: border-box;\n border: ", ";\n"])), function (props) { return (props.active ? '1px solid #292929' : 'unset'); });
|
|
22261
|
+
var Thumbnail = newStyled(Image$3)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n width: 100%;\n object-fit: cover;\n overflow: hidden;\n"], ["\n width: 100%;\n object-fit: cover;\n overflow: hidden;\n"])));
|
|
22262
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$7;
|
|
22252
22263
|
|
|
22253
22264
|
var ColorVariantGallery = function (_a) {
|
|
22254
22265
|
var images = _a.images, selectedImage = _a.selectedImage, setSelectedImage = _a.setSelectedImage;
|
|
@@ -22278,11 +22289,11 @@ var ColorVariantGallery = function (_a) {
|
|
|
22278
22289
|
return (jsxRuntime.jsx(Container$4, __assign$1({ ref: containerRef }, { children: images.map(function (img, i) { return (jsxRuntime.jsx(ThumbnailWrapper, __assign$1({ active: isTheActiveImage(img), onClick: function () { return handleSelectImage(img); }, ref: function (el) { return (itemsRef.current[i] = el); } }, { children: jsxRuntime.jsx(Thumbnail, { src: img.url, alt: img.alt, width: "81px", loading: "eager" }, void 0) }), img.url)); }) }), void 0));
|
|
22279
22290
|
};
|
|
22280
22291
|
|
|
22281
|
-
var MainGalleryContainer = newStyled.div(templateObject_1$
|
|
22282
|
-
var TopTag = newStyled.div(templateObject_2$
|
|
22283
|
-
var BottomTag = newStyled.div(templateObject_3$
|
|
22284
|
-
var TopRightTag = newStyled.div(templateObject_4$
|
|
22285
|
-
var templateObject_1$
|
|
22292
|
+
var MainGalleryContainer = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
22293
|
+
var TopTag = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n position: absolute;\n overflow: hidden;\n left: 0;\n top: 0;\n div > div {\n margin: 0;\n }\n"], ["\n position: absolute;\n overflow: hidden;\n left: 0;\n top: 0;\n div > div {\n margin: 0;\n }\n"])));
|
|
22294
|
+
var BottomTag = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
22295
|
+
var TopRightTag = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n border-top-right-radius: 8px;\n border-end-start-radius: 8px;\n overflow: hidden;\n right: 0;\n top: 0;\n"])));
|
|
22296
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$5;
|
|
22286
22297
|
|
|
22287
22298
|
var settings = {
|
|
22288
22299
|
dots: false,
|
|
@@ -22336,8 +22347,8 @@ var MainGallery = function (_a) {
|
|
|
22336
22347
|
}) }), void 0) }), void 0));
|
|
22337
22348
|
};
|
|
22338
22349
|
|
|
22339
|
-
var GalleryContainer = newStyled.div(templateObject_1$
|
|
22340
|
-
var templateObject_1$
|
|
22350
|
+
var GalleryContainer = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n margin-left: 15px;\n"], ["\n margin-left: 15px;\n"])));
|
|
22351
|
+
var templateObject_1$6;
|
|
22341
22352
|
|
|
22342
22353
|
var getSelectedColorVariant = function (selectedValue, colorVariants) {
|
|
22343
22354
|
if (!selectedValue) {
|
|
@@ -22361,18 +22372,18 @@ var ProductGalleryMobileV6 = function (_a) {
|
|
|
22361
22372
|
return (jsxRuntime.jsxs(GalleryContainer, __assign$1({ ref: containerRef, "data-testid": "gallery-v6-container" }, { children: [jsxRuntime.jsx(MainGallery, { "data-testid": "gallery-v6-main", contents: mainGalleryImages, containerRef: containerRef, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag }, void 0), jsxRuntime.jsx(ColorVariantGallery, { "data-testid": "gallery-v6-color-variants", images: variantImages, selectedImage: selectedColorVariant, setSelectedImage: setSelectedColorVariant }, void 0)] }), void 0));
|
|
22362
22373
|
};
|
|
22363
22374
|
|
|
22364
|
-
var ScrollContainer = newStyled.div(templateObject_1$
|
|
22365
|
-
var TableElement$1 = newStyled.table(templateObject_2$
|
|
22366
|
-
var TableCell$1 = newStyled.td(templateObject_3$
|
|
22367
|
-
var TableHead$1 = newStyled.th(templateObject_4$
|
|
22368
|
-
var Label$1 = newStyled('div')(templateObject_5$
|
|
22375
|
+
var ScrollContainer = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 80vw;\n overflow-x: auto;\n }\n"], ["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 80vw;\n overflow-x: auto;\n }\n"])));
|
|
22376
|
+
var TableElement$1 = newStyled.table(templateObject_2$5 || (templateObject_2$5 = __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; });
|
|
22377
|
+
var TableCell$1 = newStyled.td(templateObject_3$5 || (templateObject_3$5 = __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; });
|
|
22378
|
+
var TableHead$1 = newStyled.th(templateObject_4$4 || (templateObject_4$4 = __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; });
|
|
22379
|
+
var Label$1 = newStyled('div')(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
22369
22380
|
var TopLabel = newStyled(Label$1)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
22370
22381
|
var LeftLabel = newStyled(Label$1)(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
22371
22382
|
var Container$3 = newStyled('div')(templateObject_8$3 || (templateObject_8$3 = __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"])));
|
|
22372
22383
|
var LabelText = newStyled('span')(templateObject_9$3 || (templateObject_9$3 = __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"])));
|
|
22373
22384
|
var Column$1 = newStyled('div')(templateObject_10$3 || (templateObject_10$3 = __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"])));
|
|
22374
22385
|
var TableRow$1 = newStyled.tr(templateObject_11$2 || (templateObject_11$2 = __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; });
|
|
22375
|
-
var templateObject_1$
|
|
22386
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$4, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$3, templateObject_10$3, templateObject_11$2;
|
|
22376
22387
|
|
|
22377
22388
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
22378
22389
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -22412,23 +22423,23 @@ var SizeChartTableV2 = function (_a) {
|
|
|
22412
22423
|
}, 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$1, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0) }, void 0)] }, void 0)] }, void 0));
|
|
22413
22424
|
};
|
|
22414
22425
|
|
|
22415
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
22416
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
22417
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
22418
|
-
var Label = newStyled('div')(templateObject_4$
|
|
22419
|
-
newStyled(Label)(templateObject_5$
|
|
22426
|
+
var TableElement = newStyled.table(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
22427
|
+
var TableCell = newStyled.td(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
22428
|
+
var TableHead = newStyled.th(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
22429
|
+
var Label = newStyled('div')(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
22430
|
+
newStyled(Label)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
22420
22431
|
newStyled(Label)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
22421
22432
|
var Container$2 = newStyled('div')(templateObject_7$2 || (templateObject_7$2 = __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"])));
|
|
22422
22433
|
newStyled('span')(templateObject_8$2 || (templateObject_8$2 = __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"])));
|
|
22423
22434
|
var Column = newStyled('div')(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
22424
22435
|
var TableRow = newStyled.tr(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
22425
|
-
var Header = newStyled('div')(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"], ["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"])));
|
|
22426
|
-
var Parent = newStyled('div')(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"])));
|
|
22436
|
+
var Header$1 = newStyled('div')(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"], ["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"])));
|
|
22437
|
+
var Parent$1 = newStyled('div')(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"])));
|
|
22427
22438
|
var Arrow = newStyled('div')(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"])));
|
|
22428
22439
|
var TableHeader = newStyled('thead')(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
22429
22440
|
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
22430
22441
|
});
|
|
22431
|
-
var templateObject_1$
|
|
22442
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$2, templateObject_7$2, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14;
|
|
22432
22443
|
|
|
22433
22444
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
22434
22445
|
// TODO: Refactor this color logic
|
|
@@ -22501,7 +22512,7 @@ var SizeChartTableV3 = function (_a) {
|
|
|
22501
22512
|
value: cell,
|
|
22502
22513
|
}); });
|
|
22503
22514
|
});
|
|
22504
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Parent, __assign$1({ ref: containerRef }, { children: jsxRuntime.jsx(Container$2, { children: jsxRuntime.jsxs(Column, { children: [isMultilabel && (jsxRuntime.jsxs(Header, { children: [jsxRuntime.jsx("div", { children: trimmedYLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(TableElement, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsxRuntime.jsx(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsxRuntime.jsx(TableRow, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ isSticky: !!newSizeTableCss && index === 0 }, { children: index === 0 && isMultilabel ? (jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex', alignItems: 'center', gap: '15px' } }, { children: [jsxRuntime.jsx("div", { children: trimmedXLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronDownVariant, {}, void 0)] }), void 0)) : (header) }), header)); }) }, void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
22515
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Parent$1, __assign$1({ ref: containerRef }, { children: jsxRuntime.jsx(Container$2, { children: jsxRuntime.jsxs(Column, { children: [isMultilabel && (jsxRuntime.jsxs(Header$1, { children: [jsxRuntime.jsx("div", { children: trimmedYLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(TableElement, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsxRuntime.jsx(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsxRuntime.jsx(TableRow, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ isSticky: !!newSizeTableCss && index === 0 }, { children: index === 0 && isMultilabel ? (jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex', alignItems: 'center', gap: '15px' } }, { children: [jsxRuntime.jsx("div", { children: trimmedXLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronDownVariant, {}, void 0)] }), void 0)) : (header) }), header)); }) }, void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
22505
22516
|
backgroundColor: getCellColor(index, cell.value, true),
|
|
22506
22517
|
} }, { children: cell.value }), cell.id)); }) }, row[0].id)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: getIsOdd(parentIndex) ? 'background' : '' }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell) { return (jsxRuntime.jsx(TableCell, __assign$1({ isSticky: false }, { children: cell.value }), cell.id)); }) }), row[0].id)); }) }, void 0))] }), void 0)] }, void 0) }, void 0) }), void 0), newSizeTableCss && isMobile && jsxRuntime.jsx(ArrowTip, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
22507
22518
|
};
|
|
@@ -22513,6 +22524,71 @@ var ArrowTip = function (_a) {
|
|
|
22513
22524
|
};
|
|
22514
22525
|
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
22515
22526
|
|
|
22527
|
+
var Parent = newStyled('div')(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n max-width: 100%;\n position: relative;\n overflow-x: auto;\n width: 850px;\n &::-webkit-scrollbar {\n display: none;\n }\n @media (max-width: 768px) {\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100%;\n position: relative;\n overflow-x: auto;\n width: 850px;\n &::-webkit-scrollbar {\n display: none;\n }\n @media (max-width: 768px) {\n -ms-overflow-style: none;\n }\n"])));
|
|
22528
|
+
var Header = newStyled.td(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n background: #f7ece4;\n padding: 12px 44px;\n width: 100%;\n text-align: left;\n border-radius: ", ";\n border: ", ";\n"], ["\n background: #f7ece4;\n padding: 12px 44px;\n width: 100%;\n text-align: left;\n border-radius: ", ";\n border: ", ";\n"])), function (props) { return (props.index === 0 ? '8px 8px 0 0' : 0); }, function (props) { return (props.index === 0 ? '0' : '0.5px solid #BBBBBB'); });
|
|
22529
|
+
var TableContainer = newStyled.tbody(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n width: fit-content;\n border-collapse: collapse;\n"], ["\n width: fit-content;\n border-collapse: collapse;\n"])));
|
|
22530
|
+
var Cell = newStyled.td(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n text-align: center;\n padding: 20px;\n border: 0.5px solid #bbbbbb;\n background-color: ", ";\n white-space: nowrap;\n font-weight: 600;\n font-size: 14px;\n width: 85px;\n max-width: 85px;\n box-sizing: border-box;\n ", "\n"], ["\n text-align: center;\n padding: 20px;\n border: 0.5px solid #bbbbbb;\n background-color: ", ";\n white-space: nowrap;\n font-weight: 600;\n font-size: 14px;\n width: 85px;\n max-width: 85px;\n box-sizing: border-box;\n ", "\n"])), function (props) { return props.background; }, function (props) {
|
|
22531
|
+
return props.isSticky &&
|
|
22532
|
+
"\n position: sticky;\n z-index: 3;\n left:0;\n ";
|
|
22533
|
+
});
|
|
22534
|
+
var SharedRowCell = newStyled(Cell)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n padding: 0 6px;\n p {\n text-align: center;\n font-weight: 600;\n font-size: 14px;\n }\n"], ["\n padding: 0 6px;\n p {\n text-align: center;\n font-weight: 600;\n font-size: 14px;\n }\n"])));
|
|
22535
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$2, templateObject_5$2;
|
|
22536
|
+
|
|
22537
|
+
var BACKGROUND_COLORS = [
|
|
22538
|
+
'#FAFAFA',
|
|
22539
|
+
'#EDF6FC',
|
|
22540
|
+
'#FBDFDA',
|
|
22541
|
+
'#FFE6C2',
|
|
22542
|
+
'#F5DAFC',
|
|
22543
|
+
'#F9DFDC',
|
|
22544
|
+
'#E4F1EA',
|
|
22545
|
+
'#EDF6FC',
|
|
22546
|
+
'#F5E9E0',
|
|
22547
|
+
'#FFE6C2',
|
|
22548
|
+
];
|
|
22549
|
+
function getCellBackground(index, data, rowLength, theme) {
|
|
22550
|
+
if (!data) {
|
|
22551
|
+
return theme.colors.shades['white'].color;
|
|
22552
|
+
}
|
|
22553
|
+
var isSharedFirstCell = rowLength < 10;
|
|
22554
|
+
return (BACKGROUND_COLORS[isSharedFirstCell ? index + 1 : index] || theme.colors.shades['white'].color);
|
|
22555
|
+
}
|
|
22556
|
+
function getCellIsSticky(index, rowLength) {
|
|
22557
|
+
return index === 0 && rowLength === 10;
|
|
22558
|
+
}
|
|
22559
|
+
var isDataCell = function (cell) {
|
|
22560
|
+
return typeof cell === 'object' && cell !== null && 'content' in cell;
|
|
22561
|
+
};
|
|
22562
|
+
function parseCellContent(content) {
|
|
22563
|
+
var cellContentChunks = content.split(/ (=) /);
|
|
22564
|
+
return (jsxRuntime.jsx(React$2.Fragment, { children: cellContentChunks.map(function (data, i) { return (jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", style: i === cellContentChunks.length - 1 ? {} : { marginBottom: '5px' } }, { children: data }), "shared-cell-text-".concat(data, "-").concat(i))); }) }, void 0));
|
|
22565
|
+
}
|
|
22566
|
+
|
|
22567
|
+
var SCROLL_END_THRESHOLD = 0.92;
|
|
22568
|
+
var SizeChartTableV4 = function (_a) {
|
|
22569
|
+
var data = _a.data;
|
|
22570
|
+
var theme = useTheme();
|
|
22571
|
+
var containerRef = React$2.useRef(null);
|
|
22572
|
+
var _b = React$2.useState(false), isAtScrollEnd = _b[0], setIsAtScrollEnd = _b[1];
|
|
22573
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
22574
|
+
React$2.useEffect(function () {
|
|
22575
|
+
var handleScroll = function () {
|
|
22576
|
+
var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
22577
|
+
var maxScroll = scrollWidth - clientWidth;
|
|
22578
|
+
var isAtEnd = scrollLeft >= maxScroll * SCROLL_END_THRESHOLD;
|
|
22579
|
+
setIsAtScrollEnd(isAtEnd);
|
|
22580
|
+
};
|
|
22581
|
+
var container = containerRef.current;
|
|
22582
|
+
container === null || container === void 0 ? void 0 : container.addEventListener('scroll', handleScroll);
|
|
22583
|
+
return function () {
|
|
22584
|
+
container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleScroll);
|
|
22585
|
+
};
|
|
22586
|
+
}, []);
|
|
22587
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Parent, __assign$1({ ref: containerRef }, { children: data.map(function (table, index) { return (jsxRuntime.jsxs(TableContainer, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx(Header, __assign$1({ index: index, colSpan: 10 }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: table.header }), void 0) }), void 0) }, void 0) }, void 0), jsxRuntime.jsx("tbody", { children: table.data.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", { children: row.map(function (cell, cellIndex) {
|
|
22588
|
+
return isDataCell(cell) ? (jsxRuntime.jsx(SharedRowCell, __assign$1({ rowSpan: cell.rowSpan, background: getCellBackground(cellIndex, cell.content, row.length, theme), isSticky: getCellIsSticky(cellIndex, row.length) }, { children: parseCellContent(cell.content) }), "cell-".concat(index, "-").concat(rowIndex, "-").concat(cellIndex))) : (jsxRuntime.jsx(Cell, __assign$1({ background: getCellBackground(cellIndex, cell, row.length, theme), isSticky: getCellIsSticky(cellIndex, row.length) }, { children: cell }), "cell-".concat(index, "-").concat(rowIndex, "-").concat(cellIndex)));
|
|
22589
|
+
}) }, "row-".concat(index, "-").concat(rowIndex))); }) }, void 0)] }, "table-container-".concat(index))); }) }), void 0), isMobile && jsxRuntime.jsx(ArrowTip$1, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
22590
|
+
};
|
|
22591
|
+
|
|
22516
22592
|
var FlexContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
22517
22593
|
var theme = _a.theme;
|
|
22518
22594
|
return theme.name === 'TheSpaDr' &&
|
|
@@ -22725,6 +22801,7 @@ exports.AbsorbencyLevel = AbsorbencyLevel;
|
|
|
22725
22801
|
exports.Accordion = Accordion$1;
|
|
22726
22802
|
exports.AccordionOptions = AccordionOptions;
|
|
22727
22803
|
exports.AmazonButton = AmazonButton;
|
|
22804
|
+
exports.ArrowTip = ArrowTip$1;
|
|
22728
22805
|
exports.AssetsProvider = AssetsProvider;
|
|
22729
22806
|
exports.Autoship = Autoship;
|
|
22730
22807
|
exports.AutoshipFrequencyDropdown = AutoshipFrequencyDropdown;
|
|
@@ -22833,6 +22910,7 @@ exports.SingleColorPicker = SingleColorPicker;
|
|
|
22833
22910
|
exports.SizeChartTable = SizeChartTable;
|
|
22834
22911
|
exports.SizeChartTableV2 = SizeChartTableV2;
|
|
22835
22912
|
exports.SizeChartTableV3 = SizeChartTableV3;
|
|
22913
|
+
exports.SizeChartTableV4 = SizeChartTableV4;
|
|
22836
22914
|
exports.SizeDropdown = SizeDropdown;
|
|
22837
22915
|
exports.SizeFitGuide = SizeFitGuide;
|
|
22838
22916
|
exports.SizeSelector = SizeSelector;
|