@trafilea/afrodita-components 6.24.0 → 6.25.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 +12 -1
- package/build/index.esm.js +550 -507
- package/build/index.esm.js.map +1 -1
- package/build/index.js +551 -507
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3153,7 +3153,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3153
3153
|
desktop: 1280,
|
|
3154
3154
|
};
|
|
3155
3155
|
|
|
3156
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
3156
|
+
var Container$1j = newStyled.div(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3157
3157
|
var height = _a.height;
|
|
3158
3158
|
return (height ? height : '1.5em');
|
|
3159
3159
|
}, function (_a) {
|
|
@@ -3180,9 +3180,9 @@ var SkeletonBox = function (_a) {
|
|
|
3180
3180
|
var theme = useTheme();
|
|
3181
3181
|
return jsxRuntime.jsx(Container$1j, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3182
3182
|
};
|
|
3183
|
-
var templateObject_1$
|
|
3183
|
+
var templateObject_1$29;
|
|
3184
3184
|
|
|
3185
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3185
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3186
3186
|
var width = _a.width;
|
|
3187
3187
|
return width;
|
|
3188
3188
|
}, function (_a) {
|
|
@@ -3198,7 +3198,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$26 || (templateObject_1$26
|
|
|
3198
3198
|
var opacity = _a.opacity;
|
|
3199
3199
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3200
3200
|
});
|
|
3201
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3201
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1u || (templateObject_2$1u = __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) {
|
|
3202
3202
|
var width = _a.width;
|
|
3203
3203
|
return width;
|
|
3204
3204
|
}, function (_a) {
|
|
@@ -3211,7 +3211,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1s || (templateObject_2$
|
|
|
3211
3211
|
var opacity = _a.opacity;
|
|
3212
3212
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3213
3213
|
});
|
|
3214
|
-
var templateObject_1$
|
|
3214
|
+
var templateObject_1$28, templateObject_2$1u;
|
|
3215
3215
|
|
|
3216
3216
|
/* eslint-disable no-undef */
|
|
3217
3217
|
var cache = new Map();
|
|
@@ -3387,7 +3387,7 @@ var buildImageUrl = function (_a) {
|
|
|
3387
3387
|
}
|
|
3388
3388
|
};
|
|
3389
3389
|
|
|
3390
|
-
var Img = newStyled.img(templateObject_1$
|
|
3390
|
+
var Img = newStyled.img(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3391
3391
|
var Image$3 = function (_a) {
|
|
3392
3392
|
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, 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", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3393
3393
|
var config = useTheme().config;
|
|
@@ -3396,7 +3396,7 @@ var Image$3 = function (_a) {
|
|
|
3396
3396
|
: src;
|
|
3397
3397
|
return (jsxRuntime.jsx(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3398
3398
|
};
|
|
3399
|
-
var templateObject_1$
|
|
3399
|
+
var templateObject_1$27;
|
|
3400
3400
|
|
|
3401
3401
|
exports.CardSectionType = void 0;
|
|
3402
3402
|
(function (CardSectionType) {
|
|
@@ -3452,7 +3452,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3452
3452
|
};
|
|
3453
3453
|
}
|
|
3454
3454
|
};
|
|
3455
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
3455
|
+
var Container$1i = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __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) {
|
|
3456
3456
|
var backgroundColor = _a.backgroundColor;
|
|
3457
3457
|
return backgroundColor;
|
|
3458
3458
|
}, function (_a) {
|
|
@@ -3474,7 +3474,7 @@ var Container$1i = newStyled.div(templateObject_1$24 || (templateObject_1$24 = _
|
|
|
3474
3474
|
var size = _a.size;
|
|
3475
3475
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3476
3476
|
});
|
|
3477
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3477
|
+
var H3$3 = newStyled.h3(templateObject_2$1t || (templateObject_2$1t = __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) {
|
|
3478
3478
|
var textColor = _a.textColor;
|
|
3479
3479
|
return textColor;
|
|
3480
3480
|
}, function (_a) {
|
|
@@ -3491,7 +3491,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3491
3491
|
var theme = useTheme();
|
|
3492
3492
|
return (jsxRuntime.jsx(Container$1i, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3493
3493
|
};
|
|
3494
|
-
var templateObject_1$
|
|
3494
|
+
var templateObject_1$26, templateObject_2$1t;
|
|
3495
3495
|
|
|
3496
3496
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3497
3497
|
var _a, _b, _c;
|
|
@@ -3522,7 +3522,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3522
3522
|
};
|
|
3523
3523
|
}
|
|
3524
3524
|
};
|
|
3525
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
3525
|
+
var Container$1h = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __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) {
|
|
3526
3526
|
var backgroundColor = _a.backgroundColor;
|
|
3527
3527
|
return backgroundColor;
|
|
3528
3528
|
}, function (_a) {
|
|
@@ -3544,7 +3544,7 @@ var Container$1h = newStyled.div(templateObject_1$23 || (templateObject_1$23 = _
|
|
|
3544
3544
|
var size = _a.size;
|
|
3545
3545
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3546
3546
|
});
|
|
3547
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3547
|
+
var H3$2 = newStyled.h3(templateObject_2$1s || (templateObject_2$1s = __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) {
|
|
3548
3548
|
var textColor = _a.textColor;
|
|
3549
3549
|
return textColor;
|
|
3550
3550
|
}, function (_a) {
|
|
@@ -3561,7 +3561,7 @@ var DiscountTag$2 = function (_a) {
|
|
|
3561
3561
|
var theme = useTheme();
|
|
3562
3562
|
return (jsxRuntime.jsx(Container$1h, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3563
3563
|
};
|
|
3564
|
-
var templateObject_1$
|
|
3564
|
+
var templateObject_1$25, templateObject_2$1s;
|
|
3565
3565
|
|
|
3566
3566
|
function getWindowDimensions() {
|
|
3567
3567
|
if (typeof window === 'undefined')
|
|
@@ -3656,8 +3656,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3656
3656
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3657
3657
|
}
|
|
3658
3658
|
};
|
|
3659
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
3660
|
-
var Price = newStyled.p(templateObject_2$
|
|
3659
|
+
var Container$1g = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3660
|
+
var Price = newStyled.p(templateObject_2$1r || (templateObject_2$1r = __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) {
|
|
3661
3661
|
var weight = _a.weight;
|
|
3662
3662
|
return (weight ? weight : '400');
|
|
3663
3663
|
}, function (_a) {
|
|
@@ -3681,7 +3681,7 @@ var Price = newStyled.p(templateObject_2$1p || (templateObject_2$1p = __makeTemp
|
|
|
3681
3681
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3682
3682
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
3683
3683
|
});
|
|
3684
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3684
|
+
var TagContainer = newStyled.div(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3685
3685
|
var _b;
|
|
3686
3686
|
var size = _a.size;
|
|
3687
3687
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3714,9 +3714,9 @@ var PriceLabel$1 = function (_a) {
|
|
|
3714
3714
|
};
|
|
3715
3715
|
return (jsxRuntime.jsxs(Container$1g, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3716
3716
|
};
|
|
3717
|
-
var templateObject_1$
|
|
3717
|
+
var templateObject_1$24, templateObject_2$1r, templateObject_3$18;
|
|
3718
3718
|
|
|
3719
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3719
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3720
3720
|
var PriceLabelV2$1 = function (_a) {
|
|
3721
3721
|
var _b;
|
|
3722
3722
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3787,11 +3787,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3787
3787
|
lineHeight: '22px',
|
|
3788
3788
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3789
3789
|
};
|
|
3790
|
-
var templateObject_1$
|
|
3790
|
+
var templateObject_1$23;
|
|
3791
3791
|
|
|
3792
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3793
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3794
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3792
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3793
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3794
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3795
3795
|
var PriceLabelV3 = function (_a) {
|
|
3796
3796
|
var _b;
|
|
3797
3797
|
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"]);
|
|
@@ -3862,9 +3862,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3862
3862
|
lineHeight: '22px',
|
|
3863
3863
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3864
3864
|
};
|
|
3865
|
-
var templateObject_1$
|
|
3865
|
+
var templateObject_1$22, templateObject_2$1q, templateObject_3$17;
|
|
3866
3866
|
|
|
3867
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3867
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$21 || (templateObject_1$21 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3868
3868
|
var PriceLabel = function (_a) {
|
|
3869
3869
|
var _b;
|
|
3870
3870
|
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, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
@@ -3898,9 +3898,9 @@ var PriceLabel = function (_a) {
|
|
|
3898
3898
|
marginTop: '-6px',
|
|
3899
3899
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3900
3900
|
};
|
|
3901
|
-
var templateObject_1$
|
|
3901
|
+
var templateObject_1$21;
|
|
3902
3902
|
|
|
3903
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3903
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3904
3904
|
var PriceLabelV2 = function (_a) {
|
|
3905
3905
|
var _b;
|
|
3906
3906
|
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, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
@@ -3933,7 +3933,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
3933
3933
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3934
3934
|
return (jsxRuntime.jsxs(Container$1g, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3935
3935
|
};
|
|
3936
|
-
var templateObject_1$
|
|
3936
|
+
var templateObject_1$20;
|
|
3937
3937
|
|
|
3938
3938
|
var Add = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3939
3939
|
|
|
@@ -4757,11 +4757,11 @@ function jsxs(type, props, key) {
|
|
|
4757
4757
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4758
4758
|
// `variants` styles that are consistent through all themes.
|
|
4759
4759
|
var TAGS = {
|
|
4760
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4761
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4762
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4763
|
-
display1: newStyled.h1(templateObject_4$
|
|
4764
|
-
display2: newStyled.h2(templateObject_5$
|
|
4760
|
+
hero1: newStyled.h1(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject([""], [""]))),
|
|
4761
|
+
hero2: newStyled.h2(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject([""], [""]))),
|
|
4762
|
+
hero3: newStyled.h3(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject([""], [""]))),
|
|
4763
|
+
display1: newStyled.h1(templateObject_4$T || (templateObject_4$T = __makeTemplateObject([""], [""]))),
|
|
4764
|
+
display2: newStyled.h2(templateObject_5$E || (templateObject_5$E = __makeTemplateObject([""], [""]))),
|
|
4765
4765
|
display3: newStyled.h3(templateObject_6$y || (templateObject_6$y = __makeTemplateObject([""], [""]))),
|
|
4766
4766
|
heading1: newStyled.h1(templateObject_7$p || (templateObject_7$p = __makeTemplateObject([""], [""]))),
|
|
4767
4767
|
heading2: newStyled.h2(templateObject_8$k || (templateObject_8$k = __makeTemplateObject([""], [""]))),
|
|
@@ -4893,13 +4893,13 @@ var DEFAULTS = {
|
|
|
4893
4893
|
size: 'regular',
|
|
4894
4894
|
},
|
|
4895
4895
|
};
|
|
4896
|
-
var templateObject_1$
|
|
4896
|
+
var templateObject_1$1$, templateObject_2$1p, templateObject_3$16, templateObject_4$T, templateObject_5$E, templateObject_6$y, templateObject_7$p, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4897
4897
|
|
|
4898
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
4899
|
-
var Card$
|
|
4900
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4901
|
-
var Label$6 = newStyled.div(templateObject_4$
|
|
4902
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4898
|
+
var Container$1f = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __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"])));
|
|
4899
|
+
var Card$4 = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __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"])));
|
|
4900
|
+
var Tag$2 = newStyled.div(templateObject_3$15 || (templateObject_3$15 = __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"])));
|
|
4901
|
+
var Label$6 = newStyled.div(templateObject_4$S || (templateObject_4$S = __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"])));
|
|
4902
|
+
var Check$1 = newStyled.div(templateObject_5$D || (templateObject_5$D = __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"])));
|
|
4903
4903
|
var DiscountContainer$1 = newStyled.div(templateObject_6$x || (templateObject_6$x = __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"])));
|
|
4904
4904
|
var PackSelectorV2 = function (_a) {
|
|
4905
4905
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -4917,7 +4917,7 @@ var PackCard$1 = function (_a) {
|
|
|
4917
4917
|
.then(function (icon) { return setIcon(icon); })
|
|
4918
4918
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4919
4919
|
}, [pack.meta.icon]);
|
|
4920
|
-
return (jsxRuntime.jsxs(Card$
|
|
4920
|
+
return (jsxRuntime.jsxs(Card$4, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$6, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsxRuntime.jsx(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(DiscountContainer$1, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
4921
4921
|
locale: 'en-US',
|
|
4922
4922
|
currency: currencyCode || 'USD',
|
|
4923
4923
|
}) }), void 0), pack.meta.quantity > 1 ? (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
@@ -4925,27 +4925,27 @@ var PackCard$1 = function (_a) {
|
|
|
4925
4925
|
currency: currencyCode || 'USD',
|
|
4926
4926
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4927
4927
|
};
|
|
4928
|
-
var templateObject_1$
|
|
4928
|
+
var templateObject_1$1_, templateObject_2$1o, templateObject_3$15, templateObject_4$S, templateObject_5$D, templateObject_6$x;
|
|
4929
4929
|
|
|
4930
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
4931
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4930
|
+
var Container$1e = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4931
|
+
var DropContainer = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4932
4932
|
var DropList = function (_a) {
|
|
4933
4933
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4934
4934
|
return (jsxRuntime.jsx(Container$1e, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4935
4935
|
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));
|
|
4936
4936
|
}) }, void 0));
|
|
4937
4937
|
};
|
|
4938
|
-
var templateObject_1$
|
|
4938
|
+
var templateObject_1$1Z, templateObject_2$1n;
|
|
4939
4939
|
|
|
4940
4940
|
var DROPS_TOTAL = 5;
|
|
4941
|
-
var Container$1d = newStyled.div(templateObject_1$
|
|
4942
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4943
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4941
|
+
var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4942
|
+
var Title$b = newStyled.p(templateObject_2$1m || (templateObject_2$1m = __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"])));
|
|
4943
|
+
var Description$3 = newStyled.p(templateObject_3$14 || (templateObject_3$14 = __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"])));
|
|
4944
4944
|
var AbsorbencyLevel = function (_a) {
|
|
4945
4945
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4946
4946
|
return (jsxRuntime.jsxs(Container$1d, { 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));
|
|
4947
4947
|
};
|
|
4948
|
-
var templateObject_1$
|
|
4948
|
+
var templateObject_1$1Y, templateObject_2$1m, templateObject_3$14;
|
|
4949
4949
|
|
|
4950
4950
|
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(`
|
|
4951
4951
|
`),"","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(`
|
|
@@ -5021,7 +5021,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5021
5021
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5022
5022
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5023
5023
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5024
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5024
|
+
var StyledContent$1 = newStyled.button(templateObject_1$1X || (templateObject_1$1X = __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"])));
|
|
5025
5025
|
var Accordion$1 = function (_a) {
|
|
5026
5026
|
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;
|
|
5027
5027
|
var theme = useTheme();
|
|
@@ -5045,9 +5045,9 @@ var Accordion$1 = function (_a) {
|
|
|
5045
5045
|
} }, { 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));
|
|
5046
5046
|
} }), void 0));
|
|
5047
5047
|
};
|
|
5048
|
-
var templateObject_1$
|
|
5048
|
+
var templateObject_1$1X;
|
|
5049
5049
|
|
|
5050
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
5050
|
+
var Container$1c = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5051
5051
|
var AccordionOptions = function (_a) {
|
|
5052
5052
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5053
5053
|
var _b = React$2.useState({
|
|
@@ -5071,7 +5071,7 @@ var AccordionOptions = function (_a) {
|
|
|
5071
5071
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5072
5072
|
}) }, void 0));
|
|
5073
5073
|
};
|
|
5074
|
-
var templateObject_1$
|
|
5074
|
+
var templateObject_1$1W;
|
|
5075
5075
|
|
|
5076
5076
|
/**
|
|
5077
5077
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5207,22 +5207,22 @@ var isValidDate = function (value) {
|
|
|
5207
5207
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5208
5208
|
};
|
|
5209
5209
|
|
|
5210
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5211
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5212
|
-
var templateObject_1$
|
|
5210
|
+
var Bold = newStyled.span(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5211
|
+
var FlexContainer$3 = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __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"])));
|
|
5212
|
+
var templateObject_1$1V, templateObject_2$1l;
|
|
5213
5213
|
|
|
5214
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
5214
|
+
var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __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) {
|
|
5215
5215
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5216
5216
|
return width;
|
|
5217
5217
|
}, function (_a) {
|
|
5218
5218
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5219
5219
|
return height;
|
|
5220
5220
|
});
|
|
5221
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5222
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5223
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5224
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5225
|
-
var templateObject_1$
|
|
5221
|
+
var FlexCentered = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __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"])));
|
|
5222
|
+
var LeftSide = newStyled.div(templateObject_3$13 || (templateObject_3$13 = __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"])));
|
|
5223
|
+
var RightSide = newStyled.div(templateObject_4$R || (templateObject_4$R = __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"])));
|
|
5224
|
+
var FlexStart = newStyled.div(templateObject_5$C || (templateObject_5$C = __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"])));
|
|
5225
|
+
var templateObject_1$1U, templateObject_2$1k, templateObject_3$13, templateObject_4$R, templateObject_5$C;
|
|
5226
5226
|
|
|
5227
5227
|
var CouponCard = function (_a) {
|
|
5228
5228
|
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;
|
|
@@ -5278,14 +5278,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5278
5278
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5279
5279
|
};
|
|
5280
5280
|
|
|
5281
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5282
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5281
|
+
var ErrorText = newStyled.h3(templateObject_1$1T || (templateObject_1$1T = __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; });
|
|
5282
|
+
var ErrorContainer = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __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"])));
|
|
5283
5283
|
var Error$1 = function (_a) {
|
|
5284
5284
|
var error = _a.error;
|
|
5285
5285
|
var theme = useTheme();
|
|
5286
5286
|
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));
|
|
5287
5287
|
};
|
|
5288
|
-
var templateObject_1$
|
|
5288
|
+
var templateObject_1$1T, templateObject_2$1j;
|
|
5289
5289
|
|
|
5290
5290
|
var BaseSelectButton = function (_a) {
|
|
5291
5291
|
var children = _a.children, as = _a.as;
|
|
@@ -5302,7 +5302,7 @@ function BaseSelectOption(_a) {
|
|
|
5302
5302
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5303
5303
|
}
|
|
5304
5304
|
|
|
5305
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5305
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5306
5306
|
function BaseSelect(_a) {
|
|
5307
5307
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5308
5308
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5312,7 +5312,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5312
5312
|
Options: BaseSelectOptions,
|
|
5313
5313
|
Option: BaseSelectOption,
|
|
5314
5314
|
});
|
|
5315
|
-
var templateObject_1$
|
|
5315
|
+
var templateObject_1$1S;
|
|
5316
5316
|
|
|
5317
5317
|
var CustomButton = newStyled.button(function (_a) {
|
|
5318
5318
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5351,7 +5351,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5351
5351
|
});
|
|
5352
5352
|
});
|
|
5353
5353
|
// TODO Remove this when we find the real solution
|
|
5354
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5354
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5355
5355
|
var open = _a.open;
|
|
5356
5356
|
return open &&
|
|
5357
5357
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5371,7 +5371,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5371
5371
|
} }), void 0));
|
|
5372
5372
|
};
|
|
5373
5373
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5374
|
-
var templateObject_1$
|
|
5374
|
+
var templateObject_1$1R;
|
|
5375
5375
|
|
|
5376
5376
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5377
5377
|
var theme = _a.theme;
|
|
@@ -5538,7 +5538,7 @@ var CustomCheckboxStyles = {
|
|
|
5538
5538
|
},
|
|
5539
5539
|
};
|
|
5540
5540
|
|
|
5541
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
5541
|
+
var Container$1a = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __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"])));
|
|
5542
5542
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5543
5543
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5544
5544
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5549,7 +5549,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5549
5549
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5550
5550
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5551
5551
|
]; });
|
|
5552
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5552
|
+
var Input$5 = newStyled.input(templateObject_2$1i || (templateObject_2$1i = __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) {
|
|
5553
5553
|
var disabled = _a.disabled;
|
|
5554
5554
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5555
5555
|
});
|
|
@@ -5565,7 +5565,7 @@ var Checkbox = function (_a) {
|
|
|
5565
5565
|
};
|
|
5566
5566
|
return (jsxRuntime.jsxs(Container$1a, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$5, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5567
5567
|
};
|
|
5568
|
-
var templateObject_1$
|
|
5568
|
+
var templateObject_1$1Q, templateObject_2$1i;
|
|
5569
5569
|
|
|
5570
5570
|
var CustomOption = newStyled.li(function (_a) {
|
|
5571
5571
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5614,9 +5614,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5614
5614
|
Option: BaseDropdownOption,
|
|
5615
5615
|
});
|
|
5616
5616
|
|
|
5617
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
5618
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5619
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5617
|
+
var Container$19 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject([""], [""])));
|
|
5618
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1h || (templateObject_2$1h = __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"])));
|
|
5619
|
+
var SelectedOption = newStyled.span(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5620
5620
|
var fontWeight = _a.fontWeight;
|
|
5621
5621
|
return fontWeight || '';
|
|
5622
5622
|
});
|
|
@@ -5651,7 +5651,7 @@ function SimpleDropdown(_a) {
|
|
|
5651
5651
|
var DropdownContainer = showRequiredPlaceholder ? Container$19 : React$2.Fragment;
|
|
5652
5652
|
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));
|
|
5653
5653
|
}
|
|
5654
|
-
var templateObject_1$
|
|
5654
|
+
var templateObject_1$1P, templateObject_2$1h, templateObject_3$12;
|
|
5655
5655
|
|
|
5656
5656
|
/* base styles & size variants */
|
|
5657
5657
|
var CustomRadioStyles$2 = {
|
|
@@ -5716,9 +5716,9 @@ var ContainerStyles$2 = {
|
|
|
5716
5716
|
},
|
|
5717
5717
|
};
|
|
5718
5718
|
|
|
5719
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5719
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5720
5720
|
var Container$18 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5721
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5721
|
+
var Input$4 = newStyled.input(templateObject_2$1g || (templateObject_2$1g = __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) {
|
|
5722
5722
|
var disabled = _a.disabled;
|
|
5723
5723
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5724
5724
|
});
|
|
@@ -5726,14 +5726,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5726
5726
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5727
5727
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5728
5728
|
]; });
|
|
5729
|
-
var StyledLabel$3 = newStyled(Label$5)(templateObject_3
|
|
5729
|
+
var StyledLabel$3 = newStyled(Label$5)(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5730
5730
|
var theme = _a.theme;
|
|
5731
5731
|
return theme.component.radio.textSize;
|
|
5732
5732
|
}, function (_a) {
|
|
5733
5733
|
var theme = _a.theme;
|
|
5734
5734
|
return theme.component.radio.lineHeight;
|
|
5735
5735
|
});
|
|
5736
|
-
var StyledLabelV2 = newStyled(Label$5)(templateObject_4$
|
|
5736
|
+
var StyledLabelV2 = newStyled(Label$5)(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"])), function (_a) {
|
|
5737
5737
|
var theme = _a.theme;
|
|
5738
5738
|
return theme.component.radio.textSize;
|
|
5739
5739
|
}, function (_a) {
|
|
@@ -5749,7 +5749,7 @@ var RadioInput = function (_a) {
|
|
|
5749
5749
|
};
|
|
5750
5750
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$18, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsx(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: label }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5751
5751
|
};
|
|
5752
|
-
var templateObject_1$
|
|
5752
|
+
var templateObject_1$1O, templateObject_2$1g, templateObject_3$11, templateObject_4$Q;
|
|
5753
5753
|
|
|
5754
5754
|
var useOnClickOutside = function (ref, handler) {
|
|
5755
5755
|
React$2.useEffect(function () {
|
|
@@ -5842,7 +5842,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5842
5842
|
}
|
|
5843
5843
|
};
|
|
5844
5844
|
|
|
5845
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5845
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __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) {
|
|
5846
5846
|
var position = _a.position;
|
|
5847
5847
|
return getWrapperFlexDirection(position);
|
|
5848
5848
|
}, function (_a) {
|
|
@@ -5852,7 +5852,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __ma
|
|
|
5852
5852
|
var disableHover = _a.disableHover;
|
|
5853
5853
|
return (disableHover ? 0 : 1);
|
|
5854
5854
|
});
|
|
5855
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5855
|
+
var TooltipContainer = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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) {
|
|
5856
5856
|
var position = _a.position;
|
|
5857
5857
|
return getContainerFlexDirection(position);
|
|
5858
5858
|
}, function (_a) {
|
|
@@ -5880,14 +5880,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1d || (templateObject_2$1d
|
|
|
5880
5880
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5881
5881
|
return actual === expected ? margin : '0';
|
|
5882
5882
|
};
|
|
5883
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5883
|
+
var ContentWrapper = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __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) {
|
|
5884
5884
|
var borderColor = _a.borderColor;
|
|
5885
5885
|
return borderColor;
|
|
5886
5886
|
}, function (_a) {
|
|
5887
5887
|
var backgroundColor = _a.backgroundColor;
|
|
5888
5888
|
return backgroundColor;
|
|
5889
5889
|
});
|
|
5890
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5890
|
+
var TooltipText = newStyled.div(templateObject_4$P || (templateObject_4$P = __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) {
|
|
5891
5891
|
var theme = _a.theme;
|
|
5892
5892
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5893
5893
|
}, function (_a) {
|
|
@@ -5897,7 +5897,7 @@ var TooltipText = newStyled.div(templateObject_4$O || (templateObject_4$O = __ma
|
|
|
5897
5897
|
var color = _a.color;
|
|
5898
5898
|
return color;
|
|
5899
5899
|
});
|
|
5900
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5900
|
+
var TopSection = newStyled.div(templateObject_5$B || (templateObject_5$B = __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"])));
|
|
5901
5901
|
var Title$a = newStyled.h1(templateObject_6$w || (templateObject_6$w = __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) {
|
|
5902
5902
|
var color = _a.color;
|
|
5903
5903
|
return color;
|
|
@@ -5907,7 +5907,7 @@ var CloseToolTip = newStyled.button(templateObject_8$j || (templateObject_8$j =
|
|
|
5907
5907
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5908
5908
|
return right;
|
|
5909
5909
|
});
|
|
5910
|
-
var templateObject_1$
|
|
5910
|
+
var templateObject_1$1N, templateObject_2$1f, templateObject_3$10, templateObject_4$P, templateObject_5$B, templateObject_6$w, templateObject_7$o, templateObject_8$j;
|
|
5911
5911
|
|
|
5912
5912
|
var Tooltip = function (_a) {
|
|
5913
5913
|
var _b;
|
|
@@ -5950,8 +5950,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5950
5950
|
};
|
|
5951
5951
|
};
|
|
5952
5952
|
|
|
5953
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
5954
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5953
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5954
|
+
var ContainerBase$2 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __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) {
|
|
5955
5955
|
var selected = _a.selected, theme = _a.theme;
|
|
5956
5956
|
return selected
|
|
5957
5957
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5965,12 +5965,12 @@ var ContainerBase$2 = newStyled.div(templateObject_2$1c || (templateObject_2$1c
|
|
|
5965
5965
|
var theme = _a.theme;
|
|
5966
5966
|
return theme.colors.pallete.primary.color;
|
|
5967
5967
|
});
|
|
5968
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3
|
|
5968
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3$$ || (templateObject_3$$ = __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) {
|
|
5969
5969
|
var onClick = _a.onClick;
|
|
5970
5970
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5971
5971
|
});
|
|
5972
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
5973
|
-
var SubscriptionHeader$2 = newStyled.div(templateObject_5$
|
|
5972
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5973
|
+
var SubscriptionHeader$2 = newStyled.div(templateObject_5$A || (templateObject_5$A = __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) {
|
|
5974
5974
|
var theme = _a.theme;
|
|
5975
5975
|
return theme.colors.shades[200].color;
|
|
5976
5976
|
}, function (_a) {
|
|
@@ -5988,7 +5988,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
5988
5988
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5989
5989
|
});
|
|
5990
5990
|
var Container$17 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5991
|
-
var templateObject_1$
|
|
5991
|
+
var templateObject_1$1M, templateObject_2$1e, templateObject_3$$, templateObject_4$O, templateObject_5$A, templateObject_6$v, templateObject_7$n, templateObject_8$i, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
5992
5992
|
|
|
5993
5993
|
var radioIds$2 = {
|
|
5994
5994
|
oneTime: {
|
|
@@ -6043,12 +6043,12 @@ var Autoship = function (_a) {
|
|
|
6043
6043
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$2, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6044
6044
|
};
|
|
6045
6045
|
|
|
6046
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
6046
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6047
6047
|
var theme = _a.theme;
|
|
6048
6048
|
return theme.name === 'TheSpaDr' &&
|
|
6049
6049
|
"\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 ";
|
|
6050
6050
|
});
|
|
6051
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6051
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __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) {
|
|
6052
6052
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6053
6053
|
return isSelected
|
|
6054
6054
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6064,7 +6064,7 @@ var getSelectedBorder = function (_a) {
|
|
|
6064
6064
|
}
|
|
6065
6065
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6066
6066
|
};
|
|
6067
|
-
var ContainerBase$1 = newStyled.div(templateObject_3$
|
|
6067
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$_ || (templateObject_3$_ = __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) {
|
|
6068
6068
|
var selected = _a.selected, theme = _a.theme;
|
|
6069
6069
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6070
6070
|
}, function (_a) {
|
|
@@ -6076,11 +6076,11 @@ var ContainerBase$1 = newStyled.div(templateObject_3$Y || (templateObject_3$Y =
|
|
|
6076
6076
|
var theme = _a.theme;
|
|
6077
6077
|
return theme.colors.pallete.primary.color;
|
|
6078
6078
|
});
|
|
6079
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
6079
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$N || (templateObject_4$N = __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) {
|
|
6080
6080
|
var onClick = _a.onClick;
|
|
6081
6081
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6082
6082
|
});
|
|
6083
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
6083
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6084
6084
|
var SubscriptionHeader$1 = newStyled.div(templateObject_6$u || (templateObject_6$u = __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) {
|
|
6085
6085
|
var theme = _a.theme;
|
|
6086
6086
|
return theme.colors.shades[200].color;
|
|
@@ -6101,7 +6101,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6101
6101
|
var theme = _a.theme;
|
|
6102
6102
|
return theme.component.autoship.tooltip.margin;
|
|
6103
6103
|
});
|
|
6104
|
-
var templateObject_1$
|
|
6104
|
+
var templateObject_1$1L, templateObject_2$1d, templateObject_3$_, templateObject_4$N, templateObject_5$z, templateObject_6$u, templateObject_7$m, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2;
|
|
6105
6105
|
|
|
6106
6106
|
var radioIds$1 = {
|
|
6107
6107
|
oneTime: {
|
|
@@ -6179,13 +6179,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6179
6179
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6180
6180
|
_a$2);
|
|
6181
6181
|
|
|
6182
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6183
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6184
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6185
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6186
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6182
|
+
var CustomerDetails = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
|
|
6183
|
+
var CustomerInfo = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6184
|
+
var Name = newStyled.h4(templateObject_3$Z || (templateObject_3$Z = __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"])));
|
|
6185
|
+
var StarIconContainer = newStyled.div(templateObject_4$M || (templateObject_4$M = __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"])));
|
|
6186
|
+
var Description$2 = newStyled.p(templateObject_5$y || (templateObject_5$y = __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"])));
|
|
6187
6187
|
var ReviewDays = newStyled.span(templateObject_6$t || (templateObject_6$t = __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"])));
|
|
6188
|
-
var templateObject_1$
|
|
6188
|
+
var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$M, templateObject_5$y, templateObject_6$t;
|
|
6189
6189
|
|
|
6190
6190
|
var NameWithStars = function (_a) {
|
|
6191
6191
|
var name = _a.name, size = _a.size;
|
|
@@ -6203,10 +6203,10 @@ var ResultFeedback = function (_a) {
|
|
|
6203
6203
|
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));
|
|
6204
6204
|
};
|
|
6205
6205
|
|
|
6206
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6207
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6208
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6209
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6206
|
+
var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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; });
|
|
6207
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
6208
|
+
var ImageCard = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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; });
|
|
6209
|
+
var UserInfoText = newStyled.div(templateObject_4$L || (templateObject_4$L = __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) {
|
|
6210
6210
|
var theme = _a.theme;
|
|
6211
6211
|
return theme.colors.pallete.secondary.color;
|
|
6212
6212
|
}, function (_a) {
|
|
@@ -6216,7 +6216,7 @@ var UserInfoText = newStyled.div(templateObject_4$K || (templateObject_4$K = __m
|
|
|
6216
6216
|
var theme = _a.theme, size = _a.size;
|
|
6217
6217
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6218
6218
|
});
|
|
6219
|
-
var templateObject_1$
|
|
6219
|
+
var templateObject_1$1J, templateObject_2$1b, templateObject_3$Y, templateObject_4$L;
|
|
6220
6220
|
|
|
6221
6221
|
/* base styles & size variants */
|
|
6222
6222
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6294,7 +6294,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6294
6294
|
return (jsxRuntime.jsxs(Container$15, __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));
|
|
6295
6295
|
};
|
|
6296
6296
|
|
|
6297
|
-
var Section = newStyled.div(templateObject_1$
|
|
6297
|
+
var Section = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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) {
|
|
6298
6298
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6299
6299
|
});
|
|
6300
6300
|
var CardHeader = function (_a) {
|
|
@@ -6305,16 +6305,16 @@ var CardFooter = function (_a) {
|
|
|
6305
6305
|
var children = _a.children;
|
|
6306
6306
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6307
6307
|
};
|
|
6308
|
-
var templateObject_1$
|
|
6308
|
+
var templateObject_1$1I;
|
|
6309
6309
|
|
|
6310
|
-
var Body = newStyled.div(templateObject_1$
|
|
6311
|
-
var CardBody = function (_a) {
|
|
6310
|
+
var Body = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __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"])));
|
|
6311
|
+
var CardBody$1 = function (_a) {
|
|
6312
6312
|
var children = _a.children;
|
|
6313
6313
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6314
6314
|
};
|
|
6315
|
-
var templateObject_1$
|
|
6315
|
+
var templateObject_1$1H;
|
|
6316
6316
|
|
|
6317
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6317
|
+
var Container$14 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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) {
|
|
6318
6318
|
var flex = _a.flex;
|
|
6319
6319
|
return flex &&
|
|
6320
6320
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6326,55 +6326,55 @@ var Container$14 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = _
|
|
|
6326
6326
|
}, function (props) { return props.theme.component.card.borderRadius; }, function (props) {
|
|
6327
6327
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
6328
6328
|
});
|
|
6329
|
-
var Card$
|
|
6329
|
+
var Card$2 = function (_a) {
|
|
6330
6330
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
6331
6331
|
var theme = useTheme();
|
|
6332
6332
|
return (jsxRuntime.jsx(Container$14, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6333
6333
|
};
|
|
6334
|
-
var Card$
|
|
6334
|
+
var Card$3 = Object.assign(Card$2, {
|
|
6335
6335
|
Header: CardHeader,
|
|
6336
6336
|
Footer: CardFooter,
|
|
6337
|
-
Body: CardBody,
|
|
6337
|
+
Body: CardBody$1,
|
|
6338
6338
|
});
|
|
6339
|
-
var templateObject_1$
|
|
6339
|
+
var templateObject_1$1G;
|
|
6340
6340
|
|
|
6341
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6342
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6343
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6341
|
+
var StyledWrapper = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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"])));
|
|
6342
|
+
var StyledContainer = 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"])));
|
|
6343
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$X || (templateObject_3$X = __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) {
|
|
6344
6344
|
var color = _a.color;
|
|
6345
6345
|
return color;
|
|
6346
6346
|
});
|
|
6347
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6348
|
-
var templateObject_1$
|
|
6347
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$K || (templateObject_4$K = __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"])));
|
|
6348
|
+
var templateObject_1$1F, templateObject_2$1a, templateObject_3$X, templateObject_4$K;
|
|
6349
6349
|
|
|
6350
6350
|
var Minimalistic = function (_a) {
|
|
6351
6351
|
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;
|
|
6352
6352
|
var theme = useTheme();
|
|
6353
|
-
return (jsxRuntime.jsx(Card$
|
|
6353
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6354
6354
|
};
|
|
6355
6355
|
|
|
6356
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6357
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6358
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6359
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6356
|
+
var Container$13 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6357
|
+
var Title$9 = newStyled.h1(templateObject_2$19 || (templateObject_2$19 = __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; });
|
|
6358
|
+
var Details$1 = newStyled.span(templateObject_3$W || (templateObject_3$W = __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; });
|
|
6359
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$J || (templateObject_4$J = __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"])));
|
|
6360
6360
|
var Simple = function (_a) {
|
|
6361
6361
|
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;
|
|
6362
6362
|
var theme = useTheme();
|
|
6363
|
-
return (jsxRuntime.jsx(Card$
|
|
6363
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$13, { 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));
|
|
6364
6364
|
};
|
|
6365
|
-
var templateObject_1$
|
|
6365
|
+
var templateObject_1$1E, templateObject_2$19, templateObject_3$W, templateObject_4$J;
|
|
6366
6366
|
|
|
6367
6367
|
var Bundle = {
|
|
6368
6368
|
Minimalistic: Minimalistic,
|
|
6369
6369
|
Simple: Simple,
|
|
6370
6370
|
};
|
|
6371
6371
|
|
|
6372
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
6372
|
+
var Container$12 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __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) {
|
|
6373
6373
|
var displayBNPL = _a.displayBNPL;
|
|
6374
6374
|
return (displayBNPL ? 'flex' : 'none');
|
|
6375
6375
|
});
|
|
6376
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6377
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6376
|
+
var TextContainer$1 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6377
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$V || (templateObject_3$V = __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"])));
|
|
6378
6378
|
var BuyNowPayLater = function (_a) {
|
|
6379
6379
|
var _b;
|
|
6380
6380
|
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;
|
|
@@ -6386,41 +6386,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6386
6386
|
}
|
|
6387
6387
|
return (jsxRuntime.jsx(Container$12, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6388
6388
|
};
|
|
6389
|
-
var templateObject_1$
|
|
6389
|
+
var templateObject_1$1D, templateObject_2$18, templateObject_3$V;
|
|
6390
6390
|
|
|
6391
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6391
|
+
var Text$6 = newStyled.span(templateObject_1$1C || (templateObject_1$1C = __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; });
|
|
6392
6392
|
var Title$8 = function (_a) {
|
|
6393
6393
|
var title = _a.title;
|
|
6394
6394
|
var theme = useTheme();
|
|
6395
6395
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6396
6396
|
};
|
|
6397
|
-
var templateObject_1$
|
|
6397
|
+
var templateObject_1$1C;
|
|
6398
6398
|
|
|
6399
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6399
|
+
var P$3 = newStyled.p(templateObject_1$1B || (templateObject_1$1B = __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; });
|
|
6400
6400
|
var Promo = function (_a) {
|
|
6401
6401
|
var text = _a.text;
|
|
6402
6402
|
var theme = useTheme();
|
|
6403
6403
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6404
6404
|
};
|
|
6405
|
-
var templateObject_1$
|
|
6405
|
+
var templateObject_1$1B;
|
|
6406
6406
|
|
|
6407
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6407
|
+
var Text$5 = newStyled.span(templateObject_1$1A || (templateObject_1$1A = __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; });
|
|
6408
6408
|
var Description$1 = function (_a) {
|
|
6409
6409
|
var text = _a.text;
|
|
6410
6410
|
var theme = useTheme();
|
|
6411
6411
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6412
6412
|
};
|
|
6413
|
-
var templateObject_1$
|
|
6413
|
+
var templateObject_1$1A;
|
|
6414
6414
|
|
|
6415
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
6415
|
+
var Container$11 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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"); });
|
|
6416
6416
|
var CloseButton$1 = function (_a) {
|
|
6417
6417
|
var onClick = _a.onClick, size = _a.size;
|
|
6418
6418
|
var theme = useTheme();
|
|
6419
6419
|
return (jsxRuntime.jsx(Container$11, __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));
|
|
6420
6420
|
};
|
|
6421
|
-
var templateObject_1$
|
|
6421
|
+
var templateObject_1$1z;
|
|
6422
6422
|
|
|
6423
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6423
|
+
var Text$4 = newStyled.h3(templateObject_1$1y || (templateObject_1$1y = __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) {
|
|
6424
6424
|
var backgroundColor = _a.backgroundColor;
|
|
6425
6425
|
return backgroundColor;
|
|
6426
6426
|
}, function (_a) {
|
|
@@ -6435,7 +6435,7 @@ var OfferBanner = function (_a) {
|
|
|
6435
6435
|
var theme = useTheme();
|
|
6436
6436
|
return (jsxRuntime.jsx(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6437
6437
|
};
|
|
6438
|
-
var templateObject_1$
|
|
6438
|
+
var templateObject_1$1y;
|
|
6439
6439
|
|
|
6440
6440
|
var CartProductItem = {
|
|
6441
6441
|
Title: Title$8,
|
|
@@ -6445,11 +6445,11 @@ var CartProductItem = {
|
|
|
6445
6445
|
CloseButton: CloseButton$1,
|
|
6446
6446
|
};
|
|
6447
6447
|
|
|
6448
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
6449
|
-
var MobileContainer = newStyled(Container$10)(templateObject_2$
|
|
6450
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6451
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6452
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6448
|
+
var Container$10 = 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"])));
|
|
6449
|
+
var MobileContainer = newStyled(Container$10)(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6450
|
+
var DollarPart = newStyled.span(templateObject_3$U || (templateObject_3$U = __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"])));
|
|
6451
|
+
var ClubMembersText = newStyled.span(templateObject_4$I || (templateObject_4$I = __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"])));
|
|
6452
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6453
6453
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6454
6454
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6455
6455
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6458,7 +6458,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6458
6458
|
var isMobile = useWindowDimensions().isMobile;
|
|
6459
6459
|
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$10, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6460
6460
|
};
|
|
6461
|
-
var templateObject_1$
|
|
6461
|
+
var templateObject_1$1x, templateObject_2$17, templateObject_3$U, templateObject_4$I, templateObject_5$x, templateObject_6$s, templateObject_7$l, templateObject_8$g;
|
|
6462
6462
|
|
|
6463
6463
|
var Spacing = function (_a) {
|
|
6464
6464
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6466,10 +6466,10 @@ var Spacing = function (_a) {
|
|
|
6466
6466
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6467
6467
|
};
|
|
6468
6468
|
|
|
6469
|
-
var Container$$ = newStyled('div')(templateObject_1$
|
|
6470
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6471
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6472
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6469
|
+
var Container$$ = 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"])));
|
|
6470
|
+
var Content$2 = newStyled('div')(templateObject_2$16 || (templateObject_2$16 = __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"])));
|
|
6471
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
6472
|
+
var Bar$2 = newStyled('div')(templateObject_4$H || (templateObject_4$H = __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) {
|
|
6473
6473
|
var index = _a.index;
|
|
6474
6474
|
return "".concat(6 + 3 * index, "px");
|
|
6475
6475
|
}, function (_a) {
|
|
@@ -6480,13 +6480,13 @@ var StrengthBars = function (_a) {
|
|
|
6480
6480
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6481
6481
|
return (jsxRuntime.jsxs(Container$$, __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));
|
|
6482
6482
|
};
|
|
6483
|
-
var templateObject_1$
|
|
6483
|
+
var templateObject_1$1w, templateObject_2$16, templateObject_3$T, templateObject_4$H;
|
|
6484
6484
|
|
|
6485
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6486
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6487
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6488
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6489
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6485
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
6486
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$15 || (templateObject_2$15 = __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"])));
|
|
6487
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6488
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6489
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6490
6490
|
var RegularPriceTag = function () {
|
|
6491
6491
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6492
6492
|
};
|
|
@@ -6539,12 +6539,12 @@ var PriceLabelV4 = function (_a) {
|
|
|
6539
6539
|
? finalPriceArray[0]
|
|
6540
6540
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6541
6541
|
};
|
|
6542
|
-
var templateObject_1$
|
|
6542
|
+
var templateObject_1$1v, templateObject_2$15, templateObject_3$S, templateObject_4$G, templateObject_5$w;
|
|
6543
6543
|
|
|
6544
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
6545
|
-
var templateObject_1$
|
|
6544
|
+
var Container$_ = 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"])));
|
|
6545
|
+
var templateObject_1$1u;
|
|
6546
6546
|
|
|
6547
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6547
|
+
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) {
|
|
6548
6548
|
var marginRight = _a.marginRight;
|
|
6549
6549
|
return marginRight;
|
|
6550
6550
|
});
|
|
@@ -6560,7 +6560,7 @@ var StarList = function (_a) {
|
|
|
6560
6560
|
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)));
|
|
6561
6561
|
}) }, void 0));
|
|
6562
6562
|
};
|
|
6563
|
-
var templateObject_1$
|
|
6563
|
+
var templateObject_1$1t;
|
|
6564
6564
|
|
|
6565
6565
|
/* base styles & size variants */
|
|
6566
6566
|
var LabelStyles = {
|
|
@@ -6601,8 +6601,8 @@ var LabelStyles = {
|
|
|
6601
6601
|
});
|
|
6602
6602
|
},
|
|
6603
6603
|
};
|
|
6604
|
-
var Container$Z = newStyled.a(templateObject_1$
|
|
6605
|
-
var templateObject_1$
|
|
6604
|
+
var Container$Z = 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"])));
|
|
6605
|
+
var templateObject_1$1s;
|
|
6606
6606
|
|
|
6607
6607
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6608
6608
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6622,7 +6622,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6622
6622
|
}),
|
|
6623
6623
|
];
|
|
6624
6624
|
});
|
|
6625
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6625
|
+
var RatingLabel = newStyled.span(templateObject_1$1r || (templateObject_1$1r = __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; });
|
|
6626
6626
|
var starsNumber = 5;
|
|
6627
6627
|
var Rating = function (_a) {
|
|
6628
6628
|
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;
|
|
@@ -6645,7 +6645,7 @@ var Rating = function (_a) {
|
|
|
6645
6645
|
: {};
|
|
6646
6646
|
return (jsxRuntime.jsxs(Container$Z, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6647
6647
|
};
|
|
6648
|
-
var templateObject_1$
|
|
6648
|
+
var templateObject_1$1r;
|
|
6649
6649
|
|
|
6650
6650
|
var ImageContainer$6 = newStyled.div(function (_a) {
|
|
6651
6651
|
var width = _a.width, height = _a.height;
|
|
@@ -6655,10 +6655,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6655
6655
|
height: height,
|
|
6656
6656
|
});
|
|
6657
6657
|
});
|
|
6658
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6659
|
-
var Container$Y = newStyled.a(templateObject_2$
|
|
6660
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6661
|
-
var Title$7 = newStyled.p(templateObject_4$
|
|
6658
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1q || (templateObject_1$1q = __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"])));
|
|
6659
|
+
var Container$Y = newStyled.a(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
6660
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
6661
|
+
var Title$7 = newStyled.p(templateObject_4$F || (templateObject_4$F = __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; });
|
|
6662
6662
|
var getStylesBySize$c = function (size) {
|
|
6663
6663
|
switch (size) {
|
|
6664
6664
|
case exports.ComponentSize.Medium:
|
|
@@ -6684,7 +6684,7 @@ var getStylesBySize$c = function (size) {
|
|
|
6684
6684
|
};
|
|
6685
6685
|
}
|
|
6686
6686
|
};
|
|
6687
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
6687
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$v || (templateObject_5$v = __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) {
|
|
6688
6688
|
var style = _a.style;
|
|
6689
6689
|
return style.width;
|
|
6690
6690
|
});
|
|
@@ -6753,7 +6753,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6753
6753
|
letterSpacing: '-0.05rem',
|
|
6754
6754
|
} }), void 0)) }), void 0)), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6755
6755
|
};
|
|
6756
|
-
var templateObject_1$
|
|
6756
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$F, templateObject_5$v, templateObject_6$r, templateObject_7$k;
|
|
6757
6757
|
|
|
6758
6758
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6759
6759
|
var width = _a.width, height = _a.height;
|
|
@@ -6763,10 +6763,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6763
6763
|
height: height,
|
|
6764
6764
|
});
|
|
6765
6765
|
});
|
|
6766
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6767
|
-
var Container$X = newStyled.a(templateObject_2$
|
|
6768
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6769
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
6766
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1p || (templateObject_1$1p = __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; });
|
|
6767
|
+
var Container$X = newStyled.a(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6768
|
+
var ProdCardContainer$3 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6769
|
+
var Title$6 = newStyled.p(templateObject_4$E || (templateObject_4$E = __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; });
|
|
6770
6770
|
var getStylesBySize$b = function (size) {
|
|
6771
6771
|
switch (size) {
|
|
6772
6772
|
case exports.ComponentSize.Medium:
|
|
@@ -6792,7 +6792,7 @@ var getStylesBySize$b = function (size) {
|
|
|
6792
6792
|
};
|
|
6793
6793
|
}
|
|
6794
6794
|
};
|
|
6795
|
-
var TopTagContainer$7 = newStyled.div(templateObject_5$
|
|
6795
|
+
var TopTagContainer$7 = newStyled.div(templateObject_5$u || (templateObject_5$u = __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) {
|
|
6796
6796
|
var style = _a.style;
|
|
6797
6797
|
return style.width;
|
|
6798
6798
|
});
|
|
@@ -6852,9 +6852,9 @@ var ProductItemTK = function (_a) {
|
|
|
6852
6852
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6853
6853
|
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6854
6854
|
};
|
|
6855
|
-
var templateObject_1$
|
|
6855
|
+
var templateObject_1$1p, templateObject_2$13, templateObject_3$Q, templateObject_4$E, templateObject_5$u, templateObject_6$q, templateObject_7$j, templateObject_8$f;
|
|
6856
6856
|
|
|
6857
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
6857
|
+
var Container$W = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
6858
6858
|
function withProductGrid(ProductItemComponent, data) {
|
|
6859
6859
|
function WithProductGrid(props) {
|
|
6860
6860
|
return (jsxRuntime.jsx(Container$W, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6864,7 +6864,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6864
6864
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6865
6865
|
return WithProductGrid;
|
|
6866
6866
|
}
|
|
6867
|
-
var templateObject_1$
|
|
6867
|
+
var templateObject_1$1o;
|
|
6868
6868
|
|
|
6869
6869
|
var Collection = {
|
|
6870
6870
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6911,11 +6911,11 @@ var OutOfStock = function (_a) {
|
|
|
6911
6911
|
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));
|
|
6912
6912
|
};
|
|
6913
6913
|
|
|
6914
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6915
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6916
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6917
|
-
var Span = newStyled.span(templateObject_4$
|
|
6918
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6914
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6915
|
+
newStyled(lt.Label)(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6916
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$P || (templateObject_3$P = __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"])));
|
|
6917
|
+
var Span = newStyled.span(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6918
|
+
var OptionsContainer = newStyled.div(templateObject_5$t || (templateObject_5$t = __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"])));
|
|
6919
6919
|
var Label$4 = function (_a) {
|
|
6920
6920
|
var label = _a.label, values = _a.values;
|
|
6921
6921
|
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -6933,23 +6933,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6933
6933
|
Option: Option,
|
|
6934
6934
|
OptionsContainer: OptionsContainer,
|
|
6935
6935
|
});
|
|
6936
|
-
var templateObject_1$
|
|
6936
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$P, templateObject_4$D, templateObject_5$t;
|
|
6937
6937
|
|
|
6938
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6938
|
+
var Container$V = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
6939
6939
|
var borderColor = _a.borderColor;
|
|
6940
6940
|
return borderColor;
|
|
6941
6941
|
}, function (_a) {
|
|
6942
6942
|
var noStock = _a.noStock;
|
|
6943
6943
|
return (noStock ? '0.4' : '1');
|
|
6944
6944
|
});
|
|
6945
|
-
var Image$2 = newStyled.img(templateObject_2
|
|
6945
|
+
var Image$2 = newStyled.img(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6946
6946
|
var PatternSelector = function (_a) {
|
|
6947
6947
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6948
6948
|
var theme = useTheme();
|
|
6949
6949
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6950
6950
|
return (jsxRuntime.jsx(Container$V, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6951
6951
|
};
|
|
6952
|
-
var templateObject_1$
|
|
6952
|
+
var templateObject_1$1m, templateObject_2$11;
|
|
6953
6953
|
|
|
6954
6954
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6955
6955
|
if (options == null || options.length === 0) {
|
|
@@ -7008,21 +7008,21 @@ var SingleColorPicker = function (_a) {
|
|
|
7008
7008
|
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.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
|
|
7009
7009
|
};
|
|
7010
7010
|
|
|
7011
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7012
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7013
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7011
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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'); });
|
|
7012
|
+
var Col$1 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7013
|
+
var Row$2 = newStyled.div(templateObject_3$O || (templateObject_3$O = __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) {
|
|
7014
7014
|
return props.rightToLeft &&
|
|
7015
7015
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7016
7016
|
});
|
|
7017
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7018
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
7017
|
+
var H5 = newStyled.h5(templateObject_4$C || (templateObject_4$C = __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; });
|
|
7018
|
+
var H3$1 = newStyled.h3(templateObject_5$s || (templateObject_5$s = __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; });
|
|
7019
7019
|
var FreeShipping = newStyled.span(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7020
7020
|
var CrossSellCheckbox = function (_a) {
|
|
7021
7021
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7022
7022
|
var theme = useTheme();
|
|
7023
7023
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7024
7024
|
};
|
|
7025
|
-
var templateObject_1$
|
|
7025
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$O, templateObject_4$C, templateObject_5$s, templateObject_6$p;
|
|
7026
7026
|
|
|
7027
7027
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7028
7028
|
__proto__: null,
|
|
@@ -7050,7 +7050,7 @@ var sizeMapper = (_a = {},
|
|
|
7050
7050
|
_a[exports.ComponentSize.Large] = 'large',
|
|
7051
7051
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7052
7052
|
_a);
|
|
7053
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7053
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7054
7054
|
var wide = _a.wide;
|
|
7055
7055
|
return (wide ? '100%' : 'fit-content');
|
|
7056
7056
|
}, function (_a) {
|
|
@@ -7072,11 +7072,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1i || (templateObj
|
|
|
7072
7072
|
var theme = _a.theme;
|
|
7073
7073
|
return theme.colors.text.disabled;
|
|
7074
7074
|
});
|
|
7075
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2
|
|
7075
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7076
7076
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7077
7077
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7078
7078
|
});
|
|
7079
|
-
var templateObject_1$
|
|
7079
|
+
var templateObject_1$1k, templateObject_2$$;
|
|
7080
7080
|
|
|
7081
7081
|
var BaseCTA = function (_a) {
|
|
7082
7082
|
var _b, _c, _d;
|
|
@@ -7163,33 +7163,33 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7163
7163
|
} }), void 0));
|
|
7164
7164
|
};
|
|
7165
7165
|
|
|
7166
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
7167
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7168
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7169
|
-
var Details = newStyled.span(templateObject_4$
|
|
7166
|
+
var Container$U = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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; });
|
|
7167
|
+
var IconContainer$4 = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __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"])));
|
|
7168
|
+
var Text$3 = newStyled.p(templateObject_3$N || (templateObject_3$N = __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; });
|
|
7169
|
+
var Details = newStyled.span(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7170
7170
|
var Note = function (_a) {
|
|
7171
7171
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7172
7172
|
var theme = useTheme();
|
|
7173
7173
|
return (jsxRuntime.jsxs(Container$U, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7174
7174
|
};
|
|
7175
|
-
var templateObject_1$
|
|
7175
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B;
|
|
7176
7176
|
|
|
7177
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7177
|
+
var Title$5 = newStyled.h1(templateObject_1$1i || (templateObject_1$1i = __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) {
|
|
7178
7178
|
var theme = _a.theme;
|
|
7179
7179
|
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 ");
|
|
7180
7180
|
});
|
|
7181
|
-
var Line = newStyled.div(templateObject_2$
|
|
7182
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7181
|
+
var Line = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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; });
|
|
7182
|
+
var Row$1 = newStyled.div(templateObject_3$M || (templateObject_3$M = __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({
|
|
7183
7183
|
flexDirection: ['column', 'row'],
|
|
7184
7184
|
}));
|
|
7185
|
-
var Col = newStyled.div(templateObject_4$
|
|
7185
|
+
var Col = newStyled.div(templateObject_4$A || (templateObject_4$A = __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({
|
|
7186
7186
|
margin: ['0', '0 1.25rem'],
|
|
7187
7187
|
marginBottom: ['1.875rem', '0'],
|
|
7188
7188
|
alignItems: ['center', 'flex-start'],
|
|
7189
7189
|
textAlign: ['center', 'inherit'],
|
|
7190
7190
|
width: ['100%', 'inherit'],
|
|
7191
7191
|
}));
|
|
7192
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
7192
|
+
var IconContainer$3 = newStyled.div(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7193
7193
|
marginRight: ['0', '0.438rem'],
|
|
7194
7194
|
marginBottom: ['10px', '0'],
|
|
7195
7195
|
width: ['auto', '1.5rem'],
|
|
@@ -7217,16 +7217,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7217
7217
|
var theme = useTheme();
|
|
7218
7218
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7219
7219
|
};
|
|
7220
|
-
var templateObject_1$
|
|
7220
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$M, templateObject_4$A, templateObject_5$r, templateObject_6$o, templateObject_7$i, templateObject_8$e;
|
|
7221
7221
|
|
|
7222
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7222
|
+
var Backdrop = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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) {
|
|
7223
7223
|
var top = _a.top;
|
|
7224
7224
|
return top;
|
|
7225
7225
|
}, function (_a) {
|
|
7226
7226
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7227
7227
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7228
7228
|
});
|
|
7229
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7229
|
+
var Sidebar = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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) {
|
|
7230
7230
|
var height = _a.height;
|
|
7231
7231
|
return height;
|
|
7232
7232
|
}, function (_a) {
|
|
@@ -7273,20 +7273,20 @@ var Drawer = function (_a) {
|
|
|
7273
7273
|
}, [isOpen, onClose, onOpen]);
|
|
7274
7274
|
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;
|
|
7275
7275
|
};
|
|
7276
|
-
var templateObject_1$
|
|
7276
|
+
var templateObject_1$1h, templateObject_2$Y;
|
|
7277
7277
|
|
|
7278
7278
|
var TooltipArrow = function (_a) {
|
|
7279
7279
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7280
7280
|
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));
|
|
7281
7281
|
};
|
|
7282
7282
|
|
|
7283
|
-
var List = newStyled.ul(templateObject_1$
|
|
7284
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7285
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7286
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7287
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7283
|
+
var List = newStyled.ul(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7284
|
+
var Item$2 = newStyled.li(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
7285
|
+
var DropdownWrapper = newStyled.div(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
7286
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
7287
|
+
var StyledDropdown = newStyled.ul(templateObject_5$q || (templateObject_5$q = __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; });
|
|
7288
7288
|
var DropdownItem = newStyled.li(templateObject_6$n || (templateObject_6$n = __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; });
|
|
7289
|
-
var templateObject_1$
|
|
7289
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$z, templateObject_5$q, templateObject_6$n;
|
|
7290
7290
|
|
|
7291
7291
|
var DropdownListIcons = function (_a) {
|
|
7292
7292
|
var items = _a.items;
|
|
@@ -7299,13 +7299,13 @@ var Dropdown = function (_a) {
|
|
|
7299
7299
|
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));
|
|
7300
7300
|
};
|
|
7301
7301
|
|
|
7302
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7303
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7304
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7305
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7306
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7302
|
+
var DropdownContainer = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
7303
|
+
var DropdownLabel = newStyled.div(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
7304
|
+
var SizeLabel = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7305
|
+
var DetailLabel = newStyled.span(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
7306
|
+
var DropdownOptions = newStyled.div(templateObject_5$p || (templateObject_5$p = __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"])));
|
|
7307
7307
|
var DropdownOption = newStyled.div(templateObject_6$m || (templateObject_6$m = __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"])));
|
|
7308
|
-
var templateObject_1$
|
|
7308
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$K, templateObject_4$y, templateObject_5$p, templateObject_6$m;
|
|
7309
7309
|
|
|
7310
7310
|
var SizeDropdown = function (_a) {
|
|
7311
7311
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7328,10 +7328,10 @@ var SizeDropdown = function (_a) {
|
|
|
7328
7328
|
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));
|
|
7329
7329
|
};
|
|
7330
7330
|
|
|
7331
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7332
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7333
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7334
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7331
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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; });
|
|
7332
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7333
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
7334
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7335
7335
|
var DropdownDialog = function (_a) {
|
|
7336
7336
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7337
7337
|
var theme = useTheme$1();
|
|
@@ -7340,7 +7340,7 @@ var DropdownDialog = function (_a) {
|
|
|
7340
7340
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7341
7341
|
}) }), void 0) }), void 0));
|
|
7342
7342
|
};
|
|
7343
|
-
var templateObject_1$
|
|
7343
|
+
var templateObject_1$1e, templateObject_2$V, templateObject_3$J, templateObject_4$x;
|
|
7344
7344
|
|
|
7345
7345
|
function FilteringDropdown(_a) {
|
|
7346
7346
|
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;
|
|
@@ -7373,29 +7373,29 @@ function FilteringDropdown(_a) {
|
|
|
7373
7373
|
}) }, void 0)] }), void 0));
|
|
7374
7374
|
}
|
|
7375
7375
|
|
|
7376
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7377
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7378
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7379
|
-
var Container$T = newStyled.div(templateObject_4$
|
|
7376
|
+
var Title$4 = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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; });
|
|
7377
|
+
var H3 = newStyled.h3(templateObject_2$U || (templateObject_2$U = __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; });
|
|
7378
|
+
var ArrowContainer = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7379
|
+
var Container$T = newStyled.div(templateObject_4$w || (templateObject_4$w = __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'); });
|
|
7380
7380
|
var Accordion = function (_a) {
|
|
7381
7381
|
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;
|
|
7382
7382
|
var theme = useTheme();
|
|
7383
7383
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7384
7384
|
return (jsxRuntime.jsxs(Container$T, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7385
7385
|
};
|
|
7386
|
-
var templateObject_1$
|
|
7386
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$w;
|
|
7387
7387
|
|
|
7388
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7389
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7390
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7391
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7392
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7388
|
+
var SectionContent = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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; });
|
|
7389
|
+
var Header$1 = newStyled.div(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
7390
|
+
var MobileHeader = newStyled.div(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
7391
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
7392
|
+
var H4 = newStyled.h4(templateObject_5$o || (templateObject_5$o = __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; });
|
|
7393
7393
|
var FilterLink = newStyled.a(templateObject_6$l || (templateObject_6$l = __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; });
|
|
7394
7394
|
var OptionContainer = newStyled.div(templateObject_7$h || (templateObject_7$h = __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'); });
|
|
7395
7395
|
var ClearAll = newStyled.span(templateObject_8$d || (templateObject_8$d = __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; });
|
|
7396
7396
|
var MobileFooter = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __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"])));
|
|
7397
7397
|
var MobileClearContainer = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __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"])));
|
|
7398
|
-
var templateObject_1$
|
|
7398
|
+
var templateObject_1$1c, templateObject_2$T, templateObject_3$H, templateObject_4$v, templateObject_5$o, templateObject_6$l, templateObject_7$h, templateObject_8$d, templateObject_9$8, templateObject_10$7;
|
|
7399
7399
|
|
|
7400
7400
|
var getStylesBySize$a = function (size, theme) {
|
|
7401
7401
|
switch (size) {
|
|
@@ -7460,9 +7460,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7460
7460
|
} }), id: id }, void 0));
|
|
7461
7461
|
};
|
|
7462
7462
|
|
|
7463
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7464
|
-
var LI = newStyled.li(templateObject_2$
|
|
7465
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7463
|
+
var UL = newStyled.ul(templateObject_1$1b || (templateObject_1$1b = __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"])));
|
|
7464
|
+
var LI = newStyled.li(templateObject_2$S || (templateObject_2$S = __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; });
|
|
7465
|
+
var CloseIconContainer = newStyled.div(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
7466
7466
|
var Tags = function (_a) {
|
|
7467
7467
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7468
7468
|
var theme = useTheme();
|
|
@@ -7470,7 +7470,7 @@ var Tags = function (_a) {
|
|
|
7470
7470
|
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));
|
|
7471
7471
|
}) }), void 0));
|
|
7472
7472
|
};
|
|
7473
|
-
var templateObject_1$
|
|
7473
|
+
var templateObject_1$1b, templateObject_2$S, templateObject_3$G;
|
|
7474
7474
|
|
|
7475
7475
|
var Filters = function (_a) {
|
|
7476
7476
|
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;
|
|
@@ -7606,8 +7606,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7606
7606
|
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));
|
|
7607
7607
|
};
|
|
7608
7608
|
|
|
7609
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7610
|
-
var Container$S = newStyled.div(templateObject_2$
|
|
7609
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
7610
|
+
var Container$S = newStyled.div(templateObject_2$R || (templateObject_2$R = __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"])));
|
|
7611
7611
|
var FitGuarantee = function (_a) {
|
|
7612
7612
|
var _b;
|
|
7613
7613
|
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;
|
|
@@ -7618,17 +7618,17 @@ var FitGuarantee = function (_a) {
|
|
|
7618
7618
|
console.error('Icon', iconName, 'not found');
|
|
7619
7619
|
return null;
|
|
7620
7620
|
}
|
|
7621
|
-
return (jsxRuntime.jsx(Card$
|
|
7621
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$S, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsxRuntime.jsx(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxRuntime.jsxs(Container$S, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7622
7622
|
margin: '0.1rem 0',
|
|
7623
7623
|
width: '100%',
|
|
7624
7624
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7625
7625
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7626
7626
|
} }, { 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));
|
|
7627
7627
|
};
|
|
7628
|
-
var templateObject_1$
|
|
7628
|
+
var templateObject_1$1a, templateObject_2$R;
|
|
7629
7629
|
|
|
7630
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
7631
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7630
|
+
var Container$R = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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"])));
|
|
7631
|
+
var P$2 = newStyled.p(templateObject_2$Q || (templateObject_2$Q = __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; });
|
|
7632
7632
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7633
7633
|
border: 'none',
|
|
7634
7634
|
background: 'transparent',
|
|
@@ -7643,7 +7643,7 @@ var FitPredictor = function (_a) {
|
|
|
7643
7643
|
var theme = useTheme();
|
|
7644
7644
|
return (jsxs(Container$R, __assign$1({ theme: theme }, { children: [jsx(Container$R, { 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));
|
|
7645
7645
|
};
|
|
7646
|
-
var templateObject_1$
|
|
7646
|
+
var templateObject_1$19, templateObject_2$Q;
|
|
7647
7647
|
|
|
7648
7648
|
var Button$7 = newStyled.button(function () { return ({
|
|
7649
7649
|
background: 'transparent',
|
|
@@ -11887,14 +11887,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11887
11887
|
return Slider;
|
|
11888
11888
|
}(React__default["default"].Component);
|
|
11889
11889
|
|
|
11890
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11890
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
11891
11891
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11892
11892
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11893
11893
|
}, function (_a) {
|
|
11894
11894
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11895
11895
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11896
11896
|
});
|
|
11897
|
-
var templateObject_1$
|
|
11897
|
+
var templateObject_1$18;
|
|
11898
11898
|
|
|
11899
11899
|
var getStylesBySize$9 = function (size) {
|
|
11900
11900
|
// rem units
|
|
@@ -11953,7 +11953,7 @@ var SliderNavigation = function (_a) {
|
|
|
11953
11953
|
} }, { 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));
|
|
11954
11954
|
};
|
|
11955
11955
|
|
|
11956
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11956
|
+
var Image$1 = newStyled.img(templateObject_1$17 || (templateObject_1$17 = __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) {
|
|
11957
11957
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11958
11958
|
return borderRadiusVariant &&
|
|
11959
11959
|
"\n border-radius: 20px;\n ";
|
|
@@ -11971,7 +11971,7 @@ var Image$1 = newStyled.img(templateObject_1$15 || (templateObject_1$15 = __make
|
|
|
11971
11971
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11972
11972
|
: 'inherit';
|
|
11973
11973
|
});
|
|
11974
|
-
var templateObject_1$
|
|
11974
|
+
var templateObject_1$17;
|
|
11975
11975
|
|
|
11976
11976
|
var ImageSmallPreview = function (_a) {
|
|
11977
11977
|
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;
|
|
@@ -11979,9 +11979,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11979
11979
|
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: "eager", width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
11980
11980
|
};
|
|
11981
11981
|
|
|
11982
|
-
var horizontalStyles = css(templateObject_1$
|
|
11983
|
-
var verticalStyles = css(templateObject_2$
|
|
11984
|
-
var Container$Q = newStyled.div(templateObject_3$
|
|
11982
|
+
var horizontalStyles = css(templateObject_1$16 || (templateObject_1$16 = __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"])));
|
|
11983
|
+
var verticalStyles = css(templateObject_2$P || (templateObject_2$P = __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"])));
|
|
11984
|
+
var Container$Q = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
11985
11985
|
var position = _a.position;
|
|
11986
11986
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11987
11987
|
}, function (_a) {
|
|
@@ -11989,12 +11989,12 @@ var Container$Q = newStyled.div(templateObject_3$D || (templateObject_3$D = __ma
|
|
|
11989
11989
|
return hasOverflowArrows &&
|
|
11990
11990
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11991
11991
|
});
|
|
11992
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
11993
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11992
|
+
var Button$6 = newStyled.button(templateObject_4$u || (templateObject_4$u = __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"])));
|
|
11993
|
+
var ArrowsContainer = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
11994
11994
|
var ArrowBaseStyles = newStyled.div(templateObject_6$k || (templateObject_6$k = __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"])));
|
|
11995
11995
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$g || (templateObject_7$g = __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"])));
|
|
11996
11996
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$c || (templateObject_8$c = __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"])));
|
|
11997
|
-
var templateObject_1$
|
|
11997
|
+
var templateObject_1$16, templateObject_2$P, templateObject_3$F, templateObject_4$u, templateObject_5$n, templateObject_6$k, templateObject_7$g, templateObject_8$c;
|
|
11998
11998
|
|
|
11999
11999
|
var ImagePreviewList = function (_a) {
|
|
12000
12000
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare;
|
|
@@ -13604,22 +13604,22 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13604
13604
|
afterZoomOut: PropTypes.func
|
|
13605
13605
|
} : {};
|
|
13606
13606
|
|
|
13607
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13608
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13609
|
-
var templateObject_1$
|
|
13607
|
+
var ProgressContainer = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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); });
|
|
13608
|
+
var ProgressFiller = newStyled.div(templateObject_2$O || (templateObject_2$O = __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; });
|
|
13609
|
+
var templateObject_1$15, templateObject_2$O;
|
|
13610
13610
|
|
|
13611
13611
|
var ProgressBar$1 = function (_a) {
|
|
13612
13612
|
var progress = _a.progress, hide = _a.hide;
|
|
13613
13613
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13614
13614
|
};
|
|
13615
13615
|
|
|
13616
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
13617
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13618
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13619
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
13620
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
13616
|
+
var Container$P = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13617
|
+
var HTMLVideo = newStyled.video(templateObject_2$N || (templateObject_2$N = __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; });
|
|
13618
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
13619
|
+
var PlayContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13620
|
+
var PauseContainer = newStyled.div(templateObject_5$m || (templateObject_5$m = __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"])));
|
|
13621
13621
|
var MuteButton = newStyled.button(templateObject_6$j || (templateObject_6$j = __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"])));
|
|
13622
|
-
var templateObject_1$
|
|
13622
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$j;
|
|
13623
13623
|
|
|
13624
13624
|
var Video$1 = function (_a) {
|
|
13625
13625
|
var _b, _c, _d, _e;
|
|
@@ -13668,24 +13668,24 @@ var Video$1 = function (_a) {
|
|
|
13668
13668
|
return (jsxRuntime.jsxs(Container$P, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxRuntime.jsxs(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({}, rest, { muted: true, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13669
13669
|
};
|
|
13670
13670
|
|
|
13671
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
13671
|
+
var Container$O = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
13672
13672
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13673
13673
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13674
13674
|
});
|
|
13675
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13675
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13676
13676
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13677
13677
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13678
13678
|
}, function (_a) {
|
|
13679
13679
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13680
13680
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13681
13681
|
});
|
|
13682
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13682
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13683
13683
|
var isCTAHidden = _a.isCTAHidden;
|
|
13684
13684
|
return (isCTAHidden ? '60px' : '120px');
|
|
13685
13685
|
});
|
|
13686
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13687
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13688
|
-
var templateObject_1$
|
|
13686
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"])));
|
|
13687
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$l || (templateObject_5$l = __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"])));
|
|
13688
|
+
var templateObject_1$13, templateObject_2$M, templateObject_3$D, templateObject_4$s, templateObject_5$l;
|
|
13689
13689
|
|
|
13690
13690
|
var ImageProductSlide$1 = function (_a) {
|
|
13691
13691
|
var _b;
|
|
@@ -13698,8 +13698,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13698
13698
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsxRuntime.jsx(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager" }, void 0)), jsxRuntime.jsx(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13699
13699
|
};
|
|
13700
13700
|
|
|
13701
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
13702
|
-
var templateObject_1$
|
|
13701
|
+
var Container$N = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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"])));
|
|
13702
|
+
var templateObject_1$12;
|
|
13703
13703
|
|
|
13704
13704
|
var getInitialIndex = function (images, selectedValue) {
|
|
13705
13705
|
if (selectedValue) {
|
|
@@ -13747,7 +13747,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13747
13747
|
};
|
|
13748
13748
|
}
|
|
13749
13749
|
};
|
|
13750
|
-
var Container$M = newStyled.div(templateObject_1
|
|
13750
|
+
var Container$M = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13751
13751
|
var backgroundColor = _a.backgroundColor;
|
|
13752
13752
|
return backgroundColor;
|
|
13753
13753
|
}, function (_a) {
|
|
@@ -13777,9 +13777,9 @@ var IconButton = function (_a) {
|
|
|
13777
13777
|
var theme = useTheme();
|
|
13778
13778
|
return (jsxRuntime.jsx(Container$M, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13779
13779
|
};
|
|
13780
|
-
var templateObject_1
|
|
13780
|
+
var templateObject_1$11;
|
|
13781
13781
|
|
|
13782
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13782
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$10 || (templateObject_1$10 = __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; });
|
|
13783
13783
|
var AmazonButton = function (_a) {
|
|
13784
13784
|
var onClick = _a.onClick;
|
|
13785
13785
|
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13788,7 +13788,7 @@ var PaypalButton = function (_a) {
|
|
|
13788
13788
|
var onClick = _a.onClick;
|
|
13789
13789
|
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13790
13790
|
};
|
|
13791
|
-
var templateObject_1$
|
|
13791
|
+
var templateObject_1$10;
|
|
13792
13792
|
|
|
13793
13793
|
var Container$L = newStyled.div(function (props) { return ({
|
|
13794
13794
|
height: 'auto',
|
|
@@ -13843,9 +13843,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13843
13843
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$L, __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));
|
|
13844
13844
|
};
|
|
13845
13845
|
|
|
13846
|
-
var Container$K = newStyled.div(templateObject_1
|
|
13847
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13848
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13846
|
+
var Container$K = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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'); });
|
|
13847
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$L || (templateObject_2$L = __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'); });
|
|
13848
|
+
var StyledTitle = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13849
13849
|
var titlePosition = _a.titlePosition;
|
|
13850
13850
|
return titlePosition == 'center' &&
|
|
13851
13851
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13855,13 +13855,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13855
13855
|
var isMobile = useWindowDimensions().isMobile;
|
|
13856
13856
|
return (jsxRuntime.jsxs(Container$K, __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));
|
|
13857
13857
|
};
|
|
13858
|
-
var templateObject_1
|
|
13858
|
+
var templateObject_1$$, templateObject_2$L, templateObject_3$C;
|
|
13859
13859
|
|
|
13860
|
-
var Label$3 = newStyled.span(templateObject_1$
|
|
13860
|
+
var Label$3 = newStyled.span(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
13861
13861
|
var color = _a.color;
|
|
13862
13862
|
return color;
|
|
13863
13863
|
});
|
|
13864
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13864
|
+
var MandatoryIcon = newStyled.span(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13865
13865
|
var color = _a.color;
|
|
13866
13866
|
return color;
|
|
13867
13867
|
});
|
|
@@ -13870,7 +13870,7 @@ var InputLabel = function (_a) {
|
|
|
13870
13870
|
var theme = useTheme();
|
|
13871
13871
|
return (jsxRuntime.jsxs(Label$3, __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));
|
|
13872
13872
|
};
|
|
13873
|
-
var templateObject_1$
|
|
13873
|
+
var templateObject_1$_, templateObject_2$K;
|
|
13874
13874
|
|
|
13875
13875
|
var containerByStatus = function (theme, status) {
|
|
13876
13876
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13879,12 +13879,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13879
13879
|
return theme.colors.semantic.urgent.color;
|
|
13880
13880
|
return '';
|
|
13881
13881
|
};
|
|
13882
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13882
|
+
var Container$J = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13883
13883
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13884
13884
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13885
13885
|
});
|
|
13886
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13887
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13886
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
13887
|
+
var StyledInput = newStyled.input(templateObject_3$B || (templateObject_3$B = __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) {
|
|
13888
13888
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13889
13889
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13890
13890
|
}, function (_a) {
|
|
@@ -13939,11 +13939,11 @@ var StyledInput = newStyled.input(templateObject_3$z || (templateObject_3$z = __
|
|
|
13939
13939
|
return hasValue &&
|
|
13940
13940
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13941
13941
|
});
|
|
13942
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13942
|
+
var InputWrapper$1 = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
13943
13943
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13944
13944
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13945
13945
|
});
|
|
13946
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13946
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$k || (templateObject_5$k = __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) {
|
|
13947
13947
|
var theme = _a.theme;
|
|
13948
13948
|
return theme.component.input.placeholderColor;
|
|
13949
13949
|
}, function (_a) {
|
|
@@ -13957,7 +13957,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$j || (templateObject_5
|
|
|
13957
13957
|
return theme.component.input.lineHeight;
|
|
13958
13958
|
});
|
|
13959
13959
|
var ClearInput = newStyled.div(templateObject_6$i || (templateObject_6$i = __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"])));
|
|
13960
|
-
var templateObject_1$
|
|
13960
|
+
var templateObject_1$Z, templateObject_2$J, templateObject_3$B, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
13961
13961
|
|
|
13962
13962
|
var BaseInput = function (_a) {
|
|
13963
13963
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -13980,7 +13980,7 @@ var BaseInput = function (_a) {
|
|
|
13980
13980
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13981
13981
|
}, [status]);
|
|
13982
13982
|
var hasValue = Boolean(value);
|
|
13983
|
-
return (jsxRuntime.jsxs(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13983
|
+
return (jsxRuntime.jsxs(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper$1, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13984
13984
|
onChange(event.target.value, event);
|
|
13985
13985
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
13986
13986
|
onChange('', { target: { value: '' } });
|
|
@@ -14001,11 +14001,11 @@ var Button$5 = function (_a) {
|
|
|
14001
14001
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14002
14002
|
};
|
|
14003
14003
|
|
|
14004
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
14004
|
+
var Container$I = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
14005
14005
|
var theme = _a.theme;
|
|
14006
14006
|
return theme.component.inputCustom.input.borderRadius;
|
|
14007
14007
|
});
|
|
14008
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14008
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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) {
|
|
14009
14009
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14010
14010
|
return defaultRounded
|
|
14011
14011
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14022,21 +14022,21 @@ var Custom = function (_a) {
|
|
|
14022
14022
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14023
14023
|
return (jsxRuntime.jsx(Container$I, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14024
14024
|
};
|
|
14025
|
-
var templateObject_1$
|
|
14025
|
+
var templateObject_1$Y, templateObject_2$I;
|
|
14026
14026
|
|
|
14027
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14027
|
+
var SuccessContainer = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14028
14028
|
var size = _a.size;
|
|
14029
14029
|
return (size === 'small' ? '36px' : '');
|
|
14030
14030
|
});
|
|
14031
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14032
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14031
|
+
var SuccessMessage = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
14032
|
+
var SuccessText = newStyled.span(templateObject_3$A || (templateObject_3$A = __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"])));
|
|
14033
14033
|
var Success = function (_a) {
|
|
14034
14034
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14035
14035
|
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));
|
|
14036
14036
|
};
|
|
14037
|
-
var templateObject_1$
|
|
14037
|
+
var templateObject_1$X, templateObject_2$H, templateObject_3$A;
|
|
14038
14038
|
|
|
14039
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14039
|
+
var ButtonContainer = newStyled.div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
14040
14040
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14041
14041
|
return status === exports.InputValidationType.Empty &&
|
|
14042
14042
|
type === 'primary' &&
|
|
@@ -14053,16 +14053,16 @@ var BasePlusButton = function (_a) {
|
|
|
14053
14053
|
}
|
|
14054
14054
|
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));
|
|
14055
14055
|
};
|
|
14056
|
-
var templateObject_1$
|
|
14056
|
+
var templateObject_1$W;
|
|
14057
14057
|
|
|
14058
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14059
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14058
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14059
|
+
var IconContainer$2 = newStyled.div(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
14060
14060
|
var BasePlusIcon = function (_a) {
|
|
14061
14061
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14062
14062
|
var theme = useTheme();
|
|
14063
14063
|
return (jsxRuntime.jsx(Container$H, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14064
14064
|
};
|
|
14065
|
-
var templateObject_1$
|
|
14065
|
+
var templateObject_1$V, templateObject_2$G;
|
|
14066
14066
|
|
|
14067
14067
|
var Input$3 = {
|
|
14068
14068
|
Simple: BaseInput,
|
|
@@ -14107,7 +14107,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14107
14107
|
}, [preventTouch, ref, touchStart]);
|
|
14108
14108
|
}
|
|
14109
14109
|
|
|
14110
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14110
|
+
var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __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) {
|
|
14111
14111
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14112
14112
|
return borderRadiusVariant &&
|
|
14113
14113
|
"\n border-radius: 40px;\n ";
|
|
@@ -14116,10 +14116,10 @@ var Container$G = newStyled.div(templateObject_1$S || (templateObject_1$S = __ma
|
|
|
14116
14116
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14117
14117
|
});
|
|
14118
14118
|
// max-height: 31.875rem;
|
|
14119
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14120
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14121
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_4$
|
|
14122
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
14119
|
+
var TopTagContainer$5 = newStyled.div(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14120
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14121
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14122
|
+
var NavButtonContainer$2 = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14123
14123
|
var Button$4 = newStyled.button(templateObject_6$h || (templateObject_6$h = __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"])));
|
|
14124
14124
|
var settings$1 = {
|
|
14125
14125
|
dots: true,
|
|
@@ -14179,16 +14179,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14179
14179
|
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14180
14180
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14181
14181
|
};
|
|
14182
|
-
var templateObject_1$
|
|
14182
|
+
var templateObject_1$U, templateObject_2$F, templateObject_3$z, templateObject_4$q, templateObject_5$j, templateObject_6$h;
|
|
14183
14183
|
|
|
14184
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14184
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __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"])));
|
|
14185
14185
|
var ProductGalleryMobile = function (_a) {
|
|
14186
14186
|
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;
|
|
14187
14187
|
var _d = React$2.useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14188
14188
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14189
14189
|
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); } }, void 0) }), void 0));
|
|
14190
14190
|
};
|
|
14191
|
-
var templateObject_1$
|
|
14191
|
+
var templateObject_1$T;
|
|
14192
14192
|
|
|
14193
14193
|
function _extends() {
|
|
14194
14194
|
_extends = Object.assign || function (target) {
|
|
@@ -14455,14 +14455,14 @@ function useSwipeable(options) {
|
|
|
14455
14455
|
return handlers;
|
|
14456
14456
|
}
|
|
14457
14457
|
|
|
14458
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14458
|
+
var Button$3 = newStyled.button(templateObject_1$S || (templateObject_1$S = __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"])));
|
|
14459
14459
|
var ArrowButton = function (_a) {
|
|
14460
14460
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14461
14461
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14462
14462
|
};
|
|
14463
|
-
var templateObject_1$
|
|
14463
|
+
var templateObject_1$S;
|
|
14464
14464
|
|
|
14465
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14465
|
+
var Container$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __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"])));
|
|
14466
14466
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14467
14467
|
var SlideDots = function (_a) {
|
|
14468
14468
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14471,11 +14471,11 @@ var SlideDots = function (_a) {
|
|
|
14471
14471
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14472
14472
|
: 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));
|
|
14473
14473
|
};
|
|
14474
|
-
var templateObject_1$
|
|
14474
|
+
var templateObject_1$R;
|
|
14475
14475
|
|
|
14476
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14477
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14478
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14476
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
14477
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14478
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14479
14479
|
var SlideNavigation = function (_a) {
|
|
14480
14480
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14481
14481
|
var theme = useTheme();
|
|
@@ -14487,23 +14487,23 @@ var SlideNavigation = function (_a) {
|
|
|
14487
14487
|
onNavigate(selectedIndex + 1);
|
|
14488
14488
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14489
14489
|
};
|
|
14490
|
-
var templateObject_1$
|
|
14490
|
+
var templateObject_1$Q, templateObject_2$E, templateObject_3$y;
|
|
14491
14491
|
|
|
14492
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14492
|
+
var Container$D = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
14493
14493
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14494
14494
|
return borderRadiusVariant &&
|
|
14495
14495
|
"\n border-radius: 40px;\n ";
|
|
14496
14496
|
});
|
|
14497
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14498
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14497
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$D || (templateObject_2$D = __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'); });
|
|
14498
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14499
14499
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14500
14500
|
var _b, _c;
|
|
14501
14501
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14502
14502
|
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$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14503
14503
|
});
|
|
14504
|
-
var templateObject_1$
|
|
14504
|
+
var templateObject_1$P, templateObject_2$D, templateObject_3$x;
|
|
14505
14505
|
|
|
14506
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14506
|
+
var Container$C = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14507
14507
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14508
14508
|
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;
|
|
14509
14509
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14527,9 +14527,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14527
14527
|
}, [index, images]);
|
|
14528
14528
|
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));
|
|
14529
14529
|
};
|
|
14530
|
-
var templateObject_1$
|
|
14530
|
+
var templateObject_1$O;
|
|
14531
14531
|
|
|
14532
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
14532
|
+
var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __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) {
|
|
14533
14533
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14534
14534
|
return borderRadiusVariant &&
|
|
14535
14535
|
"\n border-radius: 40px;\n ";
|
|
@@ -14538,10 +14538,10 @@ var Container$B = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
14538
14538
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14539
14539
|
});
|
|
14540
14540
|
// max-height: 31.875rem;
|
|
14541
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14542
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14543
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14544
|
-
var Video = newStyled.div(templateObject_5$
|
|
14541
|
+
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'); });
|
|
14542
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14543
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
14544
|
+
var Video = newStyled.div(templateObject_5$i || (templateObject_5$i = __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"])));
|
|
14545
14545
|
var VideoTag = newStyled.div(templateObject_6$g || (templateObject_6$g = __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"])));
|
|
14546
14546
|
var Text$2 = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14547
14547
|
var NavButtonContainer$1 = newStyled.div(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
@@ -14603,14 +14603,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14603
14603
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14604
14604
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14605
14605
|
};
|
|
14606
|
-
var templateObject_1$
|
|
14606
|
+
var templateObject_1$N, templateObject_2$C, templateObject_3$w, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$f, templateObject_8$b, templateObject_9$7;
|
|
14607
14607
|
|
|
14608
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
14608
|
+
var Container$A = newStyled.div(templateObject_1$M || (templateObject_1$M = __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"])));
|
|
14609
14609
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14610
14610
|
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;
|
|
14611
14611
|
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));
|
|
14612
14612
|
};
|
|
14613
|
-
var templateObject_1$
|
|
14613
|
+
var templateObject_1$M;
|
|
14614
14614
|
|
|
14615
14615
|
var __defProp$1 = Object.defineProperty;
|
|
14616
14616
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14743,17 +14743,17 @@ var Portal = function (_a) {
|
|
|
14743
14743
|
var visibleStyle = function (_a) {
|
|
14744
14744
|
var opened = _a.opened;
|
|
14745
14745
|
return opened
|
|
14746
|
-
? css(templateObject_1$
|
|
14746
|
+
? css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14747
14747
|
};
|
|
14748
14748
|
var transformStyle = function (_a) {
|
|
14749
14749
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14750
14750
|
return opened
|
|
14751
|
-
? css(templateObject_3$
|
|
14751
|
+
? css(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14752
14752
|
};
|
|
14753
14753
|
var Container$z = newStyled.div(templateObject_6$f || (templateObject_6$f = __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 "".concat(props.maxFullScreen ? '0' : '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) {
|
|
14754
14754
|
var width = _a.width;
|
|
14755
14755
|
return width
|
|
14756
|
-
? css(templateObject_5$
|
|
14756
|
+
? css(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14757
14757
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14758
14758
|
});
|
|
14759
14759
|
}, visibleStyle, transformStyle);
|
|
@@ -14798,9 +14798,9 @@ var useModal = function (id) {
|
|
|
14798
14798
|
close: close,
|
|
14799
14799
|
}); }, [close, open, opened]);
|
|
14800
14800
|
};
|
|
14801
|
-
var templateObject_1$
|
|
14801
|
+
var templateObject_1$L, templateObject_2$B, templateObject_3$v, templateObject_4$o, templateObject_5$h, templateObject_6$f, templateObject_7$e;
|
|
14802
14802
|
|
|
14803
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14803
|
+
var Bar$1 = newStyled.div(templateObject_1$K || (templateObject_1$K = __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) {
|
|
14804
14804
|
var height = _a.height;
|
|
14805
14805
|
return height || '0.5rem';
|
|
14806
14806
|
}, function (_a) {
|
|
@@ -14872,19 +14872,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14872
14872
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14873
14873
|
return (jsxRuntime.jsxs(Container$y, __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("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14874
14874
|
};
|
|
14875
|
-
var templateObject_1$
|
|
14875
|
+
var templateObject_1$K;
|
|
14876
14876
|
|
|
14877
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14877
|
+
var Container$x = newStyled.div(templateObject_1$J || (templateObject_1$J = __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) {
|
|
14878
14878
|
var theme = _a.theme;
|
|
14879
14879
|
return theme.component.orderBar.backgroundColor;
|
|
14880
14880
|
});
|
|
14881
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14881
|
+
var H1 = newStyled.h1(templateObject_2$A || (templateObject_2$A = __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; });
|
|
14882
14882
|
var OrderBar = function (_a) {
|
|
14883
14883
|
var message = _a.message, color = _a.color;
|
|
14884
14884
|
var theme = useTheme();
|
|
14885
14885
|
return (jsxRuntime.jsxs(Container$x, __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));
|
|
14886
14886
|
};
|
|
14887
|
-
var templateObject_1$
|
|
14887
|
+
var templateObject_1$J, templateObject_2$A;
|
|
14888
14888
|
|
|
14889
14889
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14890
14890
|
background: props.bgColor,
|
|
@@ -14908,15 +14908,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14908
14908
|
justifyContent: 'center',
|
|
14909
14909
|
gap: '10px',
|
|
14910
14910
|
});
|
|
14911
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14911
|
+
var StyledContent = newStyled.div(templateObject_1$I || (templateObject_1$I = __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) {
|
|
14912
14912
|
var bgColor = _a.bgColor;
|
|
14913
14913
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14914
14914
|
}, function (_a) {
|
|
14915
14915
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14916
14916
|
return width;
|
|
14917
14917
|
});
|
|
14918
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14919
|
-
var templateObject_1$
|
|
14918
|
+
var StyledController = newStyled.div(templateObject_2$z || (templateObject_2$z = __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"])));
|
|
14919
|
+
var templateObject_1$I, templateObject_2$z;
|
|
14920
14920
|
|
|
14921
14921
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14922
14922
|
var background = _a.background, width = _a.width;
|
|
@@ -18736,11 +18736,11 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18736
18736
|
HTMLReactParser$1.attributesToProps;
|
|
18737
18737
|
HTMLReactParser$1.Element;
|
|
18738
18738
|
|
|
18739
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18740
|
-
var Card = newStyled.div(templateObject_2$
|
|
18741
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18742
|
-
var Label$2 = newStyled.div(templateObject_4$
|
|
18743
|
-
var Check = newStyled.div(templateObject_5$
|
|
18739
|
+
var Container$w = newStyled.div(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
18740
|
+
var Card$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18741
|
+
var Tag$1 = newStyled.div(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
18742
|
+
var Label$2 = newStyled.div(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
18743
|
+
var Check = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18744
18744
|
var IconContainer$1 = newStyled.div(templateObject_6$e || (templateObject_6$e = __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"])));
|
|
18745
18745
|
var IconPlaceholder = newStyled.div(templateObject_7$d || (templateObject_7$d = __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"])));
|
|
18746
18746
|
var DiscountContainer = newStyled.div(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
@@ -18760,7 +18760,7 @@ var PackCard = function (_a) {
|
|
|
18760
18760
|
.then(function (icon) { return setIcon(icon); })
|
|
18761
18761
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
18762
18762
|
}, [pack.meta.icon]);
|
|
18763
|
-
return (jsxRuntime.jsxs(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$2, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18763
|
+
return (jsxRuntime.jsxs(Card$1, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$2, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18764
18764
|
color: 'var(--colors-semantic-urgent-color)',
|
|
18765
18765
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
18766
18766
|
locale: 'en-US',
|
|
@@ -18773,14 +18773,14 @@ var PackCard = function (_a) {
|
|
|
18773
18773
|
currency: currencyCode || 'USD',
|
|
18774
18774
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18775
18775
|
};
|
|
18776
|
-
var templateObject_1$
|
|
18776
|
+
var templateObject_1$H, templateObject_2$y, templateObject_3$u, templateObject_4$n, templateObject_5$g, templateObject_6$e, templateObject_7$d, templateObject_8$a;
|
|
18777
18777
|
|
|
18778
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18779
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18780
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18778
|
+
var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
18779
|
+
var IconContainer = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18780
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18781
18781
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18782
18782
|
}));
|
|
18783
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18783
|
+
var PageNumber = newStyled.span(templateObject_4$m || (templateObject_4$m = __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) {
|
|
18784
18784
|
var bold = _a.bold;
|
|
18785
18785
|
return (bold ? '700' : '500');
|
|
18786
18786
|
}, function (_a) {
|
|
@@ -18797,7 +18797,7 @@ var PageNumber = newStyled.span(templateObject_4$l || (templateObject_4$l = __ma
|
|
|
18797
18797
|
var background = _a.background;
|
|
18798
18798
|
return background || 'unset';
|
|
18799
18799
|
});
|
|
18800
|
-
var templateObject_1$
|
|
18800
|
+
var templateObject_1$G, templateObject_2$x, templateObject_3$t, templateObject_4$m;
|
|
18801
18801
|
|
|
18802
18802
|
var Pagination = function (_a) {
|
|
18803
18803
|
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;
|
|
@@ -18862,7 +18862,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18862
18862
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18863
18863
|
};
|
|
18864
18864
|
|
|
18865
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
18865
|
+
var Container$u = newStyled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
18866
18866
|
var width = _a.width;
|
|
18867
18867
|
return width;
|
|
18868
18868
|
}, function (_a) {
|
|
@@ -18880,12 +18880,12 @@ var PaymentMethod = function (_a) {
|
|
|
18880
18880
|
var theme = useTheme();
|
|
18881
18881
|
return (jsxRuntime.jsx(Container$u, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
18882
18882
|
};
|
|
18883
|
-
var templateObject_1$
|
|
18883
|
+
var templateObject_1$F;
|
|
18884
18884
|
|
|
18885
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
18885
|
+
var Container$t = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
18886
18886
|
var IMAGE_WIDTH = '63px';
|
|
18887
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18888
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18887
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18888
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$s || (templateObject_3$s = __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({
|
|
18889
18889
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18890
18890
|
}), IMAGE_WIDTH);
|
|
18891
18891
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18908,7 +18908,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18908
18908
|
margin: margin,
|
|
18909
18909
|
});
|
|
18910
18910
|
});
|
|
18911
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18911
|
+
var PriceContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __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) {
|
|
18912
18912
|
var withTag = _a.withTag; _a.theme;
|
|
18913
18913
|
return withTag
|
|
18914
18914
|
? mediaQueries({
|
|
@@ -18917,7 +18917,7 @@ var PriceContainer = newStyled.div(templateObject_4$k || (templateObject_4$k = _
|
|
|
18917
18917
|
})
|
|
18918
18918
|
: 'justify-content: end';
|
|
18919
18919
|
});
|
|
18920
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18920
|
+
var Quantity = newStyled.div(templateObject_5$f || (templateObject_5$f = __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"])));
|
|
18921
18921
|
var StyledSpan = newStyled.span(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18922
18922
|
var SimpleOrderItem = function (_a) {
|
|
18923
18923
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
@@ -18925,7 +18925,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18925
18925
|
var theme = useTheme();
|
|
18926
18926
|
return (jsxRuntime.jsxs(Container$t, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title" }, { children: subtitle }), void 0), midElement, jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18927
18927
|
};
|
|
18928
|
-
var templateObject_1$
|
|
18928
|
+
var templateObject_1$E, templateObject_2$w, templateObject_3$s, templateObject_4$l, templateObject_5$f, templateObject_6$d;
|
|
18929
18929
|
|
|
18930
18930
|
var P$1 = newStyled.p(function (_a) {
|
|
18931
18931
|
var color = _a.color;
|
|
@@ -18939,7 +18939,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18939
18939
|
margin: '0.938rem 4.188rem',
|
|
18940
18940
|
});
|
|
18941
18941
|
});
|
|
18942
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18942
|
+
var Bar = newStyled.div(templateObject_1$D || (templateObject_1$D = __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) {
|
|
18943
18943
|
var height = _a.height;
|
|
18944
18944
|
return height || '0.5rem';
|
|
18945
18945
|
}, function (_a) {
|
|
@@ -18984,12 +18984,12 @@ var ProgressBar = function (_a) {
|
|
|
18984
18984
|
var theme = useTheme();
|
|
18985
18985
|
return (jsxRuntime.jsxs(Container$s, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18986
18986
|
};
|
|
18987
|
-
var templateObject_1$
|
|
18987
|
+
var templateObject_1$D;
|
|
18988
18988
|
|
|
18989
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
18990
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18991
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18992
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18989
|
+
var Container$r = newStyled.div(templateObject_1$C || (templateObject_1$C = __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; });
|
|
18990
|
+
var Item$1 = newStyled.span(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
18991
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$r || (templateObject_3$r = __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"])));
|
|
18992
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$k || (templateObject_4$k = __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)'; });
|
|
18993
18993
|
var QuantityPicker = function (_a) {
|
|
18994
18994
|
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;
|
|
18995
18995
|
var theme = useTheme();
|
|
@@ -19014,7 +19014,7 @@ var QuantityPicker = function (_a) {
|
|
|
19014
19014
|
}, [value, clamp]);
|
|
19015
19015
|
return (jsxRuntime.jsxs(Container$r, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19016
19016
|
};
|
|
19017
|
-
var templateObject_1$
|
|
19017
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$r, templateObject_4$k;
|
|
19018
19018
|
|
|
19019
19019
|
/* base styles & size variants */
|
|
19020
19020
|
var CustomRadioStyles$1 = {
|
|
@@ -19083,9 +19083,9 @@ var ContainerStyles$1 = {
|
|
|
19083
19083
|
},
|
|
19084
19084
|
};
|
|
19085
19085
|
|
|
19086
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19086
|
+
var Wrapper$3 = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19087
19087
|
var Container$q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19088
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19088
|
+
var Input$2 = newStyled.input(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19089
19089
|
var disabled = _a.disabled;
|
|
19090
19090
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19091
19091
|
});
|
|
@@ -19093,7 +19093,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19093
19093
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19094
19094
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19095
19095
|
]; });
|
|
19096
|
-
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$
|
|
19096
|
+
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$q || (templateObject_3$q = __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"])));
|
|
19097
19097
|
var RadioPrimary = function (_a) {
|
|
19098
19098
|
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;
|
|
19099
19099
|
var theme = useTheme();
|
|
@@ -19103,7 +19103,7 @@ var RadioPrimary = function (_a) {
|
|
|
19103
19103
|
};
|
|
19104
19104
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$q, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19105
19105
|
};
|
|
19106
|
-
var templateObject_1$
|
|
19106
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$q;
|
|
19107
19107
|
|
|
19108
19108
|
var RadioGroupInput = function (_a) {
|
|
19109
19109
|
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;
|
|
@@ -19182,9 +19182,9 @@ var ContainerStyles = {
|
|
|
19182
19182
|
},
|
|
19183
19183
|
};
|
|
19184
19184
|
|
|
19185
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19185
|
+
var Wrapper$2 = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
19186
19186
|
var Container$p = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19187
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19187
|
+
var Input$1 = newStyled.input(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19188
19188
|
var disabled = _a.disabled;
|
|
19189
19189
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19190
19190
|
});
|
|
@@ -19192,7 +19192,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19192
19192
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19193
19193
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19194
19194
|
]; });
|
|
19195
|
-
var StyledLabel = newStyled(Label$5)(templateObject_3$
|
|
19195
|
+
var StyledLabel = newStyled(Label$5)(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19196
19196
|
var theme = _a.theme;
|
|
19197
19197
|
return theme.component.radio.textSize;
|
|
19198
19198
|
}, function (_a) {
|
|
@@ -19208,7 +19208,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19208
19208
|
};
|
|
19209
19209
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$p, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19210
19210
|
};
|
|
19211
|
-
var templateObject_1$
|
|
19211
|
+
var templateObject_1$A, templateObject_2$t, templateObject_3$p;
|
|
19212
19212
|
|
|
19213
19213
|
var ClubRadioGroupInput = function (_a) {
|
|
19214
19214
|
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;
|
|
@@ -19236,11 +19236,11 @@ function formatDate(date, format) {
|
|
|
19236
19236
|
}
|
|
19237
19237
|
}
|
|
19238
19238
|
|
|
19239
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19240
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19241
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19242
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19243
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19239
|
+
var Container$o = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
19240
|
+
var Content$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
19241
|
+
var StarsContent = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19242
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
19243
|
+
var DateText$1 = newStyled.span(templateObject_5$e || (templateObject_5$e = __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"])));
|
|
19244
19244
|
var ReviewerName$1 = newStyled.h1(templateObject_6$c || (templateObject_6$c = __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"])));
|
|
19245
19245
|
var VerifiedText = newStyled.h1(templateObject_7$c || (templateObject_7$c = __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"])));
|
|
19246
19246
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
@@ -19277,15 +19277,15 @@ var Review$1 = function (_a) {
|
|
|
19277
19277
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$o, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19278
19278
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { 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));
|
|
19279
19279
|
};
|
|
19280
|
-
var templateObject_1$
|
|
19280
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$o, templateObject_4$j, templateObject_5$e, templateObject_6$c, templateObject_7$c, templateObject_8$9, templateObject_9$6, templateObject_10$6, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19281
19281
|
|
|
19282
19282
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19283
19283
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19284
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
19285
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19286
|
-
var Content = newStyled.div(templateObject_3$
|
|
19287
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19288
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19284
|
+
var Container$n = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
19285
|
+
var Heading = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19286
|
+
var Content = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19287
|
+
var ReviewContainer = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19288
|
+
var DateText = newStyled.span(templateObject_5$d || (templateObject_5$d = __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"])));
|
|
19289
19289
|
var VariantText = newStyled.div(templateObject_6$b || (templateObject_6$b = __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"])));
|
|
19290
19290
|
var ReviewerName = newStyled.h2(templateObject_7$b || (templateObject_7$b = __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"])));
|
|
19291
19291
|
var ReviewTitle = newStyled.h3(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
@@ -19333,13 +19333,13 @@ var Review = function (_a) {
|
|
|
19333
19333
|
: description,
|
|
19334
19334
|
} }, 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$1, __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));
|
|
19335
19335
|
};
|
|
19336
|
-
var templateObject_1$
|
|
19336
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$n, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$b, templateObject_8$8, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19337
19337
|
|
|
19338
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19339
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19340
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19341
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19342
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19338
|
+
var Container$m = newStyled.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
19339
|
+
var ReviewsContainer = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
19340
|
+
var ReviewsCount = newStyled.div(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
19341
|
+
var ReviewsStars = newStyled.div(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
19342
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$c || (templateObject_5$c = __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"])));
|
|
19343
19343
|
var ReviewsImages = newStyled.div(templateObject_6$a || (templateObject_6$a = __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"])));
|
|
19344
19344
|
var SummaryItem = newStyled.div(templateObject_7$a || (templateObject_7$a = __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) {
|
|
19345
19345
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -19351,17 +19351,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19351
19351
|
var theme = useTheme();
|
|
19352
19352
|
return (jsxRuntime.jsxs(Container$m, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19353
19353
|
};
|
|
19354
|
-
var templateObject_1$
|
|
19354
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$m, templateObject_4$h, templateObject_5$c, templateObject_6$a, templateObject_7$a;
|
|
19355
19355
|
|
|
19356
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19357
|
-
var Text = newStyled.p(templateObject_2$
|
|
19356
|
+
var Container$l = newStyled.div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
19357
|
+
var Text = newStyled.p(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
19358
19358
|
var ScrollToTop = function (_a) {
|
|
19359
19359
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19360
19360
|
var theme = useTheme();
|
|
19361
19361
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19362
19362
|
return (jsxRuntime.jsxs(Container$l, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19363
19363
|
};
|
|
19364
|
-
var templateObject_1$
|
|
19364
|
+
var templateObject_1$w, templateObject_2$p;
|
|
19365
19365
|
|
|
19366
19366
|
var Input = newStyled.input(function (props) { return ({
|
|
19367
19367
|
padding: props.theme.component.input.padding,
|
|
@@ -19392,7 +19392,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19392
19392
|
},
|
|
19393
19393
|
}); });
|
|
19394
19394
|
|
|
19395
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19395
|
+
var Container$k = newStyled.div(templateObject_1$v || (templateObject_1$v = __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({
|
|
19396
19396
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19397
19397
|
}));
|
|
19398
19398
|
var Description = newStyled.div({
|
|
@@ -19411,7 +19411,7 @@ var ProductItem = function (_a) {
|
|
|
19411
19411
|
var theme = useTheme();
|
|
19412
19412
|
return (jsxRuntime.jsxs(Container$k, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19413
19413
|
};
|
|
19414
|
-
var templateObject_1$
|
|
19414
|
+
var templateObject_1$v;
|
|
19415
19415
|
|
|
19416
19416
|
var Container$j = newStyled.div({
|
|
19417
19417
|
display: 'flex',
|
|
@@ -19427,7 +19427,7 @@ var Ul = newStyled.ul({
|
|
|
19427
19427
|
margin: '0px',
|
|
19428
19428
|
padding: '0px',
|
|
19429
19429
|
});
|
|
19430
|
-
var Li = newStyled.li(templateObject_1$
|
|
19430
|
+
var Li = newStyled.li(templateObject_1$u || (templateObject_1$u = __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({
|
|
19431
19431
|
padding: [0, '0rem 1rem'],
|
|
19432
19432
|
borderRadius: [0, '0.5rem'],
|
|
19433
19433
|
}));
|
|
@@ -19439,12 +19439,12 @@ var Anchor = newStyled.a({
|
|
|
19439
19439
|
padding: 0,
|
|
19440
19440
|
textDecoration: 'none',
|
|
19441
19441
|
});
|
|
19442
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19442
|
+
var Container$i = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
19443
19443
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19444
19444
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19445
19445
|
borderRadius: ['0', '0.5rem'],
|
|
19446
19446
|
}));
|
|
19447
|
-
var Header = newStyled.div(templateObject_3$
|
|
19447
|
+
var Header = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19448
19448
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19449
19449
|
}));
|
|
19450
19450
|
var ResultsPanel = function (_a) {
|
|
@@ -19452,9 +19452,9 @@ var ResultsPanel = function (_a) {
|
|
|
19452
19452
|
var theme = useTheme();
|
|
19453
19453
|
return (jsxRuntime.jsxs(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19454
19454
|
};
|
|
19455
|
-
var templateObject_1$
|
|
19455
|
+
var templateObject_1$u, templateObject_2$o, templateObject_3$l;
|
|
19456
19456
|
|
|
19457
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19457
|
+
var Button$1 = newStyled.button(templateObject_1$t || (templateObject_1$t = __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({
|
|
19458
19458
|
right: ['1rem', '7.75rem'],
|
|
19459
19459
|
top: ['0.75rem', '0.75rem'],
|
|
19460
19460
|
}));
|
|
@@ -19463,7 +19463,7 @@ var ClearButton = function (_a) {
|
|
|
19463
19463
|
var theme = useTheme();
|
|
19464
19464
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19465
19465
|
};
|
|
19466
|
-
var templateObject_1$
|
|
19466
|
+
var templateObject_1$t;
|
|
19467
19467
|
|
|
19468
19468
|
var SearchIconContainer = newStyled.div({
|
|
19469
19469
|
display: 'flex',
|
|
@@ -19473,7 +19473,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19473
19473
|
background: 'white',
|
|
19474
19474
|
alignSelf: 'center',
|
|
19475
19475
|
});
|
|
19476
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19476
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
19477
19477
|
var SearchControl = function (_a) {
|
|
19478
19478
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19479
19479
|
var theme = useTheme();
|
|
@@ -19489,7 +19489,7 @@ var SearchControl = function (_a) {
|
|
|
19489
19489
|
}
|
|
19490
19490
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19491
19491
|
};
|
|
19492
|
-
var templateObject_1$
|
|
19492
|
+
var templateObject_1$s;
|
|
19493
19493
|
|
|
19494
19494
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19495
19495
|
var reducer = function (state, action) {
|
|
@@ -19556,20 +19556,20 @@ var SearchBar = function (_a) {
|
|
|
19556
19556
|
} }, 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));
|
|
19557
19557
|
};
|
|
19558
19558
|
|
|
19559
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19560
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19561
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19562
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19563
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19559
|
+
var Container$g = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
19560
|
+
var BackArrow = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19561
|
+
var BoldSpan = newStyled.span(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
19562
|
+
var NormalSpan = newStyled.span(templateObject_4$g || (templateObject_4$g = __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"])));
|
|
19563
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
19564
19564
|
var SearchNavigation = function (_a) {
|
|
19565
19565
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19566
19566
|
return (jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19567
19567
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19568
19568
|
}) }, void 0)] }, void 0));
|
|
19569
19569
|
};
|
|
19570
|
-
var templateObject_1$
|
|
19570
|
+
var templateObject_1$r, templateObject_2$n, templateObject_3$k, templateObject_4$g, templateObject_5$b;
|
|
19571
19571
|
|
|
19572
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19572
|
+
var Container$f = newStyled.div(templateObject_1$q || (templateObject_1$q = __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) {
|
|
19573
19573
|
var alignCenter = _a.alignCenter;
|
|
19574
19574
|
return alignCenter &&
|
|
19575
19575
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19579,26 +19579,26 @@ var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __ma
|
|
|
19579
19579
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19580
19580
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19581
19581
|
});
|
|
19582
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19583
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19582
|
+
var TitleText = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19583
|
+
var BannerText = newStyled.div(templateObject_3$j || (templateObject_3$j = __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"])));
|
|
19584
19584
|
var ShortBanner = function (_a) {
|
|
19585
19585
|
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;
|
|
19586
19586
|
var theme = useTheme();
|
|
19587
19587
|
return (jsxRuntime.jsxs(Container$f, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19588
19588
|
};
|
|
19589
|
-
var templateObject_1$
|
|
19589
|
+
var templateObject_1$q, templateObject_2$m, templateObject_3$j;
|
|
19590
19590
|
|
|
19591
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19592
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19593
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19594
|
-
var Label$1 = newStyled('div')(templateObject_4$
|
|
19595
|
-
var TopLabel$1 = newStyled(Label$1)(templateObject_5$
|
|
19591
|
+
var TableElement$2 = newStyled.table(templateObject_1$p || (templateObject_1$p = __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; });
|
|
19592
|
+
var TableCell$2 = newStyled.td(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19593
|
+
var TableHead$2 = newStyled.th(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n 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; });
|
|
19594
|
+
var Label$1 = newStyled('div')(templateObject_4$f || (templateObject_4$f = __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"])));
|
|
19595
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19596
19596
|
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19597
19597
|
var Container$e = newStyled('div')(templateObject_7$9 || (templateObject_7$9 = __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"])));
|
|
19598
19598
|
var LabelText$1 = newStyled('span')(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19599
19599
|
var Column$1 = newStyled('div')(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19600
19600
|
var TableRow$2 = newStyled.tr(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19601
|
-
var templateObject_1$
|
|
19601
|
+
var templateObject_1$p, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$9, templateObject_8$7, templateObject_9$4, templateObject_10$4;
|
|
19602
19602
|
|
|
19603
19603
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19604
19604
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19639,16 +19639,16 @@ var SizeChartTable = function (_a) {
|
|
|
19639
19639
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(TableRow$2, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19640
19640
|
};
|
|
19641
19641
|
|
|
19642
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19643
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19644
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19645
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
19642
|
+
var TableElement$1 = newStyled.table(templateObject_1$o || (templateObject_1$o = __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; });
|
|
19643
|
+
var TableCell$1 = newStyled.td(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19644
|
+
var TableHead$1 = newStyled.th(templateObject_3$h || (templateObject_3$h = __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; });
|
|
19645
|
+
var TableRow$1 = newStyled.tr(templateObject_4$e || (templateObject_4$e = __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; });
|
|
19646
19646
|
var SizeTable = function (_a) {
|
|
19647
19647
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19648
19648
|
var theme = useTheme();
|
|
19649
19649
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19650
19650
|
};
|
|
19651
|
-
var templateObject_1$
|
|
19651
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$h, templateObject_4$e;
|
|
19652
19652
|
|
|
19653
19653
|
var getStylesBySize$7 = function (size) {
|
|
19654
19654
|
switch (size) {
|
|
@@ -19675,7 +19675,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19675
19675
|
} });
|
|
19676
19676
|
};
|
|
19677
19677
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19678
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19678
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$n || (templateObject_1$n = __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));
|
|
19679
19679
|
};
|
|
19680
19680
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19681
19681
|
if (disabled)
|
|
@@ -19691,23 +19691,23 @@ var TextButton = function (_a) {
|
|
|
19691
19691
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19692
19692
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
19693
19693
|
};
|
|
19694
|
-
var templateObject_1$
|
|
19694
|
+
var templateObject_1$n;
|
|
19695
19695
|
|
|
19696
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19697
|
-
var P = newStyled.p(templateObject_2$
|
|
19698
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19696
|
+
var Container$d = newStyled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
19697
|
+
var P = newStyled.p(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19698
|
+
var PercentageSpan = newStyled.span(templateObject_3$g || (templateObject_3$g = __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"])));
|
|
19699
19699
|
var SizeFitGuide = function (_a) {
|
|
19700
19700
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19701
19701
|
return (jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19702
19702
|
};
|
|
19703
|
-
var templateObject_1$
|
|
19703
|
+
var templateObject_1$m, templateObject_2$j, templateObject_3$g;
|
|
19704
19704
|
|
|
19705
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19705
|
+
var ButtonsContainer = newStyled.div(templateObject_1$l || (templateObject_1$l = __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) {
|
|
19706
19706
|
var inline = _a.inline;
|
|
19707
19707
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19708
19708
|
});
|
|
19709
|
-
var Row = newStyled.div(templateObject_2$
|
|
19710
|
-
var templateObject_1$
|
|
19709
|
+
var Row = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19710
|
+
var templateObject_1$l, templateObject_2$i;
|
|
19711
19711
|
|
|
19712
19712
|
var SizeSelector = function (_a) {
|
|
19713
19713
|
var _b;
|
|
@@ -19729,7 +19729,7 @@ var SizeSelector = function (_a) {
|
|
|
19729
19729
|
}) }), void 0)] }), void 0));
|
|
19730
19730
|
};
|
|
19731
19731
|
|
|
19732
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19732
|
+
var TabContainer = newStyled.div(templateObject_1$k || (templateObject_1$k = __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) {
|
|
19733
19733
|
var titleSize = _a.titleSize;
|
|
19734
19734
|
return titleSize;
|
|
19735
19735
|
}, function (_a) {
|
|
@@ -19746,18 +19746,18 @@ var Tab = function (_a) {
|
|
|
19746
19746
|
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;
|
|
19747
19747
|
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));
|
|
19748
19748
|
};
|
|
19749
|
-
var templateObject_1$
|
|
19749
|
+
var templateObject_1$k;
|
|
19750
19750
|
|
|
19751
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19752
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19751
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19752
|
+
var TabList = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19753
19753
|
var backgroundColor = _a.backgroundColor;
|
|
19754
19754
|
return backgroundColor;
|
|
19755
19755
|
}, function (_a) {
|
|
19756
19756
|
var borderColor = _a.borderColor;
|
|
19757
19757
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19758
19758
|
});
|
|
19759
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19760
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19759
|
+
var TabContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19760
|
+
var TabSeparator = newStyled.div(templateObject_4$d || (templateObject_4$d = __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"])));
|
|
19761
19761
|
var Tabs = function (_a) {
|
|
19762
19762
|
var _b;
|
|
19763
19763
|
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;
|
|
@@ -19768,14 +19768,14 @@ var Tabs = function (_a) {
|
|
|
19768
19768
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19769
19769
|
return (jsxRuntime.jsxs(Container$c, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19770
19770
|
};
|
|
19771
|
-
var templateObject_1$
|
|
19771
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$f, templateObject_4$d;
|
|
19772
19772
|
|
|
19773
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19773
|
+
var Container$b = newStyled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
19774
19774
|
var Tag = function (_a) {
|
|
19775
19775
|
var text = _a.text, className = _a.className;
|
|
19776
19776
|
return jsxRuntime.jsx(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19777
19777
|
};
|
|
19778
|
-
var templateObject_1$
|
|
19778
|
+
var templateObject_1$i;
|
|
19779
19779
|
|
|
19780
19780
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19781
19781
|
switch (size) {
|
|
@@ -19886,9 +19886,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19886
19886
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19887
19887
|
};
|
|
19888
19888
|
|
|
19889
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19890
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19891
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19889
|
+
var ImageWrapper = newStyled.div(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
19890
|
+
var VideoOverlay = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19891
|
+
var FullscreenVideo = newStyled.div(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
19892
19892
|
var ImageVideo = function (_a) {
|
|
19893
19893
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19894
19894
|
var video = React$2.useRef(null);
|
|
@@ -19908,12 +19908,12 @@ var ImageVideo = function (_a) {
|
|
|
19908
19908
|
height: '100%',
|
|
19909
19909
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19910
19910
|
};
|
|
19911
|
-
var templateObject_1$
|
|
19911
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$e;
|
|
19912
19912
|
|
|
19913
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19914
|
-
var ContainerMobile = css(templateObject_2$
|
|
19915
|
-
var Container$a = newStyled.div(templateObject_3$
|
|
19916
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19913
|
+
var ContainerDesktop = css(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
19914
|
+
var ContainerMobile = css(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19915
|
+
var Container$a = newStyled.div(templateObject_3$d || (templateObject_3$d = __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);
|
|
19916
|
+
var TextContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = __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"])));
|
|
19917
19917
|
var TextWithImage = function (_a) {
|
|
19918
19918
|
var _b, _c, _d, _e;
|
|
19919
19919
|
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"]);
|
|
@@ -19943,25 +19943,25 @@ var TextWithImage = function (_a) {
|
|
|
19943
19943
|
},
|
|
19944
19944
|
} }, 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));
|
|
19945
19945
|
};
|
|
19946
|
-
var templateObject_1$
|
|
19946
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$d, templateObject_4$c;
|
|
19947
19947
|
|
|
19948
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19948
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19949
19949
|
var timerColor = _a.timerColor;
|
|
19950
19950
|
return timerColor || '';
|
|
19951
19951
|
});
|
|
19952
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19952
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"], ["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"])), function (_a) {
|
|
19953
19953
|
var timerColor = _a.timerColor;
|
|
19954
19954
|
return timerColor || '';
|
|
19955
19955
|
});
|
|
19956
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19956
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$c || (templateObject_3$c = __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) {
|
|
19957
19957
|
var theme = _a.theme;
|
|
19958
19958
|
return theme.colors.shades.white.color;
|
|
19959
19959
|
}, function (_a) {
|
|
19960
19960
|
var theme = _a.theme;
|
|
19961
19961
|
return theme.colors.shades.white.color;
|
|
19962
19962
|
});
|
|
19963
|
-
var Unit = newStyled.p(templateObject_4$
|
|
19964
|
-
var templateObject_1$
|
|
19963
|
+
var Unit = newStyled.p(templateObject_4$b || (templateObject_4$b = __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"])));
|
|
19964
|
+
var templateObject_1$f, templateObject_2$e, templateObject_3$c, templateObject_4$b;
|
|
19965
19965
|
|
|
19966
19966
|
var HRS = 'HRS';
|
|
19967
19967
|
var MIN = 'MIN';
|
|
@@ -20002,9 +20002,9 @@ var Timer = function (_a) {
|
|
|
20002
20002
|
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));
|
|
20003
20003
|
};
|
|
20004
20004
|
|
|
20005
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20006
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20007
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20005
|
+
var Wrapper$1 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
20006
|
+
var GrandTotal = newStyled.h1(templateObject_2$d || (templateObject_2$d = __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; });
|
|
20007
|
+
var Currency = newStyled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
20008
20008
|
var theme = _a.theme;
|
|
20009
20009
|
return theme.component.total.basicTotal.currency.color;
|
|
20010
20010
|
}, function (_a) {
|
|
@@ -20017,11 +20017,11 @@ var Currency = newStyled.span(templateObject_3$9 || (templateObject_3$9 = __make
|
|
|
20017
20017
|
var theme = _a.theme;
|
|
20018
20018
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20019
20019
|
});
|
|
20020
|
-
var Container$9 = newStyled.div(templateObject_4$
|
|
20020
|
+
var Container$9 = newStyled.div(templateObject_4$a || (templateObject_4$a = __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) {
|
|
20021
20021
|
var highlightColor = _a.highlightColor;
|
|
20022
20022
|
return highlightColor;
|
|
20023
20023
|
});
|
|
20024
|
-
var TotalContainer = newStyled(Container$9)(templateObject_5$
|
|
20024
|
+
var TotalContainer = newStyled(Container$9)(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20025
20025
|
var showTotalLabel = _a.showTotalLabel;
|
|
20026
20026
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20027
20027
|
});
|
|
@@ -20031,7 +20031,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$8 || (templateObject_7$8 = __
|
|
|
20031
20031
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20032
20032
|
});
|
|
20033
20033
|
var TotalLabel = newStyled(Text$7)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20034
|
-
var templateObject_1$
|
|
20034
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$b, templateObject_4$a, templateObject_5$9, templateObject_6$8, templateObject_7$8, templateObject_8$6;
|
|
20035
20035
|
|
|
20036
20036
|
var Total = function (_a) {
|
|
20037
20037
|
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;
|
|
@@ -20039,19 +20039,19 @@ var Total = function (_a) {
|
|
|
20039
20039
|
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$9, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20040
20040
|
};
|
|
20041
20041
|
|
|
20042
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20042
|
+
var Wrapper = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20043
20043
|
var color = _a.color;
|
|
20044
20044
|
return color;
|
|
20045
20045
|
});
|
|
20046
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20047
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20046
|
+
var ItemContainer = newStyled.div(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
20047
|
+
var Item = newStyled.h4(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
20048
20048
|
var theme = _a.theme;
|
|
20049
20049
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20050
20050
|
}, function (_a) {
|
|
20051
20051
|
var theme = _a.theme;
|
|
20052
20052
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20053
20053
|
});
|
|
20054
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20054
|
+
var CouponItem = newStyled(Item)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20055
20055
|
var color = _a.color;
|
|
20056
20056
|
return color;
|
|
20057
20057
|
});
|
|
@@ -20064,18 +20064,18 @@ var Subtotal = function (_a) {
|
|
|
20064
20064
|
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));
|
|
20065
20065
|
})] }), void 0));
|
|
20066
20066
|
};
|
|
20067
|
-
var templateObject_1$
|
|
20067
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$9;
|
|
20068
20068
|
|
|
20069
20069
|
var Totals = {
|
|
20070
20070
|
Total: Total,
|
|
20071
20071
|
Subtotal: Subtotal,
|
|
20072
20072
|
};
|
|
20073
20073
|
|
|
20074
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
20075
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20076
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20077
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20078
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20074
|
+
var Container$8 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20075
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20076
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20077
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20078
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
20079
20079
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$7 || (templateObject_6$7 = __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) {
|
|
20080
20080
|
return props.finishedTrack
|
|
20081
20081
|
? props.finishedTrackColor
|
|
@@ -20123,13 +20123,13 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20123
20123
|
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));
|
|
20124
20124
|
})] }), void 0));
|
|
20125
20125
|
};
|
|
20126
|
-
var templateObject_1$
|
|
20126
|
+
var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$8, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$5, templateObject_9$3, templateObject_10$3, templateObject_11$2;
|
|
20127
20127
|
|
|
20128
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20129
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20130
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20131
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20132
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20128
|
+
var Container$7 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20129
|
+
var CheckpointContainer = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20130
|
+
var CheckpointDate = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20131
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$7 || (templateObject_4$7 = __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'); });
|
|
20132
|
+
var CheckpointStatus = newStyled.p(templateObject_5$7 || (templateObject_5$7 = __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'); });
|
|
20133
20133
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __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) {
|
|
20134
20134
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20135
20135
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20163,9 +20163,9 @@ var TrackingProgress = function (_a) {
|
|
|
20163
20163
|
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));
|
|
20164
20164
|
})] }), void 0));
|
|
20165
20165
|
};
|
|
20166
|
-
var templateObject_1$
|
|
20166
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$8, templateObject_4$7, templateObject_5$7, templateObject_6$6, templateObject_7$6, templateObject_8$4;
|
|
20167
20167
|
|
|
20168
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20168
|
+
var TimerContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
20169
20169
|
var textPosition = _a.textPosition;
|
|
20170
20170
|
return textPosition;
|
|
20171
20171
|
}, function (_a) {
|
|
@@ -20178,7 +20178,7 @@ var TimerContainer = newStyled.div(templateObject_1$8 || (templateObject_1$8 = _
|
|
|
20178
20178
|
var borderRadius = _a.borderRadius;
|
|
20179
20179
|
return borderRadius || '8px';
|
|
20180
20180
|
});
|
|
20181
|
-
var templateObject_1$
|
|
20181
|
+
var templateObject_1$a;
|
|
20182
20182
|
|
|
20183
20183
|
var getDefaultCountdown = function () {
|
|
20184
20184
|
var tomorrowDate = new Date();
|
|
@@ -20194,7 +20194,7 @@ var HurryUp = function (_a) {
|
|
|
20194
20194
|
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));
|
|
20195
20195
|
};
|
|
20196
20196
|
|
|
20197
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
20197
|
+
var Container$6 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
20198
20198
|
var size = _a.size;
|
|
20199
20199
|
return (size ? size : '100%');
|
|
20200
20200
|
}, function (_a) {
|
|
@@ -20208,7 +20208,7 @@ var borderSize = {
|
|
|
20208
20208
|
large: '3px',
|
|
20209
20209
|
};
|
|
20210
20210
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20211
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20211
|
+
var StyledSpinner = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __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) {
|
|
20212
20212
|
var size = _a.size;
|
|
20213
20213
|
return borderSize[size];
|
|
20214
20214
|
}, function (_a) {
|
|
@@ -20221,7 +20221,7 @@ var StyledSpinner = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __
|
|
|
20221
20221
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20222
20222
|
return duration;
|
|
20223
20223
|
});
|
|
20224
|
-
var templateObject_1$
|
|
20224
|
+
var templateObject_1$9, templateObject_2$9;
|
|
20225
20225
|
|
|
20226
20226
|
var Spinner = function (_a) {
|
|
20227
20227
|
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;
|
|
@@ -20242,9 +20242,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20242
20242
|
var Shades700Color = '#292929';
|
|
20243
20243
|
var PrimaryColor = '#f7a08b';
|
|
20244
20244
|
var ClubBorderColor = '#882a2b';
|
|
20245
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
20246
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
20247
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
20245
|
+
var FlexContainer = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20246
|
+
var DiscountTag = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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);
|
|
20247
|
+
var ContainerBase = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __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) {
|
|
20248
20248
|
var selected = _a.selected;
|
|
20249
20249
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20250
20250
|
}, function (_a) {
|
|
@@ -20253,14 +20253,14 @@ var ContainerBase = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __
|
|
|
20253
20253
|
? "& label {\n font-weight: 700;\n }"
|
|
20254
20254
|
: '';
|
|
20255
20255
|
}, PrimaryColor);
|
|
20256
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$
|
|
20256
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$6 || (templateObject_4$6 = __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) {
|
|
20257
20257
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20258
20258
|
return (isNoMember && selected ? Shades700Color : '');
|
|
20259
20259
|
}, function (_a) {
|
|
20260
20260
|
var onClick = _a.onClick;
|
|
20261
20261
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20262
20262
|
});
|
|
20263
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
20263
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
20264
20264
|
var SubscriptionHeader = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __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) {
|
|
20265
20265
|
var isSelected = _a.isSelected;
|
|
20266
20266
|
return (isSelected ? "1px solid ".concat(Shades200Color) : "none");
|
|
@@ -20285,7 +20285,7 @@ var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_10$2 || (templateObje
|
|
|
20285
20285
|
: Shades200Color;
|
|
20286
20286
|
});
|
|
20287
20287
|
var Container$5 = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20288
|
-
var templateObject_1$
|
|
20288
|
+
var templateObject_1$8, templateObject_2$8, templateObject_3$7, templateObject_4$6, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$1;
|
|
20289
20289
|
|
|
20290
20290
|
var ClubOfferSelector = function (_a) {
|
|
20291
20291
|
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;
|
|
@@ -20331,6 +20331,49 @@ var ClubOfferSelector = function (_a) {
|
|
|
20331
20331
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsxRuntime.jsx(BenefitsContainer, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsxRuntime.jsx(Benefit, { children: jsxRuntime.jsx(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __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, { isNoMember: true, testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20332
20332
|
};
|
|
20333
20333
|
|
|
20334
|
+
var LabelWrapper = newStyled.label(templateObject_1$7 || (templateObject_1$7 = __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"])));
|
|
20335
|
+
var SwitchWrapper = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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"])));
|
|
20336
|
+
var InputWrapper = newStyled.input(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])));
|
|
20337
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$6;
|
|
20338
|
+
|
|
20339
|
+
var ToggleComponent = function (_a) {
|
|
20340
|
+
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
20341
|
+
var _c = React$2.useState(isChecked), checked = _c[0], setChecked = _c[1];
|
|
20342
|
+
var handleChange = function (e) {
|
|
20343
|
+
setChecked(function (value) { return !value; });
|
|
20344
|
+
onToggle(e.target.checked);
|
|
20345
|
+
};
|
|
20346
|
+
return (jsxRuntime.jsxs(LabelWrapper, { children: [jsxRuntime.jsx(InputWrapper, { checked: checked, type: "checkbox", onChange: handleChange, value: "".concat(checked) }, void 0), jsxRuntime.jsx(SwitchWrapper, {}, void 0)] }, void 0));
|
|
20347
|
+
};
|
|
20348
|
+
|
|
20349
|
+
var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: white;\n max-width: 360px;\n gap: 8px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: white;\n max-width: 360px;\n gap: 8px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
20350
|
+
var $checked = _a.$checked;
|
|
20351
|
+
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20352
|
+
}, function (_a) {
|
|
20353
|
+
var $checked = _a.$checked;
|
|
20354
|
+
return ($checked ? '#FFE1B8' : '#E5E5E5');
|
|
20355
|
+
});
|
|
20356
|
+
var CardHeaderWrapper = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __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"])));
|
|
20357
|
+
var CardBody = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n font-family: Avenir Next;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: column;\n font-family: Avenir Next;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20358
|
+
var ClubCopyWrapper = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n"])));
|
|
20359
|
+
var ClubCopyTextWrapper = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-family: Avenir Next;\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-family: Avenir Next;\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20360
|
+
var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$5;
|
|
20361
|
+
|
|
20362
|
+
function Card(_a) {
|
|
20363
|
+
var children = _a.children, link = _a.link, srcImage = _a.srcImage, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20364
|
+
return (jsxRuntime.jsxs(ContainerWrapper, __assign$1({ "$checked": isChecked }, { children: [jsxRuntime.jsxs(CardHeaderWrapper, { children: [jsxRuntime.jsxs(ClubCopyWrapper, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("img", { src: srcImage, alt: "" }, void 0) }, void 0), jsxRuntime.jsx(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsxRuntime.jsx("div", { children: children }, void 0)] }, void 0), jsxRuntime.jsxs(CardBody, { children: [bodyCopy, ' ', jsxRuntime.jsx("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }, void 0)] }), void 0));
|
|
20365
|
+
}
|
|
20366
|
+
|
|
20367
|
+
function JoinClubCard(_a) {
|
|
20368
|
+
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, srcImage = _a.srcImage, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20369
|
+
var _b = React$2.useState(isChecked), checked = _b[0], setChecked = _b[1];
|
|
20370
|
+
var handleToggleValue = function (value) {
|
|
20371
|
+
setChecked(value);
|
|
20372
|
+
onCheckToggle(value);
|
|
20373
|
+
};
|
|
20374
|
+
return (jsxRuntime.jsx(Card, __assign$1({ link: link, srcImage: srcImage, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy }, { children: jsxRuntime.jsx(ToggleComponent, { onToggle: handleToggleValue, isChecked: isChecked }, void 0) }), void 0));
|
|
20375
|
+
}
|
|
20376
|
+
|
|
20334
20377
|
var ImageContainer$1 = newStyled.div(function (_a) {
|
|
20335
20378
|
var width = _a.width, height = _a.height;
|
|
20336
20379
|
return ({
|
|
@@ -20788,7 +20831,7 @@ exports.ButtonSecondary = ButtonSecondary;
|
|
|
20788
20831
|
exports.ButtonSecondaryOutline = ButtonSecondaryOutline;
|
|
20789
20832
|
exports.BuyNowPayLater = BuyNowPayLater;
|
|
20790
20833
|
exports.CancellationFlowAccordionContentPerPartner = CancellationFlowAccordionContentPerPartner;
|
|
20791
|
-
exports.Card = Card$
|
|
20834
|
+
exports.Card = Card$3;
|
|
20792
20835
|
exports.CartProductItem = CartProductItem;
|
|
20793
20836
|
exports.CategorySquareTag = CategorySquareTag;
|
|
20794
20837
|
exports.CategoryTag = CategoryTag;
|
|
@@ -20817,6 +20860,7 @@ exports.IconsWithTitle = IconsWithTitle;
|
|
|
20817
20860
|
exports.Image = Image$3;
|
|
20818
20861
|
exports.ImageCardWithDescription = ImageCardWithDescription;
|
|
20819
20862
|
exports.Input = Input$3;
|
|
20863
|
+
exports.JoinClubCard = JoinClubCard;
|
|
20820
20864
|
exports.LibIcon = Icon$1;
|
|
20821
20865
|
exports.Modal = Modal;
|
|
20822
20866
|
exports.MotivatorProgressBar = MotivatorProgressBar;
|