@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.esm.js
CHANGED
|
@@ -3127,7 +3127,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3127
3127
|
desktop: 1280,
|
|
3128
3128
|
};
|
|
3129
3129
|
|
|
3130
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
3130
|
+
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) {
|
|
3131
3131
|
var height = _a.height;
|
|
3132
3132
|
return (height ? height : '1.5em');
|
|
3133
3133
|
}, function (_a) {
|
|
@@ -3154,9 +3154,9 @@ var SkeletonBox = function (_a) {
|
|
|
3154
3154
|
var theme = useTheme();
|
|
3155
3155
|
return jsx$1(Container$1j, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3156
3156
|
};
|
|
3157
|
-
var templateObject_1$
|
|
3157
|
+
var templateObject_1$29;
|
|
3158
3158
|
|
|
3159
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3159
|
+
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) {
|
|
3160
3160
|
var width = _a.width;
|
|
3161
3161
|
return width;
|
|
3162
3162
|
}, function (_a) {
|
|
@@ -3172,7 +3172,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$26 || (templateObject_1$26
|
|
|
3172
3172
|
var opacity = _a.opacity;
|
|
3173
3173
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3174
3174
|
});
|
|
3175
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3175
|
+
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) {
|
|
3176
3176
|
var width = _a.width;
|
|
3177
3177
|
return width;
|
|
3178
3178
|
}, function (_a) {
|
|
@@ -3185,7 +3185,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1s || (templateObject_2$
|
|
|
3185
3185
|
var opacity = _a.opacity;
|
|
3186
3186
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3187
3187
|
});
|
|
3188
|
-
var templateObject_1$
|
|
3188
|
+
var templateObject_1$28, templateObject_2$1u;
|
|
3189
3189
|
|
|
3190
3190
|
/* eslint-disable no-undef */
|
|
3191
3191
|
var cache = new Map();
|
|
@@ -3361,7 +3361,7 @@ var buildImageUrl = function (_a) {
|
|
|
3361
3361
|
}
|
|
3362
3362
|
};
|
|
3363
3363
|
|
|
3364
|
-
var Img = newStyled.img(templateObject_1$
|
|
3364
|
+
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; });
|
|
3365
3365
|
var Image$3 = function (_a) {
|
|
3366
3366
|
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"]);
|
|
3367
3367
|
var config = useTheme().config;
|
|
@@ -3370,7 +3370,7 @@ var Image$3 = function (_a) {
|
|
|
3370
3370
|
: src;
|
|
3371
3371
|
return (jsx$1(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));
|
|
3372
3372
|
};
|
|
3373
|
-
var templateObject_1$
|
|
3373
|
+
var templateObject_1$27;
|
|
3374
3374
|
|
|
3375
3375
|
var CardSectionType;
|
|
3376
3376
|
(function (CardSectionType) {
|
|
@@ -3426,7 +3426,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3426
3426
|
};
|
|
3427
3427
|
}
|
|
3428
3428
|
};
|
|
3429
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
3429
|
+
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) {
|
|
3430
3430
|
var backgroundColor = _a.backgroundColor;
|
|
3431
3431
|
return backgroundColor;
|
|
3432
3432
|
}, function (_a) {
|
|
@@ -3448,7 +3448,7 @@ var Container$1i = newStyled.div(templateObject_1$24 || (templateObject_1$24 = _
|
|
|
3448
3448
|
var size = _a.size;
|
|
3449
3449
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3450
3450
|
});
|
|
3451
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3451
|
+
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) {
|
|
3452
3452
|
var textColor = _a.textColor;
|
|
3453
3453
|
return textColor;
|
|
3454
3454
|
}, function (_a) {
|
|
@@ -3465,7 +3465,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3465
3465
|
var theme = useTheme();
|
|
3466
3466
|
return (jsx$1(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: jsx$1(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));
|
|
3467
3467
|
};
|
|
3468
|
-
var templateObject_1$
|
|
3468
|
+
var templateObject_1$26, templateObject_2$1t;
|
|
3469
3469
|
|
|
3470
3470
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3471
3471
|
var _a, _b, _c;
|
|
@@ -3496,7 +3496,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3496
3496
|
};
|
|
3497
3497
|
}
|
|
3498
3498
|
};
|
|
3499
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
3499
|
+
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) {
|
|
3500
3500
|
var backgroundColor = _a.backgroundColor;
|
|
3501
3501
|
return backgroundColor;
|
|
3502
3502
|
}, function (_a) {
|
|
@@ -3518,7 +3518,7 @@ var Container$1h = newStyled.div(templateObject_1$23 || (templateObject_1$23 = _
|
|
|
3518
3518
|
var size = _a.size;
|
|
3519
3519
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3520
3520
|
});
|
|
3521
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3521
|
+
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) {
|
|
3522
3522
|
var textColor = _a.textColor;
|
|
3523
3523
|
return textColor;
|
|
3524
3524
|
}, function (_a) {
|
|
@@ -3535,7 +3535,7 @@ var DiscountTag$2 = function (_a) {
|
|
|
3535
3535
|
var theme = useTheme();
|
|
3536
3536
|
return (jsx$1(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: jsxs$1(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));
|
|
3537
3537
|
};
|
|
3538
|
-
var templateObject_1$
|
|
3538
|
+
var templateObject_1$25, templateObject_2$1s;
|
|
3539
3539
|
|
|
3540
3540
|
function getWindowDimensions() {
|
|
3541
3541
|
if (typeof window === 'undefined')
|
|
@@ -3630,8 +3630,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3630
3630
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3631
3631
|
}
|
|
3632
3632
|
};
|
|
3633
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
3634
|
-
var Price = newStyled.p(templateObject_2$
|
|
3633
|
+
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"])));
|
|
3634
|
+
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) {
|
|
3635
3635
|
var weight = _a.weight;
|
|
3636
3636
|
return (weight ? weight : '400');
|
|
3637
3637
|
}, function (_a) {
|
|
@@ -3655,7 +3655,7 @@ var Price = newStyled.p(templateObject_2$1p || (templateObject_2$1p = __makeTemp
|
|
|
3655
3655
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3656
3656
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
3657
3657
|
});
|
|
3658
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3658
|
+
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) {
|
|
3659
3659
|
var _b;
|
|
3660
3660
|
var size = _a.size;
|
|
3661
3661
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3688,9 +3688,9 @@ var PriceLabel$1 = function (_a) {
|
|
|
3688
3688
|
};
|
|
3689
3689
|
return (jsxs$1(Container$1g, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3690
3690
|
};
|
|
3691
|
-
var templateObject_1$
|
|
3691
|
+
var templateObject_1$24, templateObject_2$1r, templateObject_3$18;
|
|
3692
3692
|
|
|
3693
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3693
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3694
3694
|
var PriceLabelV2$1 = function (_a) {
|
|
3695
3695
|
var _b;
|
|
3696
3696
|
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 ? 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"]);
|
|
@@ -3761,11 +3761,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3761
3761
|
lineHeight: '22px',
|
|
3762
3762
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3763
3763
|
};
|
|
3764
|
-
var templateObject_1$
|
|
3764
|
+
var templateObject_1$23;
|
|
3765
3765
|
|
|
3766
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3767
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3768
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3766
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3767
|
+
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"])));
|
|
3768
|
+
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"])));
|
|
3769
3769
|
var PriceLabelV3 = function (_a) {
|
|
3770
3770
|
var _b;
|
|
3771
3771
|
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 ? 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"]);
|
|
@@ -3836,9 +3836,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3836
3836
|
lineHeight: '22px',
|
|
3837
3837
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3838
3838
|
};
|
|
3839
|
-
var templateObject_1$
|
|
3839
|
+
var templateObject_1$22, templateObject_2$1q, templateObject_3$17;
|
|
3840
3840
|
|
|
3841
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3841
|
+
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"])));
|
|
3842
3842
|
var PriceLabel = function (_a) {
|
|
3843
3843
|
var _b;
|
|
3844
3844
|
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 ? ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
@@ -3872,9 +3872,9 @@ var PriceLabel = function (_a) {
|
|
|
3872
3872
|
marginTop: '-6px',
|
|
3873
3873
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3874
3874
|
};
|
|
3875
|
-
var templateObject_1$
|
|
3875
|
+
var templateObject_1$21;
|
|
3876
3876
|
|
|
3877
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3877
|
+
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"])));
|
|
3878
3878
|
var PriceLabelV2 = function (_a) {
|
|
3879
3879
|
var _b;
|
|
3880
3880
|
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 ? ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
@@ -3907,7 +3907,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
3907
3907
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3908
3908
|
return (jsxs$1(Container$1g, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3909
3909
|
};
|
|
3910
|
-
var templateObject_1$
|
|
3910
|
+
var templateObject_1$20;
|
|
3911
3911
|
|
|
3912
3912
|
var Add = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3913
3913
|
|
|
@@ -4731,11 +4731,11 @@ function jsxs(type, props, key) {
|
|
|
4731
4731
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4732
4732
|
// `variants` styles that are consistent through all themes.
|
|
4733
4733
|
var TAGS = {
|
|
4734
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4735
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4736
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4737
|
-
display1: newStyled.h1(templateObject_4$
|
|
4738
|
-
display2: newStyled.h2(templateObject_5$
|
|
4734
|
+
hero1: newStyled.h1(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject([""], [""]))),
|
|
4735
|
+
hero2: newStyled.h2(templateObject_2$1p || (templateObject_2$1p = __makeTemplateObject([""], [""]))),
|
|
4736
|
+
hero3: newStyled.h3(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject([""], [""]))),
|
|
4737
|
+
display1: newStyled.h1(templateObject_4$T || (templateObject_4$T = __makeTemplateObject([""], [""]))),
|
|
4738
|
+
display2: newStyled.h2(templateObject_5$E || (templateObject_5$E = __makeTemplateObject([""], [""]))),
|
|
4739
4739
|
display3: newStyled.h3(templateObject_6$y || (templateObject_6$y = __makeTemplateObject([""], [""]))),
|
|
4740
4740
|
heading1: newStyled.h1(templateObject_7$p || (templateObject_7$p = __makeTemplateObject([""], [""]))),
|
|
4741
4741
|
heading2: newStyled.h2(templateObject_8$k || (templateObject_8$k = __makeTemplateObject([""], [""]))),
|
|
@@ -4867,13 +4867,13 @@ var DEFAULTS = {
|
|
|
4867
4867
|
size: 'regular',
|
|
4868
4868
|
},
|
|
4869
4869
|
};
|
|
4870
|
-
var templateObject_1$
|
|
4870
|
+
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;
|
|
4871
4871
|
|
|
4872
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
4873
|
-
var Card$
|
|
4874
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4875
|
-
var Label$6 = newStyled.div(templateObject_4$
|
|
4876
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4872
|
+
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"])));
|
|
4873
|
+
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"])));
|
|
4874
|
+
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"])));
|
|
4875
|
+
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"])));
|
|
4876
|
+
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"])));
|
|
4877
4877
|
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"])));
|
|
4878
4878
|
var PackSelectorV2 = function (_a) {
|
|
4879
4879
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -4891,7 +4891,7 @@ var PackCard$1 = function (_a) {
|
|
|
4891
4891
|
.then(function (icon) { return setIcon(icon); })
|
|
4892
4892
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4893
4893
|
}, [pack.meta.icon]);
|
|
4894
|
-
return (jsxs$1(Card$
|
|
4894
|
+
return (jsxs$1(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 ? (jsx$1(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$6, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsx$1(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(DiscountContainer$1, { children: [jsx$1(Text$7, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
4895
4895
|
locale: 'en-US',
|
|
4896
4896
|
currency: currencyCode || 'USD',
|
|
4897
4897
|
}) }), void 0), pack.meta.quantity > 1 ? (jsxs$1(Text$7, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
@@ -4899,27 +4899,27 @@ var PackCard$1 = function (_a) {
|
|
|
4899
4899
|
currency: currencyCode || 'USD',
|
|
4900
4900
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4901
4901
|
};
|
|
4902
|
-
var templateObject_1$
|
|
4902
|
+
var templateObject_1$1_, templateObject_2$1o, templateObject_3$15, templateObject_4$S, templateObject_5$D, templateObject_6$x;
|
|
4903
4903
|
|
|
4904
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
4905
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4904
|
+
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"])));
|
|
4905
|
+
var DropContainer = newStyled.div(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4906
4906
|
var DropList = function (_a) {
|
|
4907
4907
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4908
4908
|
return (jsx$1(Container$1e, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4909
4909
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4910
4910
|
}) }, void 0));
|
|
4911
4911
|
};
|
|
4912
|
-
var templateObject_1$
|
|
4912
|
+
var templateObject_1$1Z, templateObject_2$1n;
|
|
4913
4913
|
|
|
4914
4914
|
var DROPS_TOTAL = 5;
|
|
4915
|
-
var Container$1d = newStyled.div(templateObject_1$
|
|
4916
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4917
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4915
|
+
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"])));
|
|
4916
|
+
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"])));
|
|
4917
|
+
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"])));
|
|
4918
4918
|
var AbsorbencyLevel = function (_a) {
|
|
4919
4919
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4920
4920
|
return (jsxs$1(Container$1d, { children: [jsx$1(Title$b, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4921
4921
|
};
|
|
4922
|
-
var templateObject_1$
|
|
4922
|
+
var templateObject_1$1Y, templateObject_2$1m, templateObject_3$14;
|
|
4923
4923
|
|
|
4924
4924
|
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]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),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===Fragment$1&&Object.keys(l).length>0){if(!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(`
|
|
4925
4925
|
`),"","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(`
|
|
@@ -4995,7 +4995,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4995
4995
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4996
4996
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4997
4997
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4998
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
4998
|
+
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"])));
|
|
4999
4999
|
var Accordion$1 = function (_a) {
|
|
5000
5000
|
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;
|
|
5001
5001
|
var theme = useTheme();
|
|
@@ -5019,9 +5019,9 @@ var Accordion$1 = function (_a) {
|
|
|
5019
5019
|
} }, { children: jsx$1(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 && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5020
5020
|
} }), void 0));
|
|
5021
5021
|
};
|
|
5022
|
-
var templateObject_1$
|
|
5022
|
+
var templateObject_1$1X;
|
|
5023
5023
|
|
|
5024
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
5024
|
+
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"])));
|
|
5025
5025
|
var AccordionOptions = function (_a) {
|
|
5026
5026
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5027
5027
|
var _b = useState({
|
|
@@ -5045,7 +5045,7 @@ var AccordionOptions = function (_a) {
|
|
|
5045
5045
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5046
5046
|
}) }, void 0));
|
|
5047
5047
|
};
|
|
5048
|
-
var templateObject_1$
|
|
5048
|
+
var templateObject_1$1W;
|
|
5049
5049
|
|
|
5050
5050
|
/**
|
|
5051
5051
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5181,22 +5181,22 @@ var isValidDate = function (value) {
|
|
|
5181
5181
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5182
5182
|
};
|
|
5183
5183
|
|
|
5184
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5185
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5186
|
-
var templateObject_1$
|
|
5184
|
+
var Bold = newStyled.span(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5185
|
+
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"])));
|
|
5186
|
+
var templateObject_1$1V, templateObject_2$1l;
|
|
5187
5187
|
|
|
5188
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
5188
|
+
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) {
|
|
5189
5189
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5190
5190
|
return width;
|
|
5191
5191
|
}, function (_a) {
|
|
5192
5192
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5193
5193
|
return height;
|
|
5194
5194
|
});
|
|
5195
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5196
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5197
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5198
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5199
|
-
var templateObject_1$
|
|
5195
|
+
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"])));
|
|
5196
|
+
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"])));
|
|
5197
|
+
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"])));
|
|
5198
|
+
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"])));
|
|
5199
|
+
var templateObject_1$1U, templateObject_2$1k, templateObject_3$13, templateObject_4$R, templateObject_5$C;
|
|
5200
5200
|
|
|
5201
5201
|
var CouponCard = function (_a) {
|
|
5202
5202
|
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;
|
|
@@ -5252,14 +5252,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5252
5252
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5253
5253
|
};
|
|
5254
5254
|
|
|
5255
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5256
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5255
|
+
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; });
|
|
5256
|
+
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"])));
|
|
5257
5257
|
var Error$1 = function (_a) {
|
|
5258
5258
|
var error = _a.error;
|
|
5259
5259
|
var theme = useTheme();
|
|
5260
5260
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5261
5261
|
};
|
|
5262
|
-
var templateObject_1$
|
|
5262
|
+
var templateObject_1$1T, templateObject_2$1j;
|
|
5263
5263
|
|
|
5264
5264
|
var BaseSelectButton = function (_a) {
|
|
5265
5265
|
var children = _a.children, as = _a.as;
|
|
@@ -5276,7 +5276,7 @@ function BaseSelectOption(_a) {
|
|
|
5276
5276
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5277
5277
|
}
|
|
5278
5278
|
|
|
5279
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5279
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5280
5280
|
function BaseSelect(_a) {
|
|
5281
5281
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5282
5282
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5286,7 +5286,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5286
5286
|
Options: BaseSelectOptions,
|
|
5287
5287
|
Option: BaseSelectOption,
|
|
5288
5288
|
});
|
|
5289
|
-
var templateObject_1$
|
|
5289
|
+
var templateObject_1$1S;
|
|
5290
5290
|
|
|
5291
5291
|
var CustomButton = newStyled.button(function (_a) {
|
|
5292
5292
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5325,7 +5325,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5325
5325
|
});
|
|
5326
5326
|
});
|
|
5327
5327
|
// TODO Remove this when we find the real solution
|
|
5328
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5328
|
+
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) {
|
|
5329
5329
|
var open = _a.open;
|
|
5330
5330
|
return open &&
|
|
5331
5331
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5345,7 +5345,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5345
5345
|
} }), void 0));
|
|
5346
5346
|
};
|
|
5347
5347
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5348
|
-
var templateObject_1$
|
|
5348
|
+
var templateObject_1$1R;
|
|
5349
5349
|
|
|
5350
5350
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5351
5351
|
var theme = _a.theme;
|
|
@@ -5512,7 +5512,7 @@ var CustomCheckboxStyles = {
|
|
|
5512
5512
|
},
|
|
5513
5513
|
};
|
|
5514
5514
|
|
|
5515
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
5515
|
+
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"])));
|
|
5516
5516
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5517
5517
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5518
5518
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5523,7 +5523,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5523
5523
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5524
5524
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5525
5525
|
]; });
|
|
5526
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5526
|
+
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) {
|
|
5527
5527
|
var disabled = _a.disabled;
|
|
5528
5528
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5529
5529
|
});
|
|
@@ -5539,7 +5539,7 @@ var Checkbox = function (_a) {
|
|
|
5539
5539
|
};
|
|
5540
5540
|
return (jsxs$1(Container$1a, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$5, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5541
5541
|
};
|
|
5542
|
-
var templateObject_1$
|
|
5542
|
+
var templateObject_1$1Q, templateObject_2$1i;
|
|
5543
5543
|
|
|
5544
5544
|
var CustomOption = newStyled.li(function (_a) {
|
|
5545
5545
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5588,9 +5588,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5588
5588
|
Option: BaseDropdownOption,
|
|
5589
5589
|
});
|
|
5590
5590
|
|
|
5591
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
5592
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5593
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5591
|
+
var Container$19 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject([""], [""])));
|
|
5592
|
+
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"])));
|
|
5593
|
+
var SelectedOption = newStyled.span(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5594
5594
|
var fontWeight = _a.fontWeight;
|
|
5595
5595
|
return fontWeight || '';
|
|
5596
5596
|
});
|
|
@@ -5625,7 +5625,7 @@ function SimpleDropdown(_a) {
|
|
|
5625
5625
|
var DropdownContainer = showRequiredPlaceholder ? Container$19 : Fragment$1;
|
|
5626
5626
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(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) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5627
5627
|
}
|
|
5628
|
-
var templateObject_1$
|
|
5628
|
+
var templateObject_1$1P, templateObject_2$1h, templateObject_3$12;
|
|
5629
5629
|
|
|
5630
5630
|
/* base styles & size variants */
|
|
5631
5631
|
var CustomRadioStyles$2 = {
|
|
@@ -5690,9 +5690,9 @@ var ContainerStyles$2 = {
|
|
|
5690
5690
|
},
|
|
5691
5691
|
};
|
|
5692
5692
|
|
|
5693
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5693
|
+
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"])));
|
|
5694
5694
|
var Container$18 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5695
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5695
|
+
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) {
|
|
5696
5696
|
var disabled = _a.disabled;
|
|
5697
5697
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5698
5698
|
});
|
|
@@ -5700,14 +5700,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5700
5700
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5701
5701
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5702
5702
|
]; });
|
|
5703
|
-
var StyledLabel$3 = newStyled(Label$5)(templateObject_3
|
|
5703
|
+
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) {
|
|
5704
5704
|
var theme = _a.theme;
|
|
5705
5705
|
return theme.component.radio.textSize;
|
|
5706
5706
|
}, function (_a) {
|
|
5707
5707
|
var theme = _a.theme;
|
|
5708
5708
|
return theme.component.radio.lineHeight;
|
|
5709
5709
|
});
|
|
5710
|
-
var StyledLabelV2 = newStyled(Label$5)(templateObject_4$
|
|
5710
|
+
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) {
|
|
5711
5711
|
var theme = _a.theme;
|
|
5712
5712
|
return theme.component.radio.textSize;
|
|
5713
5713
|
}, function (_a) {
|
|
@@ -5723,7 +5723,7 @@ var RadioInput = function (_a) {
|
|
|
5723
5723
|
};
|
|
5724
5724
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$18, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: label }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5725
5725
|
};
|
|
5726
|
-
var templateObject_1$
|
|
5726
|
+
var templateObject_1$1O, templateObject_2$1g, templateObject_3$11, templateObject_4$Q;
|
|
5727
5727
|
|
|
5728
5728
|
var useOnClickOutside = function (ref, handler) {
|
|
5729
5729
|
useEffect(function () {
|
|
@@ -5816,7 +5816,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5816
5816
|
}
|
|
5817
5817
|
};
|
|
5818
5818
|
|
|
5819
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5819
|
+
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) {
|
|
5820
5820
|
var position = _a.position;
|
|
5821
5821
|
return getWrapperFlexDirection(position);
|
|
5822
5822
|
}, function (_a) {
|
|
@@ -5826,7 +5826,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __ma
|
|
|
5826
5826
|
var disableHover = _a.disableHover;
|
|
5827
5827
|
return (disableHover ? 0 : 1);
|
|
5828
5828
|
});
|
|
5829
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5829
|
+
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) {
|
|
5830
5830
|
var position = _a.position;
|
|
5831
5831
|
return getContainerFlexDirection(position);
|
|
5832
5832
|
}, function (_a) {
|
|
@@ -5854,14 +5854,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1d || (templateObject_2$1d
|
|
|
5854
5854
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5855
5855
|
return actual === expected ? margin : '0';
|
|
5856
5856
|
};
|
|
5857
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5857
|
+
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) {
|
|
5858
5858
|
var borderColor = _a.borderColor;
|
|
5859
5859
|
return borderColor;
|
|
5860
5860
|
}, function (_a) {
|
|
5861
5861
|
var backgroundColor = _a.backgroundColor;
|
|
5862
5862
|
return backgroundColor;
|
|
5863
5863
|
});
|
|
5864
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5864
|
+
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) {
|
|
5865
5865
|
var theme = _a.theme;
|
|
5866
5866
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5867
5867
|
}, function (_a) {
|
|
@@ -5871,7 +5871,7 @@ var TooltipText = newStyled.div(templateObject_4$O || (templateObject_4$O = __ma
|
|
|
5871
5871
|
var color = _a.color;
|
|
5872
5872
|
return color;
|
|
5873
5873
|
});
|
|
5874
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5874
|
+
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"])));
|
|
5875
5875
|
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) {
|
|
5876
5876
|
var color = _a.color;
|
|
5877
5877
|
return color;
|
|
@@ -5881,7 +5881,7 @@ var CloseToolTip = newStyled.button(templateObject_8$j || (templateObject_8$j =
|
|
|
5881
5881
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5882
5882
|
return right;
|
|
5883
5883
|
});
|
|
5884
|
-
var templateObject_1$
|
|
5884
|
+
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;
|
|
5885
5885
|
|
|
5886
5886
|
var Tooltip = function (_a) {
|
|
5887
5887
|
var _b;
|
|
@@ -5924,8 +5924,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5924
5924
|
};
|
|
5925
5925
|
};
|
|
5926
5926
|
|
|
5927
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
5928
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5927
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5928
|
+
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) {
|
|
5929
5929
|
var selected = _a.selected, theme = _a.theme;
|
|
5930
5930
|
return selected
|
|
5931
5931
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5939,12 +5939,12 @@ var ContainerBase$2 = newStyled.div(templateObject_2$1c || (templateObject_2$1c
|
|
|
5939
5939
|
var theme = _a.theme;
|
|
5940
5940
|
return theme.colors.pallete.primary.color;
|
|
5941
5941
|
});
|
|
5942
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3
|
|
5942
|
+
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) {
|
|
5943
5943
|
var onClick = _a.onClick;
|
|
5944
5944
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5945
5945
|
});
|
|
5946
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
5947
|
-
var SubscriptionHeader$2 = newStyled.div(templateObject_5$
|
|
5946
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5947
|
+
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) {
|
|
5948
5948
|
var theme = _a.theme;
|
|
5949
5949
|
return theme.colors.shades[200].color;
|
|
5950
5950
|
}, function (_a) {
|
|
@@ -5962,7 +5962,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
5962
5962
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5963
5963
|
});
|
|
5964
5964
|
var Container$17 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5965
|
-
var templateObject_1$
|
|
5965
|
+
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;
|
|
5966
5966
|
|
|
5967
5967
|
var radioIds$2 = {
|
|
5968
5968
|
oneTime: {
|
|
@@ -6017,12 +6017,12 @@ var Autoship = function (_a) {
|
|
|
6017
6017
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$2, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$2, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$2, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6018
6018
|
};
|
|
6019
6019
|
|
|
6020
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
6020
|
+
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) {
|
|
6021
6021
|
var theme = _a.theme;
|
|
6022
6022
|
return theme.name === 'TheSpaDr' &&
|
|
6023
6023
|
"\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 ";
|
|
6024
6024
|
});
|
|
6025
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6025
|
+
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) {
|
|
6026
6026
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6027
6027
|
return isSelected
|
|
6028
6028
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6038,7 +6038,7 @@ var getSelectedBorder = function (_a) {
|
|
|
6038
6038
|
}
|
|
6039
6039
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6040
6040
|
};
|
|
6041
|
-
var ContainerBase$1 = newStyled.div(templateObject_3$
|
|
6041
|
+
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) {
|
|
6042
6042
|
var selected = _a.selected, theme = _a.theme;
|
|
6043
6043
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6044
6044
|
}, function (_a) {
|
|
@@ -6050,11 +6050,11 @@ var ContainerBase$1 = newStyled.div(templateObject_3$Y || (templateObject_3$Y =
|
|
|
6050
6050
|
var theme = _a.theme;
|
|
6051
6051
|
return theme.colors.pallete.primary.color;
|
|
6052
6052
|
});
|
|
6053
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
6053
|
+
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) {
|
|
6054
6054
|
var onClick = _a.onClick;
|
|
6055
6055
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6056
6056
|
});
|
|
6057
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
6057
|
+
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"])));
|
|
6058
6058
|
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) {
|
|
6059
6059
|
var theme = _a.theme;
|
|
6060
6060
|
return theme.colors.shades[200].color;
|
|
@@ -6075,7 +6075,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6075
6075
|
var theme = _a.theme;
|
|
6076
6076
|
return theme.component.autoship.tooltip.margin;
|
|
6077
6077
|
});
|
|
6078
|
-
var templateObject_1$
|
|
6078
|
+
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;
|
|
6079
6079
|
|
|
6080
6080
|
var radioIds$1 = {
|
|
6081
6081
|
oneTime: {
|
|
@@ -6153,13 +6153,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6153
6153
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6154
6154
|
_a$2);
|
|
6155
6155
|
|
|
6156
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6157
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6158
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6159
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6160
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6156
|
+
var CustomerDetails = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
|
|
6157
|
+
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"])));
|
|
6158
|
+
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"])));
|
|
6159
|
+
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"])));
|
|
6160
|
+
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"])));
|
|
6161
6161
|
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"])));
|
|
6162
|
-
var templateObject_1$
|
|
6162
|
+
var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$M, templateObject_5$y, templateObject_6$t;
|
|
6163
6163
|
|
|
6164
6164
|
var NameWithStars = function (_a) {
|
|
6165
6165
|
var name = _a.name, size = _a.size;
|
|
@@ -6177,10 +6177,10 @@ var ResultFeedback = function (_a) {
|
|
|
6177
6177
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6178
6178
|
};
|
|
6179
6179
|
|
|
6180
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6181
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6182
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6183
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6180
|
+
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; });
|
|
6181
|
+
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"])));
|
|
6182
|
+
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; });
|
|
6183
|
+
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) {
|
|
6184
6184
|
var theme = _a.theme;
|
|
6185
6185
|
return theme.colors.pallete.secondary.color;
|
|
6186
6186
|
}, function (_a) {
|
|
@@ -6190,7 +6190,7 @@ var UserInfoText = newStyled.div(templateObject_4$K || (templateObject_4$K = __m
|
|
|
6190
6190
|
var theme = _a.theme, size = _a.size;
|
|
6191
6191
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6192
6192
|
});
|
|
6193
|
-
var templateObject_1$
|
|
6193
|
+
var templateObject_1$1J, templateObject_2$1b, templateObject_3$Y, templateObject_4$L;
|
|
6194
6194
|
|
|
6195
6195
|
/* base styles & size variants */
|
|
6196
6196
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6268,7 +6268,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6268
6268
|
return (jsxs$1(Container$15, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6269
6269
|
};
|
|
6270
6270
|
|
|
6271
|
-
var Section = newStyled.div(templateObject_1$
|
|
6271
|
+
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) {
|
|
6272
6272
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6273
6273
|
});
|
|
6274
6274
|
var CardHeader = function (_a) {
|
|
@@ -6279,16 +6279,16 @@ var CardFooter = function (_a) {
|
|
|
6279
6279
|
var children = _a.children;
|
|
6280
6280
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6281
6281
|
};
|
|
6282
|
-
var templateObject_1$
|
|
6282
|
+
var templateObject_1$1I;
|
|
6283
6283
|
|
|
6284
|
-
var Body = newStyled.div(templateObject_1$
|
|
6285
|
-
var CardBody = function (_a) {
|
|
6284
|
+
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"])));
|
|
6285
|
+
var CardBody$1 = function (_a) {
|
|
6286
6286
|
var children = _a.children;
|
|
6287
6287
|
return jsx$1(Body, { children: children }, void 0);
|
|
6288
6288
|
};
|
|
6289
|
-
var templateObject_1$
|
|
6289
|
+
var templateObject_1$1H;
|
|
6290
6290
|
|
|
6291
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6291
|
+
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) {
|
|
6292
6292
|
var flex = _a.flex;
|
|
6293
6293
|
return flex &&
|
|
6294
6294
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6300,55 +6300,55 @@ var Container$14 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = _
|
|
|
6300
6300
|
}, function (props) { return props.theme.component.card.borderRadius; }, function (props) {
|
|
6301
6301
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
6302
6302
|
});
|
|
6303
|
-
var Card$
|
|
6303
|
+
var Card$2 = function (_a) {
|
|
6304
6304
|
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;
|
|
6305
6305
|
var theme = useTheme();
|
|
6306
6306
|
return (jsx$1(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));
|
|
6307
6307
|
};
|
|
6308
|
-
var Card$
|
|
6308
|
+
var Card$3 = Object.assign(Card$2, {
|
|
6309
6309
|
Header: CardHeader,
|
|
6310
6310
|
Footer: CardFooter,
|
|
6311
|
-
Body: CardBody,
|
|
6311
|
+
Body: CardBody$1,
|
|
6312
6312
|
});
|
|
6313
|
-
var templateObject_1$
|
|
6313
|
+
var templateObject_1$1G;
|
|
6314
6314
|
|
|
6315
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6316
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6317
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6315
|
+
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"])));
|
|
6316
|
+
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"])));
|
|
6317
|
+
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) {
|
|
6318
6318
|
var color = _a.color;
|
|
6319
6319
|
return color;
|
|
6320
6320
|
});
|
|
6321
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6322
|
-
var templateObject_1$
|
|
6321
|
+
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"])));
|
|
6322
|
+
var templateObject_1$1F, templateObject_2$1a, templateObject_3$X, templateObject_4$K;
|
|
6323
6323
|
|
|
6324
6324
|
var Minimalistic = function (_a) {
|
|
6325
6325
|
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;
|
|
6326
6326
|
var theme = useTheme();
|
|
6327
|
-
return (jsx$1(Card$
|
|
6327
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6328
6328
|
};
|
|
6329
6329
|
|
|
6330
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6331
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6332
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6333
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6330
|
+
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"])));
|
|
6331
|
+
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; });
|
|
6332
|
+
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; });
|
|
6333
|
+
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"])));
|
|
6334
6334
|
var Simple = function (_a) {
|
|
6335
6335
|
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;
|
|
6336
6336
|
var theme = useTheme();
|
|
6337
|
-
return (jsx$1(Card$
|
|
6337
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$13, { children: [jsx$1(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6338
6338
|
};
|
|
6339
|
-
var templateObject_1$
|
|
6339
|
+
var templateObject_1$1E, templateObject_2$19, templateObject_3$W, templateObject_4$J;
|
|
6340
6340
|
|
|
6341
6341
|
var Bundle = {
|
|
6342
6342
|
Minimalistic: Minimalistic,
|
|
6343
6343
|
Simple: Simple,
|
|
6344
6344
|
};
|
|
6345
6345
|
|
|
6346
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
6346
|
+
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) {
|
|
6347
6347
|
var displayBNPL = _a.displayBNPL;
|
|
6348
6348
|
return (displayBNPL ? 'flex' : 'none');
|
|
6349
6349
|
});
|
|
6350
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6351
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6350
|
+
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"])));
|
|
6351
|
+
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"])));
|
|
6352
6352
|
var BuyNowPayLater = function (_a) {
|
|
6353
6353
|
var _b;
|
|
6354
6354
|
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;
|
|
@@ -6360,41 +6360,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6360
6360
|
}
|
|
6361
6361
|
return (jsx$1(Container$12, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6362
6362
|
};
|
|
6363
|
-
var templateObject_1$
|
|
6363
|
+
var templateObject_1$1D, templateObject_2$18, templateObject_3$V;
|
|
6364
6364
|
|
|
6365
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6365
|
+
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; });
|
|
6366
6366
|
var Title$8 = function (_a) {
|
|
6367
6367
|
var title = _a.title;
|
|
6368
6368
|
var theme = useTheme();
|
|
6369
6369
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6370
6370
|
};
|
|
6371
|
-
var templateObject_1$
|
|
6371
|
+
var templateObject_1$1C;
|
|
6372
6372
|
|
|
6373
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6373
|
+
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; });
|
|
6374
6374
|
var Promo = function (_a) {
|
|
6375
6375
|
var text = _a.text;
|
|
6376
6376
|
var theme = useTheme();
|
|
6377
6377
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6378
6378
|
};
|
|
6379
|
-
var templateObject_1$
|
|
6379
|
+
var templateObject_1$1B;
|
|
6380
6380
|
|
|
6381
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6381
|
+
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; });
|
|
6382
6382
|
var Description$1 = function (_a) {
|
|
6383
6383
|
var text = _a.text;
|
|
6384
6384
|
var theme = useTheme();
|
|
6385
6385
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6386
6386
|
};
|
|
6387
|
-
var templateObject_1$
|
|
6387
|
+
var templateObject_1$1A;
|
|
6388
6388
|
|
|
6389
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
6389
|
+
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"); });
|
|
6390
6390
|
var CloseButton$1 = function (_a) {
|
|
6391
6391
|
var onClick = _a.onClick, size = _a.size;
|
|
6392
6392
|
var theme = useTheme();
|
|
6393
6393
|
return (jsx$1(Container$11, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6394
6394
|
};
|
|
6395
|
-
var templateObject_1$
|
|
6395
|
+
var templateObject_1$1z;
|
|
6396
6396
|
|
|
6397
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6397
|
+
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) {
|
|
6398
6398
|
var backgroundColor = _a.backgroundColor;
|
|
6399
6399
|
return backgroundColor;
|
|
6400
6400
|
}, function (_a) {
|
|
@@ -6409,7 +6409,7 @@ var OfferBanner = function (_a) {
|
|
|
6409
6409
|
var theme = useTheme();
|
|
6410
6410
|
return (jsx$1(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));
|
|
6411
6411
|
};
|
|
6412
|
-
var templateObject_1$
|
|
6412
|
+
var templateObject_1$1y;
|
|
6413
6413
|
|
|
6414
6414
|
var CartProductItem = {
|
|
6415
6415
|
Title: Title$8,
|
|
@@ -6419,11 +6419,11 @@ var CartProductItem = {
|
|
|
6419
6419
|
CloseButton: CloseButton$1,
|
|
6420
6420
|
};
|
|
6421
6421
|
|
|
6422
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
6423
|
-
var MobileContainer = newStyled(Container$10)(templateObject_2$
|
|
6424
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6425
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6426
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6422
|
+
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"])));
|
|
6423
|
+
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"])));
|
|
6424
|
+
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"])));
|
|
6425
|
+
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"])));
|
|
6426
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6427
6427
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6428
6428
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6429
6429
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6432,7 +6432,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6432
6432
|
var isMobile = useWindowDimensions().isMobile;
|
|
6433
6433
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$10, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6434
6434
|
};
|
|
6435
|
-
var templateObject_1$
|
|
6435
|
+
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;
|
|
6436
6436
|
|
|
6437
6437
|
var Spacing = function (_a) {
|
|
6438
6438
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6440,10 +6440,10 @@ var Spacing = function (_a) {
|
|
|
6440
6440
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6441
6441
|
};
|
|
6442
6442
|
|
|
6443
|
-
var Container$$ = newStyled('div')(templateObject_1$
|
|
6444
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6445
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6446
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6443
|
+
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"])));
|
|
6444
|
+
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"])));
|
|
6445
|
+
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"])));
|
|
6446
|
+
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) {
|
|
6447
6447
|
var index = _a.index;
|
|
6448
6448
|
return "".concat(6 + 3 * index, "px");
|
|
6449
6449
|
}, function (_a) {
|
|
@@ -6454,13 +6454,13 @@ var StrengthBars = function (_a) {
|
|
|
6454
6454
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6455
6455
|
return (jsxs$1(Container$$, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6456
6456
|
};
|
|
6457
|
-
var templateObject_1$
|
|
6457
|
+
var templateObject_1$1w, templateObject_2$16, templateObject_3$T, templateObject_4$H;
|
|
6458
6458
|
|
|
6459
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6460
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6461
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6462
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6463
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6459
|
+
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"])));
|
|
6460
|
+
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"])));
|
|
6461
|
+
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"])));
|
|
6462
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6463
|
+
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"])));
|
|
6464
6464
|
var RegularPriceTag = function () {
|
|
6465
6465
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6466
6466
|
};
|
|
@@ -6513,12 +6513,12 @@ var PriceLabelV4 = function (_a) {
|
|
|
6513
6513
|
? finalPriceArray[0]
|
|
6514
6514
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6515
6515
|
};
|
|
6516
|
-
var templateObject_1$
|
|
6516
|
+
var templateObject_1$1v, templateObject_2$15, templateObject_3$S, templateObject_4$G, templateObject_5$w;
|
|
6517
6517
|
|
|
6518
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
6519
|
-
var templateObject_1$
|
|
6518
|
+
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"])));
|
|
6519
|
+
var templateObject_1$1u;
|
|
6520
6520
|
|
|
6521
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6521
|
+
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) {
|
|
6522
6522
|
var marginRight = _a.marginRight;
|
|
6523
6523
|
return marginRight;
|
|
6524
6524
|
});
|
|
@@ -6534,7 +6534,7 @@ var StarList = function (_a) {
|
|
|
6534
6534
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6535
6535
|
}) }, void 0));
|
|
6536
6536
|
};
|
|
6537
|
-
var templateObject_1$
|
|
6537
|
+
var templateObject_1$1t;
|
|
6538
6538
|
|
|
6539
6539
|
/* base styles & size variants */
|
|
6540
6540
|
var LabelStyles = {
|
|
@@ -6575,8 +6575,8 @@ var LabelStyles = {
|
|
|
6575
6575
|
});
|
|
6576
6576
|
},
|
|
6577
6577
|
};
|
|
6578
|
-
var Container$Z = newStyled.a(templateObject_1$
|
|
6579
|
-
var templateObject_1$
|
|
6578
|
+
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"])));
|
|
6579
|
+
var templateObject_1$1s;
|
|
6580
6580
|
|
|
6581
6581
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6582
6582
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6596,7 +6596,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6596
6596
|
}),
|
|
6597
6597
|
];
|
|
6598
6598
|
});
|
|
6599
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6599
|
+
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; });
|
|
6600
6600
|
var starsNumber = 5;
|
|
6601
6601
|
var Rating = function (_a) {
|
|
6602
6602
|
var _b = _a.size, size = _b === void 0 ? 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;
|
|
@@ -6619,7 +6619,7 @@ var Rating = function (_a) {
|
|
|
6619
6619
|
: {};
|
|
6620
6620
|
return (jsxs$1(Container$Z, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6621
6621
|
};
|
|
6622
|
-
var templateObject_1$
|
|
6622
|
+
var templateObject_1$1r;
|
|
6623
6623
|
|
|
6624
6624
|
var ImageContainer$6 = newStyled.div(function (_a) {
|
|
6625
6625
|
var width = _a.width, height = _a.height;
|
|
@@ -6629,10 +6629,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6629
6629
|
height: height,
|
|
6630
6630
|
});
|
|
6631
6631
|
});
|
|
6632
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6633
|
-
var Container$Y = newStyled.a(templateObject_2$
|
|
6634
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6635
|
-
var Title$7 = newStyled.p(templateObject_4$
|
|
6632
|
+
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"])));
|
|
6633
|
+
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"])));
|
|
6634
|
+
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"])));
|
|
6635
|
+
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; });
|
|
6636
6636
|
var getStylesBySize$c = function (size) {
|
|
6637
6637
|
switch (size) {
|
|
6638
6638
|
case ComponentSize.Medium:
|
|
@@ -6658,7 +6658,7 @@ var getStylesBySize$c = function (size) {
|
|
|
6658
6658
|
};
|
|
6659
6659
|
}
|
|
6660
6660
|
};
|
|
6661
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
6661
|
+
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) {
|
|
6662
6662
|
var style = _a.style;
|
|
6663
6663
|
return style.width;
|
|
6664
6664
|
});
|
|
@@ -6727,7 +6727,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6727
6727
|
letterSpacing: '-0.05rem',
|
|
6728
6728
|
} }), 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));
|
|
6729
6729
|
};
|
|
6730
|
-
var templateObject_1$
|
|
6730
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$F, templateObject_5$v, templateObject_6$r, templateObject_7$k;
|
|
6731
6731
|
|
|
6732
6732
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6733
6733
|
var width = _a.width, height = _a.height;
|
|
@@ -6737,10 +6737,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6737
6737
|
height: height,
|
|
6738
6738
|
});
|
|
6739
6739
|
});
|
|
6740
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6741
|
-
var Container$X = newStyled.a(templateObject_2$
|
|
6742
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6743
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
6740
|
+
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; });
|
|
6741
|
+
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"])));
|
|
6742
|
+
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"])));
|
|
6743
|
+
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; });
|
|
6744
6744
|
var getStylesBySize$b = function (size) {
|
|
6745
6745
|
switch (size) {
|
|
6746
6746
|
case ComponentSize.Medium:
|
|
@@ -6766,7 +6766,7 @@ var getStylesBySize$b = function (size) {
|
|
|
6766
6766
|
};
|
|
6767
6767
|
}
|
|
6768
6768
|
};
|
|
6769
|
-
var TopTagContainer$7 = newStyled.div(templateObject_5$
|
|
6769
|
+
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) {
|
|
6770
6770
|
var style = _a.style;
|
|
6771
6771
|
return style.width;
|
|
6772
6772
|
});
|
|
@@ -6826,9 +6826,9 @@ var ProductItemTK = function (_a) {
|
|
|
6826
6826
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6827
6827
|
} }, { 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));
|
|
6828
6828
|
};
|
|
6829
|
-
var templateObject_1$
|
|
6829
|
+
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;
|
|
6830
6830
|
|
|
6831
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
6831
|
+
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"])));
|
|
6832
6832
|
function withProductGrid(ProductItemComponent, data) {
|
|
6833
6833
|
function WithProductGrid(props) {
|
|
6834
6834
|
return (jsx$1(Container$W, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6838,7 +6838,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6838
6838
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6839
6839
|
return WithProductGrid;
|
|
6840
6840
|
}
|
|
6841
|
-
var templateObject_1$
|
|
6841
|
+
var templateObject_1$1o;
|
|
6842
6842
|
|
|
6843
6843
|
var Collection = {
|
|
6844
6844
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6885,11 +6885,11 @@ var OutOfStock = function (_a) {
|
|
|
6885
6885
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6886
6886
|
};
|
|
6887
6887
|
|
|
6888
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6889
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6890
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6891
|
-
var Span = newStyled.span(templateObject_4$
|
|
6892
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6888
|
+
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"])));
|
|
6889
|
+
newStyled(lt.Label)(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6890
|
+
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"])));
|
|
6891
|
+
var Span = newStyled.span(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6892
|
+
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"])));
|
|
6893
6893
|
var Label$4 = function (_a) {
|
|
6894
6894
|
var label = _a.label, values = _a.values;
|
|
6895
6895
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -6907,23 +6907,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6907
6907
|
Option: Option,
|
|
6908
6908
|
OptionsContainer: OptionsContainer,
|
|
6909
6909
|
});
|
|
6910
|
-
var templateObject_1$
|
|
6910
|
+
var templateObject_1$1n, templateObject_2$12, templateObject_3$P, templateObject_4$D, templateObject_5$t;
|
|
6911
6911
|
|
|
6912
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6912
|
+
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) {
|
|
6913
6913
|
var borderColor = _a.borderColor;
|
|
6914
6914
|
return borderColor;
|
|
6915
6915
|
}, function (_a) {
|
|
6916
6916
|
var noStock = _a.noStock;
|
|
6917
6917
|
return (noStock ? '0.4' : '1');
|
|
6918
6918
|
});
|
|
6919
|
-
var Image$2 = newStyled.img(templateObject_2
|
|
6919
|
+
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"])));
|
|
6920
6920
|
var PatternSelector = function (_a) {
|
|
6921
6921
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6922
6922
|
var theme = useTheme();
|
|
6923
6923
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6924
6924
|
return (jsx$1(Container$V, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6925
6925
|
};
|
|
6926
|
-
var templateObject_1$
|
|
6926
|
+
var templateObject_1$1m, templateObject_2$11;
|
|
6927
6927
|
|
|
6928
6928
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6929
6929
|
if (options == null || options.length === 0) {
|
|
@@ -6982,21 +6982,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6982
6982
|
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));
|
|
6983
6983
|
};
|
|
6984
6984
|
|
|
6985
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6986
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6987
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6985
|
+
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'); });
|
|
6986
|
+
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"])));
|
|
6987
|
+
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) {
|
|
6988
6988
|
return props.rightToLeft &&
|
|
6989
6989
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6990
6990
|
});
|
|
6991
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6992
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6991
|
+
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; });
|
|
6992
|
+
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; });
|
|
6993
6993
|
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; });
|
|
6994
6994
|
var CrossSellCheckbox = function (_a) {
|
|
6995
6995
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6996
6996
|
var theme = useTheme();
|
|
6997
6997
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6998
6998
|
};
|
|
6999
|
-
var templateObject_1$
|
|
6999
|
+
var templateObject_1$1l, templateObject_2$10, templateObject_3$O, templateObject_4$C, templateObject_5$s, templateObject_6$p;
|
|
7000
7000
|
|
|
7001
7001
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7002
7002
|
__proto__: null,
|
|
@@ -7024,7 +7024,7 @@ var sizeMapper = (_a = {},
|
|
|
7024
7024
|
_a[ComponentSize.Large] = 'large',
|
|
7025
7025
|
_a[ComponentSize.XSmall] = 'small',
|
|
7026
7026
|
_a);
|
|
7027
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7027
|
+
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) {
|
|
7028
7028
|
var wide = _a.wide;
|
|
7029
7029
|
return (wide ? '100%' : 'fit-content');
|
|
7030
7030
|
}, function (_a) {
|
|
@@ -7046,11 +7046,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1i || (templateObj
|
|
|
7046
7046
|
var theme = _a.theme;
|
|
7047
7047
|
return theme.colors.text.disabled;
|
|
7048
7048
|
});
|
|
7049
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2
|
|
7049
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7050
7050
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7051
7051
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7052
7052
|
});
|
|
7053
|
-
var templateObject_1$
|
|
7053
|
+
var templateObject_1$1k, templateObject_2$$;
|
|
7054
7054
|
|
|
7055
7055
|
var BaseCTA = function (_a) {
|
|
7056
7056
|
var _b, _c, _d;
|
|
@@ -7137,33 +7137,33 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7137
7137
|
} }), void 0));
|
|
7138
7138
|
};
|
|
7139
7139
|
|
|
7140
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
7141
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7142
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7143
|
-
var Details = newStyled.span(templateObject_4$
|
|
7140
|
+
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; });
|
|
7141
|
+
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"])));
|
|
7142
|
+
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; });
|
|
7143
|
+
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; });
|
|
7144
7144
|
var Note = function (_a) {
|
|
7145
7145
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7146
7146
|
var theme = useTheme();
|
|
7147
7147
|
return (jsxs$1(Container$U, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7148
7148
|
};
|
|
7149
|
-
var templateObject_1$
|
|
7149
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B;
|
|
7150
7150
|
|
|
7151
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7151
|
+
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) {
|
|
7152
7152
|
var theme = _a.theme;
|
|
7153
7153
|
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 ");
|
|
7154
7154
|
});
|
|
7155
|
-
var Line = newStyled.div(templateObject_2$
|
|
7156
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7155
|
+
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; });
|
|
7156
|
+
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({
|
|
7157
7157
|
flexDirection: ['column', 'row'],
|
|
7158
7158
|
}));
|
|
7159
|
-
var Col = newStyled.div(templateObject_4$
|
|
7159
|
+
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({
|
|
7160
7160
|
margin: ['0', '0 1.25rem'],
|
|
7161
7161
|
marginBottom: ['1.875rem', '0'],
|
|
7162
7162
|
alignItems: ['center', 'flex-start'],
|
|
7163
7163
|
textAlign: ['center', 'inherit'],
|
|
7164
7164
|
width: ['100%', 'inherit'],
|
|
7165
7165
|
}));
|
|
7166
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
7166
|
+
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({
|
|
7167
7167
|
marginRight: ['0', '0.438rem'],
|
|
7168
7168
|
marginBottom: ['10px', '0'],
|
|
7169
7169
|
width: ['auto', '1.5rem'],
|
|
@@ -7191,16 +7191,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7191
7191
|
var theme = useTheme();
|
|
7192
7192
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7193
7193
|
};
|
|
7194
|
-
var templateObject_1$
|
|
7194
|
+
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;
|
|
7195
7195
|
|
|
7196
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7196
|
+
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) {
|
|
7197
7197
|
var top = _a.top;
|
|
7198
7198
|
return top;
|
|
7199
7199
|
}, function (_a) {
|
|
7200
7200
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7201
7201
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7202
7202
|
});
|
|
7203
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7203
|
+
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) {
|
|
7204
7204
|
var height = _a.height;
|
|
7205
7205
|
return height;
|
|
7206
7206
|
}, function (_a) {
|
|
@@ -7247,20 +7247,20 @@ var Drawer = function (_a) {
|
|
|
7247
7247
|
}, [isOpen, onClose, onOpen]);
|
|
7248
7248
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(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;
|
|
7249
7249
|
};
|
|
7250
|
-
var templateObject_1$
|
|
7250
|
+
var templateObject_1$1h, templateObject_2$Y;
|
|
7251
7251
|
|
|
7252
7252
|
var TooltipArrow = function (_a) {
|
|
7253
7253
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7254
7254
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("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));
|
|
7255
7255
|
};
|
|
7256
7256
|
|
|
7257
|
-
var List = newStyled.ul(templateObject_1$
|
|
7258
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7259
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7260
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7261
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7257
|
+
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"])));
|
|
7258
|
+
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"])));
|
|
7259
|
+
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"])));
|
|
7260
|
+
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"])));
|
|
7261
|
+
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; });
|
|
7262
7262
|
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; });
|
|
7263
|
-
var templateObject_1$
|
|
7263
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$z, templateObject_5$q, templateObject_6$n;
|
|
7264
7264
|
|
|
7265
7265
|
var DropdownListIcons = function (_a) {
|
|
7266
7266
|
var items = _a.items;
|
|
@@ -7273,13 +7273,13 @@ var Dropdown = function (_a) {
|
|
|
7273
7273
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(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));
|
|
7274
7274
|
};
|
|
7275
7275
|
|
|
7276
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7277
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7278
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7279
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7280
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7276
|
+
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"])));
|
|
7277
|
+
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"])));
|
|
7278
|
+
var SizeLabel = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7279
|
+
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"])));
|
|
7280
|
+
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"])));
|
|
7281
7281
|
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"])));
|
|
7282
|
-
var templateObject_1$
|
|
7282
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$K, templateObject_4$y, templateObject_5$p, templateObject_6$m;
|
|
7283
7283
|
|
|
7284
7284
|
var SizeDropdown = function (_a) {
|
|
7285
7285
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7302,10 +7302,10 @@ var SizeDropdown = function (_a) {
|
|
|
7302
7302
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(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: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7303
7303
|
};
|
|
7304
7304
|
|
|
7305
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7306
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7307
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7308
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7305
|
+
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; });
|
|
7306
|
+
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; });
|
|
7307
|
+
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"])));
|
|
7308
|
+
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"])));
|
|
7309
7309
|
var DropdownDialog = function (_a) {
|
|
7310
7310
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7311
7311
|
var theme = useTheme$1();
|
|
@@ -7314,7 +7314,7 @@ var DropdownDialog = function (_a) {
|
|
|
7314
7314
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7315
7315
|
}) }), void 0) }), void 0));
|
|
7316
7316
|
};
|
|
7317
|
-
var templateObject_1$
|
|
7317
|
+
var templateObject_1$1e, templateObject_2$V, templateObject_3$J, templateObject_4$x;
|
|
7318
7318
|
|
|
7319
7319
|
function FilteringDropdown(_a) {
|
|
7320
7320
|
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;
|
|
@@ -7347,29 +7347,29 @@ function FilteringDropdown(_a) {
|
|
|
7347
7347
|
}) }, void 0)] }), void 0));
|
|
7348
7348
|
}
|
|
7349
7349
|
|
|
7350
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7351
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7352
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7353
|
-
var Container$T = newStyled.div(templateObject_4$
|
|
7350
|
+
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; });
|
|
7351
|
+
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; });
|
|
7352
|
+
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"])));
|
|
7353
|
+
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'); });
|
|
7354
7354
|
var Accordion = function (_a) {
|
|
7355
7355
|
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;
|
|
7356
7356
|
var theme = useTheme();
|
|
7357
7357
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7358
7358
|
return (jsxs$1(Container$T, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7359
7359
|
};
|
|
7360
|
-
var templateObject_1$
|
|
7360
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$w;
|
|
7361
7361
|
|
|
7362
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7363
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7364
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7365
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7366
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7362
|
+
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; });
|
|
7363
|
+
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"])));
|
|
7364
|
+
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"])));
|
|
7365
|
+
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"])));
|
|
7366
|
+
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; });
|
|
7367
7367
|
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; });
|
|
7368
7368
|
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'); });
|
|
7369
7369
|
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; });
|
|
7370
7370
|
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"])));
|
|
7371
7371
|
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"])));
|
|
7372
|
-
var templateObject_1$
|
|
7372
|
+
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;
|
|
7373
7373
|
|
|
7374
7374
|
var getStylesBySize$a = function (size, theme) {
|
|
7375
7375
|
switch (size) {
|
|
@@ -7434,9 +7434,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7434
7434
|
} }), id: id }, void 0));
|
|
7435
7435
|
};
|
|
7436
7436
|
|
|
7437
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7438
|
-
var LI = newStyled.li(templateObject_2$
|
|
7439
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7437
|
+
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"])));
|
|
7438
|
+
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; });
|
|
7439
|
+
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"])));
|
|
7440
7440
|
var Tags = function (_a) {
|
|
7441
7441
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7442
7442
|
var theme = useTheme();
|
|
@@ -7444,7 +7444,7 @@ var Tags = function (_a) {
|
|
|
7444
7444
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7445
7445
|
}) }), void 0));
|
|
7446
7446
|
};
|
|
7447
|
-
var templateObject_1$
|
|
7447
|
+
var templateObject_1$1b, templateObject_2$S, templateObject_3$G;
|
|
7448
7448
|
|
|
7449
7449
|
var Filters = function (_a) {
|
|
7450
7450
|
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;
|
|
@@ -7580,8 +7580,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7580
7580
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7581
7581
|
};
|
|
7582
7582
|
|
|
7583
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7584
|
-
var Container$S = newStyled.div(templateObject_2$
|
|
7583
|
+
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"])));
|
|
7584
|
+
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"])));
|
|
7585
7585
|
var FitGuarantee = function (_a) {
|
|
7586
7586
|
var _b;
|
|
7587
7587
|
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;
|
|
@@ -7592,17 +7592,17 @@ var FitGuarantee = function (_a) {
|
|
|
7592
7592
|
console.error('Icon', iconName, 'not found');
|
|
7593
7593
|
return null;
|
|
7594
7594
|
}
|
|
7595
|
-
return (jsx$1(Card$
|
|
7595
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$S, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$S, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7596
7596
|
margin: '0.1rem 0',
|
|
7597
7597
|
width: '100%',
|
|
7598
7598
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7599
7599
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7600
7600
|
} }, { children: title }), void 0), jsx$1(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));
|
|
7601
7601
|
};
|
|
7602
|
-
var templateObject_1$
|
|
7602
|
+
var templateObject_1$1a, templateObject_2$R;
|
|
7603
7603
|
|
|
7604
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
7605
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7604
|
+
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"])));
|
|
7605
|
+
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; });
|
|
7606
7606
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7607
7607
|
border: 'none',
|
|
7608
7608
|
background: 'transparent',
|
|
@@ -7617,7 +7617,7 @@ var FitPredictor = function (_a) {
|
|
|
7617
7617
|
var theme = useTheme();
|
|
7618
7618
|
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));
|
|
7619
7619
|
};
|
|
7620
|
-
var templateObject_1$
|
|
7620
|
+
var templateObject_1$19, templateObject_2$Q;
|
|
7621
7621
|
|
|
7622
7622
|
var Button$7 = newStyled.button(function () { return ({
|
|
7623
7623
|
background: 'transparent',
|
|
@@ -11861,14 +11861,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11861
11861
|
return Slider;
|
|
11862
11862
|
}(React__default.Component);
|
|
11863
11863
|
|
|
11864
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11864
|
+
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) {
|
|
11865
11865
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11866
11866
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11867
11867
|
}, function (_a) {
|
|
11868
11868
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11869
11869
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11870
11870
|
});
|
|
11871
|
-
var templateObject_1$
|
|
11871
|
+
var templateObject_1$18;
|
|
11872
11872
|
|
|
11873
11873
|
var getStylesBySize$9 = function (size) {
|
|
11874
11874
|
// rem units
|
|
@@ -11927,7 +11927,7 @@ var SliderNavigation = function (_a) {
|
|
|
11927
11927
|
} }, { 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));
|
|
11928
11928
|
};
|
|
11929
11929
|
|
|
11930
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11930
|
+
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) {
|
|
11931
11931
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11932
11932
|
return borderRadiusVariant &&
|
|
11933
11933
|
"\n border-radius: 20px;\n ";
|
|
@@ -11945,7 +11945,7 @@ var Image$1 = newStyled.img(templateObject_1$15 || (templateObject_1$15 = __make
|
|
|
11945
11945
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11946
11946
|
: 'inherit';
|
|
11947
11947
|
});
|
|
11948
|
-
var templateObject_1$
|
|
11948
|
+
var templateObject_1$17;
|
|
11949
11949
|
|
|
11950
11950
|
var ImageSmallPreview = function (_a) {
|
|
11951
11951
|
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;
|
|
@@ -11953,9 +11953,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11953
11953
|
return (jsx$1(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));
|
|
11954
11954
|
};
|
|
11955
11955
|
|
|
11956
|
-
var horizontalStyles = css(templateObject_1$
|
|
11957
|
-
var verticalStyles = css(templateObject_2$
|
|
11958
|
-
var Container$Q = newStyled.div(templateObject_3$
|
|
11956
|
+
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"])));
|
|
11957
|
+
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"])));
|
|
11958
|
+
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) {
|
|
11959
11959
|
var position = _a.position;
|
|
11960
11960
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11961
11961
|
}, function (_a) {
|
|
@@ -11963,12 +11963,12 @@ var Container$Q = newStyled.div(templateObject_3$D || (templateObject_3$D = __ma
|
|
|
11963
11963
|
return hasOverflowArrows &&
|
|
11964
11964
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11965
11965
|
});
|
|
11966
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
11967
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11966
|
+
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"])));
|
|
11967
|
+
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"])));
|
|
11968
11968
|
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"])));
|
|
11969
11969
|
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"])));
|
|
11970
11970
|
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"])));
|
|
11971
|
-
var templateObject_1$
|
|
11971
|
+
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;
|
|
11972
11972
|
|
|
11973
11973
|
var ImagePreviewList = function (_a) {
|
|
11974
11974
|
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;
|
|
@@ -13578,22 +13578,22 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13578
13578
|
afterZoomOut: PropTypes.func
|
|
13579
13579
|
} : {};
|
|
13580
13580
|
|
|
13581
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13582
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13583
|
-
var templateObject_1$
|
|
13581
|
+
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); });
|
|
13582
|
+
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; });
|
|
13583
|
+
var templateObject_1$15, templateObject_2$O;
|
|
13584
13584
|
|
|
13585
13585
|
var ProgressBar$1 = function (_a) {
|
|
13586
13586
|
var progress = _a.progress, hide = _a.hide;
|
|
13587
13587
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13588
13588
|
};
|
|
13589
13589
|
|
|
13590
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
13591
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13592
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13593
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
13594
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
13590
|
+
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"])));
|
|
13591
|
+
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; });
|
|
13592
|
+
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"])));
|
|
13593
|
+
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"])));
|
|
13594
|
+
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"])));
|
|
13595
13595
|
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"])));
|
|
13596
|
-
var templateObject_1$
|
|
13596
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$j;
|
|
13597
13597
|
|
|
13598
13598
|
var Video$1 = function (_a) {
|
|
13599
13599
|
var _b, _c, _d, _e;
|
|
@@ -13642,24 +13642,24 @@ var Video$1 = function (_a) {
|
|
|
13642
13642
|
return (jsxs$1(Container$P, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(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: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13643
13643
|
};
|
|
13644
13644
|
|
|
13645
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
13645
|
+
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) {
|
|
13646
13646
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13647
13647
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13648
13648
|
});
|
|
13649
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13649
|
+
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) {
|
|
13650
13650
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13651
13651
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13652
13652
|
}, function (_a) {
|
|
13653
13653
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13654
13654
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13655
13655
|
});
|
|
13656
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13656
|
+
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) {
|
|
13657
13657
|
var isCTAHidden = _a.isCTAHidden;
|
|
13658
13658
|
return (isCTAHidden ? '60px' : '120px');
|
|
13659
13659
|
});
|
|
13660
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13661
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13662
|
-
var templateObject_1$
|
|
13660
|
+
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"])));
|
|
13661
|
+
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"])));
|
|
13662
|
+
var templateObject_1$13, templateObject_2$M, templateObject_3$D, templateObject_4$s, templateObject_5$l;
|
|
13663
13663
|
|
|
13664
13664
|
var ImageProductSlide$1 = function (_a) {
|
|
13665
13665
|
var _b;
|
|
@@ -13672,8 +13672,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13672
13672
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsx$1(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager" }, void 0)), jsx$1(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13673
13673
|
};
|
|
13674
13674
|
|
|
13675
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
13676
|
-
var templateObject_1$
|
|
13675
|
+
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"])));
|
|
13676
|
+
var templateObject_1$12;
|
|
13677
13677
|
|
|
13678
13678
|
var getInitialIndex = function (images, selectedValue) {
|
|
13679
13679
|
if (selectedValue) {
|
|
@@ -13721,7 +13721,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13721
13721
|
};
|
|
13722
13722
|
}
|
|
13723
13723
|
};
|
|
13724
|
-
var Container$M = newStyled.div(templateObject_1
|
|
13724
|
+
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) {
|
|
13725
13725
|
var backgroundColor = _a.backgroundColor;
|
|
13726
13726
|
return backgroundColor;
|
|
13727
13727
|
}, function (_a) {
|
|
@@ -13751,9 +13751,9 @@ var IconButton = function (_a) {
|
|
|
13751
13751
|
var theme = useTheme();
|
|
13752
13752
|
return (jsx$1(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));
|
|
13753
13753
|
};
|
|
13754
|
-
var templateObject_1
|
|
13754
|
+
var templateObject_1$11;
|
|
13755
13755
|
|
|
13756
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13756
|
+
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; });
|
|
13757
13757
|
var AmazonButton = function (_a) {
|
|
13758
13758
|
var onClick = _a.onClick;
|
|
13759
13759
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13762,7 +13762,7 @@ var PaypalButton = function (_a) {
|
|
|
13762
13762
|
var onClick = _a.onClick;
|
|
13763
13763
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13764
13764
|
};
|
|
13765
|
-
var templateObject_1$
|
|
13765
|
+
var templateObject_1$10;
|
|
13766
13766
|
|
|
13767
13767
|
var Container$L = newStyled.div(function (props) { return ({
|
|
13768
13768
|
height: 'auto',
|
|
@@ -13817,9 +13817,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13817
13817
|
return (jsx$1(Fragment$2, { children: jsxs$1(Container$L, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(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));
|
|
13818
13818
|
};
|
|
13819
13819
|
|
|
13820
|
-
var Container$K = newStyled.div(templateObject_1
|
|
13821
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13822
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13820
|
+
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'); });
|
|
13821
|
+
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'); });
|
|
13822
|
+
var StyledTitle = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13823
13823
|
var titlePosition = _a.titlePosition;
|
|
13824
13824
|
return titlePosition == 'center' &&
|
|
13825
13825
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13829,13 +13829,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13829
13829
|
var isMobile = useWindowDimensions().isMobile;
|
|
13830
13830
|
return (jsxs$1(Container$K, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13831
13831
|
};
|
|
13832
|
-
var templateObject_1
|
|
13832
|
+
var templateObject_1$$, templateObject_2$L, templateObject_3$C;
|
|
13833
13833
|
|
|
13834
|
-
var Label$3 = newStyled.span(templateObject_1$
|
|
13834
|
+
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) {
|
|
13835
13835
|
var color = _a.color;
|
|
13836
13836
|
return color;
|
|
13837
13837
|
});
|
|
13838
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13838
|
+
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) {
|
|
13839
13839
|
var color = _a.color;
|
|
13840
13840
|
return color;
|
|
13841
13841
|
});
|
|
@@ -13844,7 +13844,7 @@ var InputLabel = function (_a) {
|
|
|
13844
13844
|
var theme = useTheme();
|
|
13845
13845
|
return (jsxs$1(Label$3, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13846
13846
|
};
|
|
13847
|
-
var templateObject_1$
|
|
13847
|
+
var templateObject_1$_, templateObject_2$K;
|
|
13848
13848
|
|
|
13849
13849
|
var containerByStatus = function (theme, status) {
|
|
13850
13850
|
if (status === InputValidationType.Valid)
|
|
@@ -13853,12 +13853,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13853
13853
|
return theme.colors.semantic.urgent.color;
|
|
13854
13854
|
return '';
|
|
13855
13855
|
};
|
|
13856
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13856
|
+
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) {
|
|
13857
13857
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13858
13858
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13859
13859
|
});
|
|
13860
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13861
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13860
|
+
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"])));
|
|
13861
|
+
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) {
|
|
13862
13862
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13863
13863
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13864
13864
|
}, function (_a) {
|
|
@@ -13913,11 +13913,11 @@ var StyledInput = newStyled.input(templateObject_3$z || (templateObject_3$z = __
|
|
|
13913
13913
|
return hasValue &&
|
|
13914
13914
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13915
13915
|
});
|
|
13916
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13916
|
+
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) {
|
|
13917
13917
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13918
13918
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13919
13919
|
});
|
|
13920
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13920
|
+
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) {
|
|
13921
13921
|
var theme = _a.theme;
|
|
13922
13922
|
return theme.component.input.placeholderColor;
|
|
13923
13923
|
}, function (_a) {
|
|
@@ -13931,7 +13931,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$j || (templateObject_5
|
|
|
13931
13931
|
return theme.component.input.lineHeight;
|
|
13932
13932
|
});
|
|
13933
13933
|
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"])));
|
|
13934
|
-
var templateObject_1$
|
|
13934
|
+
var templateObject_1$Z, templateObject_2$J, templateObject_3$B, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
13935
13935
|
|
|
13936
13936
|
var BaseInput = function (_a) {
|
|
13937
13937
|
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"]);
|
|
@@ -13954,7 +13954,7 @@ var BaseInput = function (_a) {
|
|
|
13954
13954
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13955
13955
|
}, [status]);
|
|
13956
13956
|
var hasValue = Boolean(value);
|
|
13957
|
-
return (jsxs$1(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13957
|
+
return (jsxs$1(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper$1, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13958
13958
|
onChange(event.target.value, event);
|
|
13959
13959
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
13960
13960
|
onChange('', { target: { value: '' } });
|
|
@@ -13975,11 +13975,11 @@ var Button$5 = function (_a) {
|
|
|
13975
13975
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13976
13976
|
};
|
|
13977
13977
|
|
|
13978
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
13978
|
+
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) {
|
|
13979
13979
|
var theme = _a.theme;
|
|
13980
13980
|
return theme.component.inputCustom.input.borderRadius;
|
|
13981
13981
|
});
|
|
13982
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13982
|
+
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) {
|
|
13983
13983
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13984
13984
|
return defaultRounded
|
|
13985
13985
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13996,21 +13996,21 @@ var Custom = function (_a) {
|
|
|
13996
13996
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13997
13997
|
return (jsx$1(Container$I, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13998
13998
|
};
|
|
13999
|
-
var templateObject_1$
|
|
13999
|
+
var templateObject_1$Y, templateObject_2$I;
|
|
14000
14000
|
|
|
14001
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14001
|
+
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) {
|
|
14002
14002
|
var size = _a.size;
|
|
14003
14003
|
return (size === 'small' ? '36px' : '');
|
|
14004
14004
|
});
|
|
14005
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14006
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14005
|
+
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"])));
|
|
14006
|
+
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"])));
|
|
14007
14007
|
var Success = function (_a) {
|
|
14008
14008
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14009
14009
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14010
14010
|
};
|
|
14011
|
-
var templateObject_1$
|
|
14011
|
+
var templateObject_1$X, templateObject_2$H, templateObject_3$A;
|
|
14012
14012
|
|
|
14013
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14013
|
+
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) {
|
|
14014
14014
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14015
14015
|
return status === InputValidationType.Empty &&
|
|
14016
14016
|
type === 'primary' &&
|
|
@@ -14027,16 +14027,16 @@ var BasePlusButton = function (_a) {
|
|
|
14027
14027
|
}
|
|
14028
14028
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14029
14029
|
};
|
|
14030
|
-
var templateObject_1$
|
|
14030
|
+
var templateObject_1$W;
|
|
14031
14031
|
|
|
14032
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14033
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14032
|
+
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"])));
|
|
14033
|
+
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"])));
|
|
14034
14034
|
var BasePlusIcon = function (_a) {
|
|
14035
14035
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14036
14036
|
var theme = useTheme();
|
|
14037
14037
|
return (jsx$1(Container$H, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14038
14038
|
};
|
|
14039
|
-
var templateObject_1$
|
|
14039
|
+
var templateObject_1$V, templateObject_2$G;
|
|
14040
14040
|
|
|
14041
14041
|
var Input$3 = {
|
|
14042
14042
|
Simple: BaseInput,
|
|
@@ -14081,7 +14081,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14081
14081
|
}, [preventTouch, ref, touchStart]);
|
|
14082
14082
|
}
|
|
14083
14083
|
|
|
14084
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14084
|
+
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) {
|
|
14085
14085
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14086
14086
|
return borderRadiusVariant &&
|
|
14087
14087
|
"\n border-radius: 40px;\n ";
|
|
@@ -14090,10 +14090,10 @@ var Container$G = newStyled.div(templateObject_1$S || (templateObject_1$S = __ma
|
|
|
14090
14090
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14091
14091
|
});
|
|
14092
14092
|
// max-height: 31.875rem;
|
|
14093
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14094
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14095
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_4$
|
|
14096
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
14093
|
+
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'); });
|
|
14094
|
+
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"])));
|
|
14095
|
+
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"])));
|
|
14096
|
+
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"])));
|
|
14097
14097
|
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"])));
|
|
14098
14098
|
var settings$1 = {
|
|
14099
14099
|
dots: true,
|
|
@@ -14153,16 +14153,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14153
14153
|
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14154
14154
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14155
14155
|
};
|
|
14156
|
-
var templateObject_1$
|
|
14156
|
+
var templateObject_1$U, templateObject_2$F, templateObject_3$z, templateObject_4$q, templateObject_5$j, templateObject_6$h;
|
|
14157
14157
|
|
|
14158
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14158
|
+
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"])));
|
|
14159
14159
|
var ProductGalleryMobile = function (_a) {
|
|
14160
14160
|
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;
|
|
14161
14161
|
var _d = useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14162
14162
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14163
14163
|
return (jsx$1(Container$F, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(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));
|
|
14164
14164
|
};
|
|
14165
|
-
var templateObject_1$
|
|
14165
|
+
var templateObject_1$T;
|
|
14166
14166
|
|
|
14167
14167
|
function _extends() {
|
|
14168
14168
|
_extends = Object.assign || function (target) {
|
|
@@ -14429,14 +14429,14 @@ function useSwipeable(options) {
|
|
|
14429
14429
|
return handlers;
|
|
14430
14430
|
}
|
|
14431
14431
|
|
|
14432
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14432
|
+
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"])));
|
|
14433
14433
|
var ArrowButton = function (_a) {
|
|
14434
14434
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14435
14435
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14436
14436
|
};
|
|
14437
|
-
var templateObject_1$
|
|
14437
|
+
var templateObject_1$S;
|
|
14438
14438
|
|
|
14439
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14439
|
+
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"])));
|
|
14440
14440
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14441
14441
|
var SlideDots = function (_a) {
|
|
14442
14442
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14445,11 +14445,11 @@ var SlideDots = function (_a) {
|
|
|
14445
14445
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14446
14446
|
: 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));
|
|
14447
14447
|
};
|
|
14448
|
-
var templateObject_1$
|
|
14448
|
+
var templateObject_1$R;
|
|
14449
14449
|
|
|
14450
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14451
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14452
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14450
|
+
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"])));
|
|
14451
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14452
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14453
14453
|
var SlideNavigation = function (_a) {
|
|
14454
14454
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14455
14455
|
var theme = useTheme();
|
|
@@ -14461,23 +14461,23 @@ var SlideNavigation = function (_a) {
|
|
|
14461
14461
|
onNavigate(selectedIndex + 1);
|
|
14462
14462
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14463
14463
|
};
|
|
14464
|
-
var templateObject_1$
|
|
14464
|
+
var templateObject_1$Q, templateObject_2$E, templateObject_3$y;
|
|
14465
14465
|
|
|
14466
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14466
|
+
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) {
|
|
14467
14467
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14468
14468
|
return borderRadiusVariant &&
|
|
14469
14469
|
"\n border-radius: 40px;\n ";
|
|
14470
14470
|
});
|
|
14471
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14472
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14471
|
+
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'); });
|
|
14472
|
+
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"])));
|
|
14473
14473
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14474
14474
|
var _b, _c;
|
|
14475
14475
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14476
14476
|
return (jsxs$1(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')) && (jsxs$1(Fragment$2, { children: [jsx$1(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), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(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')) && (jsx$1("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));
|
|
14477
14477
|
});
|
|
14478
|
-
var templateObject_1$
|
|
14478
|
+
var templateObject_1$P, templateObject_2$D, templateObject_3$x;
|
|
14479
14479
|
|
|
14480
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14480
|
+
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"])));
|
|
14481
14481
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14482
14482
|
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;
|
|
14483
14483
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14501,9 +14501,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14501
14501
|
}, [index, images]);
|
|
14502
14502
|
return (jsxs$1(Container$C, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14503
14503
|
};
|
|
14504
|
-
var templateObject_1$
|
|
14504
|
+
var templateObject_1$O;
|
|
14505
14505
|
|
|
14506
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
14506
|
+
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) {
|
|
14507
14507
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14508
14508
|
return borderRadiusVariant &&
|
|
14509
14509
|
"\n border-radius: 40px;\n ";
|
|
@@ -14512,10 +14512,10 @@ var Container$B = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
14512
14512
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14513
14513
|
});
|
|
14514
14514
|
// max-height: 31.875rem;
|
|
14515
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14516
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14517
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14518
|
-
var Video = newStyled.div(templateObject_5$
|
|
14515
|
+
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'); });
|
|
14516
|
+
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"])));
|
|
14517
|
+
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"])));
|
|
14518
|
+
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"])));
|
|
14519
14519
|
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"])));
|
|
14520
14520
|
var Text$2 = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14521
14521
|
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"])));
|
|
@@ -14577,14 +14577,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14577
14577
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14578
14578
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14579
14579
|
};
|
|
14580
|
-
var templateObject_1$
|
|
14580
|
+
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;
|
|
14581
14581
|
|
|
14582
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
14582
|
+
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"])));
|
|
14583
14583
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14584
14584
|
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;
|
|
14585
14585
|
return (jsx$1(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14586
14586
|
};
|
|
14587
|
-
var templateObject_1$
|
|
14587
|
+
var templateObject_1$M;
|
|
14588
14588
|
|
|
14589
14589
|
var __defProp$1 = Object.defineProperty;
|
|
14590
14590
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14717,17 +14717,17 @@ var Portal = function (_a) {
|
|
|
14717
14717
|
var visibleStyle = function (_a) {
|
|
14718
14718
|
var opened = _a.opened;
|
|
14719
14719
|
return opened
|
|
14720
|
-
? css(templateObject_1$
|
|
14720
|
+
? 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 "])));
|
|
14721
14721
|
};
|
|
14722
14722
|
var transformStyle = function (_a) {
|
|
14723
14723
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14724
14724
|
return opened
|
|
14725
|
-
? css(templateObject_3$
|
|
14725
|
+
? 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%)');
|
|
14726
14726
|
};
|
|
14727
14727
|
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) {
|
|
14728
14728
|
var width = _a.width;
|
|
14729
14729
|
return width
|
|
14730
|
-
? css(templateObject_5$
|
|
14730
|
+
? css(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14731
14731
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14732
14732
|
});
|
|
14733
14733
|
}, visibleStyle, transformStyle);
|
|
@@ -14772,9 +14772,9 @@ var useModal = function (id) {
|
|
|
14772
14772
|
close: close,
|
|
14773
14773
|
}); }, [close, open, opened]);
|
|
14774
14774
|
};
|
|
14775
|
-
var templateObject_1$
|
|
14775
|
+
var templateObject_1$L, templateObject_2$B, templateObject_3$v, templateObject_4$o, templateObject_5$h, templateObject_6$f, templateObject_7$e;
|
|
14776
14776
|
|
|
14777
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14777
|
+
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) {
|
|
14778
14778
|
var height = _a.height;
|
|
14779
14779
|
return height || '0.5rem';
|
|
14780
14780
|
}, function (_a) {
|
|
@@ -14846,19 +14846,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14846
14846
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14847
14847
|
return (jsxs$1(Container$y, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14848
14848
|
};
|
|
14849
|
-
var templateObject_1$
|
|
14849
|
+
var templateObject_1$K;
|
|
14850
14850
|
|
|
14851
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14851
|
+
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) {
|
|
14852
14852
|
var theme = _a.theme;
|
|
14853
14853
|
return theme.component.orderBar.backgroundColor;
|
|
14854
14854
|
});
|
|
14855
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14855
|
+
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; });
|
|
14856
14856
|
var OrderBar = function (_a) {
|
|
14857
14857
|
var message = _a.message, color = _a.color;
|
|
14858
14858
|
var theme = useTheme();
|
|
14859
14859
|
return (jsxs$1(Container$x, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14860
14860
|
};
|
|
14861
|
-
var templateObject_1$
|
|
14861
|
+
var templateObject_1$J, templateObject_2$A;
|
|
14862
14862
|
|
|
14863
14863
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14864
14864
|
background: props.bgColor,
|
|
@@ -14882,15 +14882,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14882
14882
|
justifyContent: 'center',
|
|
14883
14883
|
gap: '10px',
|
|
14884
14884
|
});
|
|
14885
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14885
|
+
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) {
|
|
14886
14886
|
var bgColor = _a.bgColor;
|
|
14887
14887
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14888
14888
|
}, function (_a) {
|
|
14889
14889
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14890
14890
|
return width;
|
|
14891
14891
|
});
|
|
14892
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14893
|
-
var templateObject_1$
|
|
14892
|
+
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"])));
|
|
14893
|
+
var templateObject_1$I, templateObject_2$z;
|
|
14894
14894
|
|
|
14895
14895
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14896
14896
|
var background = _a.background, width = _a.width;
|
|
@@ -18710,11 +18710,11 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18710
18710
|
HTMLReactParser$1.attributesToProps;
|
|
18711
18711
|
HTMLReactParser$1.Element;
|
|
18712
18712
|
|
|
18713
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18714
|
-
var Card = newStyled.div(templateObject_2$
|
|
18715
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18716
|
-
var Label$2 = newStyled.div(templateObject_4$
|
|
18717
|
-
var Check = newStyled.div(templateObject_5$
|
|
18713
|
+
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"])));
|
|
18714
|
+
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"])));
|
|
18715
|
+
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"])));
|
|
18716
|
+
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"])));
|
|
18717
|
+
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"])));
|
|
18718
18718
|
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"])));
|
|
18719
18719
|
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"])));
|
|
18720
18720
|
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"])));
|
|
@@ -18734,7 +18734,7 @@ var PackCard = function (_a) {
|
|
|
18734
18734
|
.then(function (icon) { return setIcon(icon); })
|
|
18735
18735
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
18736
18736
|
}, [pack.meta.icon]);
|
|
18737
|
-
return (jsxs$1(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 ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$2, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18737
|
+
return (jsxs$1(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 ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$2, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18738
18738
|
color: 'var(--colors-semantic-urgent-color)',
|
|
18739
18739
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer, { children: [jsx$1(Text$7, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
18740
18740
|
locale: 'en-US',
|
|
@@ -18747,14 +18747,14 @@ var PackCard = function (_a) {
|
|
|
18747
18747
|
currency: currencyCode || 'USD',
|
|
18748
18748
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18749
18749
|
};
|
|
18750
|
-
var templateObject_1$
|
|
18750
|
+
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;
|
|
18751
18751
|
|
|
18752
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18753
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18754
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18752
|
+
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"])));
|
|
18753
|
+
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"])));
|
|
18754
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18755
18755
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18756
18756
|
}));
|
|
18757
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18757
|
+
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) {
|
|
18758
18758
|
var bold = _a.bold;
|
|
18759
18759
|
return (bold ? '700' : '500');
|
|
18760
18760
|
}, function (_a) {
|
|
@@ -18771,7 +18771,7 @@ var PageNumber = newStyled.span(templateObject_4$l || (templateObject_4$l = __ma
|
|
|
18771
18771
|
var background = _a.background;
|
|
18772
18772
|
return background || 'unset';
|
|
18773
18773
|
});
|
|
18774
|
-
var templateObject_1$
|
|
18774
|
+
var templateObject_1$G, templateObject_2$x, templateObject_3$t, templateObject_4$m;
|
|
18775
18775
|
|
|
18776
18776
|
var Pagination = function (_a) {
|
|
18777
18777
|
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;
|
|
@@ -18836,7 +18836,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18836
18836
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18837
18837
|
};
|
|
18838
18838
|
|
|
18839
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
18839
|
+
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) {
|
|
18840
18840
|
var width = _a.width;
|
|
18841
18841
|
return width;
|
|
18842
18842
|
}, function (_a) {
|
|
@@ -18854,12 +18854,12 @@ var PaymentMethod = function (_a) {
|
|
|
18854
18854
|
var theme = useTheme();
|
|
18855
18855
|
return (jsx$1(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: createElement(Icon) }), void 0));
|
|
18856
18856
|
};
|
|
18857
|
-
var templateObject_1$
|
|
18857
|
+
var templateObject_1$F;
|
|
18858
18858
|
|
|
18859
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
18859
|
+
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"])));
|
|
18860
18860
|
var IMAGE_WIDTH = '63px';
|
|
18861
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18862
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18861
|
+
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);
|
|
18862
|
+
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({
|
|
18863
18863
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18864
18864
|
}), IMAGE_WIDTH);
|
|
18865
18865
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18882,7 +18882,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18882
18882
|
margin: margin,
|
|
18883
18883
|
});
|
|
18884
18884
|
});
|
|
18885
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18885
|
+
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) {
|
|
18886
18886
|
var withTag = _a.withTag; _a.theme;
|
|
18887
18887
|
return withTag
|
|
18888
18888
|
? mediaQueries({
|
|
@@ -18891,7 +18891,7 @@ var PriceContainer = newStyled.div(templateObject_4$k || (templateObject_4$k = _
|
|
|
18891
18891
|
})
|
|
18892
18892
|
: 'justify-content: end';
|
|
18893
18893
|
});
|
|
18894
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18894
|
+
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"])));
|
|
18895
18895
|
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"])));
|
|
18896
18896
|
var SimpleOrderItem = function (_a) {
|
|
18897
18897
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
@@ -18899,7 +18899,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18899
18899
|
var theme = useTheme();
|
|
18900
18900
|
return (jsxs$1(Container$t, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(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, jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(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));
|
|
18901
18901
|
};
|
|
18902
|
-
var templateObject_1$
|
|
18902
|
+
var templateObject_1$E, templateObject_2$w, templateObject_3$s, templateObject_4$l, templateObject_5$f, templateObject_6$d;
|
|
18903
18903
|
|
|
18904
18904
|
var P$1 = newStyled.p(function (_a) {
|
|
18905
18905
|
var color = _a.color;
|
|
@@ -18913,7 +18913,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18913
18913
|
margin: '0.938rem 4.188rem',
|
|
18914
18914
|
});
|
|
18915
18915
|
});
|
|
18916
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18916
|
+
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) {
|
|
18917
18917
|
var height = _a.height;
|
|
18918
18918
|
return height || '0.5rem';
|
|
18919
18919
|
}, function (_a) {
|
|
@@ -18958,12 +18958,12 @@ var ProgressBar = function (_a) {
|
|
|
18958
18958
|
var theme = useTheme();
|
|
18959
18959
|
return (jsxs$1(Container$s, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18960
18960
|
};
|
|
18961
|
-
var templateObject_1$
|
|
18961
|
+
var templateObject_1$D;
|
|
18962
18962
|
|
|
18963
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
18964
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18965
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18966
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18963
|
+
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; });
|
|
18964
|
+
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"])));
|
|
18965
|
+
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"])));
|
|
18966
|
+
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)'; });
|
|
18967
18967
|
var QuantityPicker = function (_a) {
|
|
18968
18968
|
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;
|
|
18969
18969
|
var theme = useTheme();
|
|
@@ -18988,7 +18988,7 @@ var QuantityPicker = function (_a) {
|
|
|
18988
18988
|
}, [value, clamp]);
|
|
18989
18989
|
return (jsxs$1(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: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(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));
|
|
18990
18990
|
};
|
|
18991
|
-
var templateObject_1$
|
|
18991
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$r, templateObject_4$k;
|
|
18992
18992
|
|
|
18993
18993
|
/* base styles & size variants */
|
|
18994
18994
|
var CustomRadioStyles$1 = {
|
|
@@ -19057,9 +19057,9 @@ var ContainerStyles$1 = {
|
|
|
19057
19057
|
},
|
|
19058
19058
|
};
|
|
19059
19059
|
|
|
19060
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19060
|
+
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"])));
|
|
19061
19061
|
var Container$q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19062
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19062
|
+
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) {
|
|
19063
19063
|
var disabled = _a.disabled;
|
|
19064
19064
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19065
19065
|
});
|
|
@@ -19067,7 +19067,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19067
19067
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19068
19068
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19069
19069
|
]; });
|
|
19070
|
-
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$
|
|
19070
|
+
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"])));
|
|
19071
19071
|
var RadioPrimary = function (_a) {
|
|
19072
19072
|
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 ? ComponentSize.Medium : _d;
|
|
19073
19073
|
var theme = useTheme();
|
|
@@ -19077,7 +19077,7 @@ var RadioPrimary = function (_a) {
|
|
|
19077
19077
|
};
|
|
19078
19078
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$q, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19079
19079
|
};
|
|
19080
|
-
var templateObject_1$
|
|
19080
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$q;
|
|
19081
19081
|
|
|
19082
19082
|
var RadioGroupInput = function (_a) {
|
|
19083
19083
|
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 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19156,9 +19156,9 @@ var ContainerStyles = {
|
|
|
19156
19156
|
},
|
|
19157
19157
|
};
|
|
19158
19158
|
|
|
19159
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19159
|
+
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"])));
|
|
19160
19160
|
var Container$p = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19161
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19161
|
+
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) {
|
|
19162
19162
|
var disabled = _a.disabled;
|
|
19163
19163
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19164
19164
|
});
|
|
@@ -19166,7 +19166,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19166
19166
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19167
19167
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19168
19168
|
]; });
|
|
19169
|
-
var StyledLabel = newStyled(Label$5)(templateObject_3$
|
|
19169
|
+
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) {
|
|
19170
19170
|
var theme = _a.theme;
|
|
19171
19171
|
return theme.component.radio.textSize;
|
|
19172
19172
|
}, function (_a) {
|
|
@@ -19182,7 +19182,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19182
19182
|
};
|
|
19183
19183
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$p, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(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));
|
|
19184
19184
|
};
|
|
19185
|
-
var templateObject_1$
|
|
19185
|
+
var templateObject_1$A, templateObject_2$t, templateObject_3$p;
|
|
19186
19186
|
|
|
19187
19187
|
var ClubRadioGroupInput = function (_a) {
|
|
19188
19188
|
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 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19210,11 +19210,11 @@ function formatDate(date, format) {
|
|
|
19210
19210
|
}
|
|
19211
19211
|
}
|
|
19212
19212
|
|
|
19213
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19214
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19215
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19216
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19217
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19213
|
+
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"])));
|
|
19214
|
+
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"])));
|
|
19215
|
+
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"])));
|
|
19216
|
+
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"])));
|
|
19217
|
+
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"])));
|
|
19218
19218
|
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"])));
|
|
19219
19219
|
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"])));
|
|
19220
19220
|
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"])));
|
|
@@ -19251,15 +19251,15 @@ var Review$1 = function (_a) {
|
|
|
19251
19251
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$o, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19252
19252
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19253
19253
|
};
|
|
19254
|
-
var templateObject_1$
|
|
19254
|
+
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;
|
|
19255
19255
|
|
|
19256
19256
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19257
19257
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19258
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
19259
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19260
|
-
var Content = newStyled.div(templateObject_3$
|
|
19261
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19262
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19258
|
+
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"])));
|
|
19259
|
+
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"])));
|
|
19260
|
+
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"])));
|
|
19261
|
+
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"])));
|
|
19262
|
+
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"])));
|
|
19263
19263
|
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"])));
|
|
19264
19264
|
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"])));
|
|
19265
19265
|
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"])));
|
|
@@ -19307,13 +19307,13 @@ var Review = function (_a) {
|
|
|
19307
19307
|
: description,
|
|
19308
19308
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19309
19309
|
};
|
|
19310
|
-
var templateObject_1$
|
|
19310
|
+
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;
|
|
19311
19311
|
|
|
19312
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19313
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19314
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19315
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19316
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19312
|
+
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"])));
|
|
19313
|
+
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"])));
|
|
19314
|
+
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"])));
|
|
19315
|
+
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"])));
|
|
19316
|
+
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"])));
|
|
19317
19317
|
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"])));
|
|
19318
19318
|
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) {
|
|
19319
19319
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -19325,17 +19325,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19325
19325
|
var theme = useTheme();
|
|
19326
19326
|
return (jsxs$1(Container$m, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19327
19327
|
};
|
|
19328
|
-
var templateObject_1$
|
|
19328
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$m, templateObject_4$h, templateObject_5$c, templateObject_6$a, templateObject_7$a;
|
|
19329
19329
|
|
|
19330
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19331
|
-
var Text = newStyled.p(templateObject_2$
|
|
19330
|
+
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"])));
|
|
19331
|
+
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; });
|
|
19332
19332
|
var ScrollToTop = function (_a) {
|
|
19333
19333
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19334
19334
|
var theme = useTheme();
|
|
19335
19335
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19336
19336
|
return (jsxs$1(Container$l, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19337
19337
|
};
|
|
19338
|
-
var templateObject_1$
|
|
19338
|
+
var templateObject_1$w, templateObject_2$p;
|
|
19339
19339
|
|
|
19340
19340
|
var Input = newStyled.input(function (props) { return ({
|
|
19341
19341
|
padding: props.theme.component.input.padding,
|
|
@@ -19366,7 +19366,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19366
19366
|
},
|
|
19367
19367
|
}); });
|
|
19368
19368
|
|
|
19369
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19369
|
+
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({
|
|
19370
19370
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19371
19371
|
}));
|
|
19372
19372
|
var Description = newStyled.div({
|
|
@@ -19385,7 +19385,7 @@ var ProductItem = function (_a) {
|
|
|
19385
19385
|
var theme = useTheme();
|
|
19386
19386
|
return (jsxs$1(Container$k, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel$1, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19387
19387
|
};
|
|
19388
|
-
var templateObject_1$
|
|
19388
|
+
var templateObject_1$v;
|
|
19389
19389
|
|
|
19390
19390
|
var Container$j = newStyled.div({
|
|
19391
19391
|
display: 'flex',
|
|
@@ -19401,7 +19401,7 @@ var Ul = newStyled.ul({
|
|
|
19401
19401
|
margin: '0px',
|
|
19402
19402
|
padding: '0px',
|
|
19403
19403
|
});
|
|
19404
|
-
var Li = newStyled.li(templateObject_1$
|
|
19404
|
+
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({
|
|
19405
19405
|
padding: [0, '0rem 1rem'],
|
|
19406
19406
|
borderRadius: [0, '0.5rem'],
|
|
19407
19407
|
}));
|
|
@@ -19413,12 +19413,12 @@ var Anchor = newStyled.a({
|
|
|
19413
19413
|
padding: 0,
|
|
19414
19414
|
textDecoration: 'none',
|
|
19415
19415
|
});
|
|
19416
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19416
|
+
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({
|
|
19417
19417
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19418
19418
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19419
19419
|
borderRadius: ['0', '0.5rem'],
|
|
19420
19420
|
}));
|
|
19421
|
-
var Header = newStyled.div(templateObject_3$
|
|
19421
|
+
var Header = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19422
19422
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19423
19423
|
}));
|
|
19424
19424
|
var ResultsPanel = function (_a) {
|
|
@@ -19426,9 +19426,9 @@ var ResultsPanel = function (_a) {
|
|
|
19426
19426
|
var theme = useTheme();
|
|
19427
19427
|
return (jsxs$1(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19428
19428
|
};
|
|
19429
|
-
var templateObject_1$
|
|
19429
|
+
var templateObject_1$u, templateObject_2$o, templateObject_3$l;
|
|
19430
19430
|
|
|
19431
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19431
|
+
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({
|
|
19432
19432
|
right: ['1rem', '7.75rem'],
|
|
19433
19433
|
top: ['0.75rem', '0.75rem'],
|
|
19434
19434
|
}));
|
|
@@ -19437,7 +19437,7 @@ var ClearButton = function (_a) {
|
|
|
19437
19437
|
var theme = useTheme();
|
|
19438
19438
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19439
19439
|
};
|
|
19440
|
-
var templateObject_1$
|
|
19440
|
+
var templateObject_1$t;
|
|
19441
19441
|
|
|
19442
19442
|
var SearchIconContainer = newStyled.div({
|
|
19443
19443
|
display: 'flex',
|
|
@@ -19447,7 +19447,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19447
19447
|
background: 'white',
|
|
19448
19448
|
alignSelf: 'center',
|
|
19449
19449
|
});
|
|
19450
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19450
|
+
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"])));
|
|
19451
19451
|
var SearchControl = function (_a) {
|
|
19452
19452
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19453
19453
|
var theme = useTheme();
|
|
@@ -19463,7 +19463,7 @@ var SearchControl = function (_a) {
|
|
|
19463
19463
|
}
|
|
19464
19464
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19465
19465
|
};
|
|
19466
|
-
var templateObject_1$
|
|
19466
|
+
var templateObject_1$s;
|
|
19467
19467
|
|
|
19468
19468
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19469
19469
|
var reducer = function (state, action) {
|
|
@@ -19530,20 +19530,20 @@ var SearchBar = function (_a) {
|
|
|
19530
19530
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(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));
|
|
19531
19531
|
};
|
|
19532
19532
|
|
|
19533
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19534
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19535
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19536
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19537
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19533
|
+
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"])));
|
|
19534
|
+
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"])));
|
|
19535
|
+
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"])));
|
|
19536
|
+
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"])));
|
|
19537
|
+
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"])));
|
|
19538
19538
|
var SearchNavigation = function (_a) {
|
|
19539
19539
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19540
19540
|
return (jsxs$1(Container$g, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19541
19541
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19542
19542
|
}) }, void 0)] }, void 0));
|
|
19543
19543
|
};
|
|
19544
|
-
var templateObject_1$
|
|
19544
|
+
var templateObject_1$r, templateObject_2$n, templateObject_3$k, templateObject_4$g, templateObject_5$b;
|
|
19545
19545
|
|
|
19546
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19546
|
+
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) {
|
|
19547
19547
|
var alignCenter = _a.alignCenter;
|
|
19548
19548
|
return alignCenter &&
|
|
19549
19549
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19553,26 +19553,26 @@ var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __ma
|
|
|
19553
19553
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19554
19554
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19555
19555
|
});
|
|
19556
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19557
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19556
|
+
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"])));
|
|
19557
|
+
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"])));
|
|
19558
19558
|
var ShortBanner = function (_a) {
|
|
19559
19559
|
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;
|
|
19560
19560
|
var theme = useTheme();
|
|
19561
19561
|
return (jsxs$1(Container$f, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19562
19562
|
};
|
|
19563
|
-
var templateObject_1$
|
|
19563
|
+
var templateObject_1$q, templateObject_2$m, templateObject_3$j;
|
|
19564
19564
|
|
|
19565
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19566
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19567
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19568
|
-
var Label$1 = newStyled('div')(templateObject_4$
|
|
19569
|
-
var TopLabel$1 = newStyled(Label$1)(templateObject_5$
|
|
19565
|
+
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; });
|
|
19566
|
+
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; });
|
|
19567
|
+
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; });
|
|
19568
|
+
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"])));
|
|
19569
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19570
19570
|
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"])));
|
|
19571
19571
|
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"])));
|
|
19572
19572
|
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"])));
|
|
19573
19573
|
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"])));
|
|
19574
19574
|
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; });
|
|
19575
|
-
var templateObject_1$
|
|
19575
|
+
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;
|
|
19576
19576
|
|
|
19577
19577
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19578
19578
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19613,16 +19613,16 @@ var SizeChartTable = function (_a) {
|
|
|
19613
19613
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(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 (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19614
19614
|
};
|
|
19615
19615
|
|
|
19616
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19617
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19618
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19619
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
19616
|
+
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; });
|
|
19617
|
+
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; });
|
|
19618
|
+
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; });
|
|
19619
|
+
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; });
|
|
19620
19620
|
var SizeTable = function (_a) {
|
|
19621
19621
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19622
19622
|
var theme = useTheme();
|
|
19623
19623
|
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19624
19624
|
};
|
|
19625
|
-
var templateObject_1$
|
|
19625
|
+
var templateObject_1$o, templateObject_2$k, templateObject_3$h, templateObject_4$e;
|
|
19626
19626
|
|
|
19627
19627
|
var getStylesBySize$7 = function (size) {
|
|
19628
19628
|
switch (size) {
|
|
@@ -19649,7 +19649,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19649
19649
|
} });
|
|
19650
19650
|
};
|
|
19651
19651
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19652
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19652
|
+
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));
|
|
19653
19653
|
};
|
|
19654
19654
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19655
19655
|
if (disabled)
|
|
@@ -19665,23 +19665,23 @@ var TextButton = function (_a) {
|
|
|
19665
19665
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19666
19666
|
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));
|
|
19667
19667
|
};
|
|
19668
|
-
var templateObject_1$
|
|
19668
|
+
var templateObject_1$n;
|
|
19669
19669
|
|
|
19670
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19671
|
-
var P = newStyled.p(templateObject_2$
|
|
19672
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19670
|
+
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"])));
|
|
19671
|
+
var P = newStyled.p(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19672
|
+
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"])));
|
|
19673
19673
|
var SizeFitGuide = function (_a) {
|
|
19674
19674
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19675
19675
|
return (jsxs$1(Container$d, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19676
19676
|
};
|
|
19677
|
-
var templateObject_1$
|
|
19677
|
+
var templateObject_1$m, templateObject_2$j, templateObject_3$g;
|
|
19678
19678
|
|
|
19679
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19679
|
+
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) {
|
|
19680
19680
|
var inline = _a.inline;
|
|
19681
19681
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19682
19682
|
});
|
|
19683
|
-
var Row = newStyled.div(templateObject_2$
|
|
19684
|
-
var templateObject_1$
|
|
19683
|
+
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"])));
|
|
19684
|
+
var templateObject_1$l, templateObject_2$i;
|
|
19685
19685
|
|
|
19686
19686
|
var SizeSelector = function (_a) {
|
|
19687
19687
|
var _b;
|
|
@@ -19703,7 +19703,7 @@ var SizeSelector = function (_a) {
|
|
|
19703
19703
|
}) }), void 0)] }), void 0));
|
|
19704
19704
|
};
|
|
19705
19705
|
|
|
19706
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19706
|
+
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) {
|
|
19707
19707
|
var titleSize = _a.titleSize;
|
|
19708
19708
|
return titleSize;
|
|
19709
19709
|
}, function (_a) {
|
|
@@ -19720,18 +19720,18 @@ var Tab = function (_a) {
|
|
|
19720
19720
|
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;
|
|
19721
19721
|
return (jsx$1(Fragment$2, { children: jsx$1(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));
|
|
19722
19722
|
};
|
|
19723
|
-
var templateObject_1$
|
|
19723
|
+
var templateObject_1$k;
|
|
19724
19724
|
|
|
19725
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19726
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19725
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19726
|
+
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) {
|
|
19727
19727
|
var backgroundColor = _a.backgroundColor;
|
|
19728
19728
|
return backgroundColor;
|
|
19729
19729
|
}, function (_a) {
|
|
19730
19730
|
var borderColor = _a.borderColor;
|
|
19731
19731
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19732
19732
|
});
|
|
19733
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19734
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19733
|
+
var TabContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19734
|
+
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"])));
|
|
19735
19735
|
var Tabs = function (_a) {
|
|
19736
19736
|
var _b;
|
|
19737
19737
|
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;
|
|
@@ -19742,14 +19742,14 @@ var Tabs = function (_a) {
|
|
|
19742
19742
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19743
19743
|
return (jsxs$1(Container$c, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19744
19744
|
};
|
|
19745
|
-
var templateObject_1$
|
|
19745
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$f, templateObject_4$d;
|
|
19746
19746
|
|
|
19747
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19747
|
+
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"])));
|
|
19748
19748
|
var Tag = function (_a) {
|
|
19749
19749
|
var text = _a.text, className = _a.className;
|
|
19750
19750
|
return jsx$1(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19751
19751
|
};
|
|
19752
|
-
var templateObject_1$
|
|
19752
|
+
var templateObject_1$i;
|
|
19753
19753
|
|
|
19754
19754
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19755
19755
|
switch (size) {
|
|
@@ -19860,9 +19860,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19860
19860
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19861
19861
|
};
|
|
19862
19862
|
|
|
19863
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19864
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19865
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19863
|
+
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"])));
|
|
19864
|
+
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"])));
|
|
19865
|
+
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"])));
|
|
19866
19866
|
var ImageVideo = function (_a) {
|
|
19867
19867
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19868
19868
|
var video = useRef(null);
|
|
@@ -19882,12 +19882,12 @@ var ImageVideo = function (_a) {
|
|
|
19882
19882
|
height: '100%',
|
|
19883
19883
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19884
19884
|
};
|
|
19885
|
-
var templateObject_1$
|
|
19885
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$e;
|
|
19886
19886
|
|
|
19887
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19888
|
-
var ContainerMobile = css(templateObject_2$
|
|
19889
|
-
var Container$a = newStyled.div(templateObject_3$
|
|
19890
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19887
|
+
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"])));
|
|
19888
|
+
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"])));
|
|
19889
|
+
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);
|
|
19890
|
+
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"])));
|
|
19891
19891
|
var TextWithImage = function (_a) {
|
|
19892
19892
|
var _b, _c, _d, _e;
|
|
19893
19893
|
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"]);
|
|
@@ -19917,25 +19917,25 @@ var TextWithImage = function (_a) {
|
|
|
19917
19917
|
},
|
|
19918
19918
|
} }, 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));
|
|
19919
19919
|
};
|
|
19920
|
-
var templateObject_1$
|
|
19920
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$d, templateObject_4$c;
|
|
19921
19921
|
|
|
19922
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19922
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19923
19923
|
var timerColor = _a.timerColor;
|
|
19924
19924
|
return timerColor || '';
|
|
19925
19925
|
});
|
|
19926
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19926
|
+
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) {
|
|
19927
19927
|
var timerColor = _a.timerColor;
|
|
19928
19928
|
return timerColor || '';
|
|
19929
19929
|
});
|
|
19930
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19930
|
+
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) {
|
|
19931
19931
|
var theme = _a.theme;
|
|
19932
19932
|
return theme.colors.shades.white.color;
|
|
19933
19933
|
}, function (_a) {
|
|
19934
19934
|
var theme = _a.theme;
|
|
19935
19935
|
return theme.colors.shades.white.color;
|
|
19936
19936
|
});
|
|
19937
|
-
var Unit = newStyled.p(templateObject_4$
|
|
19938
|
-
var templateObject_1$
|
|
19937
|
+
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"])));
|
|
19938
|
+
var templateObject_1$f, templateObject_2$e, templateObject_3$c, templateObject_4$b;
|
|
19939
19939
|
|
|
19940
19940
|
var HRS = 'HRS';
|
|
19941
19941
|
var MIN = 'MIN';
|
|
@@ -19976,9 +19976,9 @@ var Timer = function (_a) {
|
|
|
19976
19976
|
return (jsxs$1(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));
|
|
19977
19977
|
};
|
|
19978
19978
|
|
|
19979
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19980
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19981
|
-
var Currency = newStyled.span(templateObject_3$
|
|
19979
|
+
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"])));
|
|
19980
|
+
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; });
|
|
19981
|
+
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) {
|
|
19982
19982
|
var theme = _a.theme;
|
|
19983
19983
|
return theme.component.total.basicTotal.currency.color;
|
|
19984
19984
|
}, function (_a) {
|
|
@@ -19991,11 +19991,11 @@ var Currency = newStyled.span(templateObject_3$9 || (templateObject_3$9 = __make
|
|
|
19991
19991
|
var theme = _a.theme;
|
|
19992
19992
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19993
19993
|
});
|
|
19994
|
-
var Container$9 = newStyled.div(templateObject_4$
|
|
19994
|
+
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) {
|
|
19995
19995
|
var highlightColor = _a.highlightColor;
|
|
19996
19996
|
return highlightColor;
|
|
19997
19997
|
});
|
|
19998
|
-
var TotalContainer = newStyled(Container$9)(templateObject_5$
|
|
19998
|
+
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) {
|
|
19999
19999
|
var showTotalLabel = _a.showTotalLabel;
|
|
20000
20000
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20001
20001
|
});
|
|
@@ -20005,7 +20005,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$8 || (templateObject_7$8 = __
|
|
|
20005
20005
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20006
20006
|
});
|
|
20007
20007
|
var TotalLabel = newStyled(Text$7)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20008
|
-
var templateObject_1$
|
|
20008
|
+
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;
|
|
20009
20009
|
|
|
20010
20010
|
var Total = function (_a) {
|
|
20011
20011
|
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;
|
|
@@ -20013,19 +20013,19 @@ var Total = function (_a) {
|
|
|
20013
20013
|
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$9, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20014
20014
|
};
|
|
20015
20015
|
|
|
20016
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20016
|
+
var Wrapper = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20017
20017
|
var color = _a.color;
|
|
20018
20018
|
return color;
|
|
20019
20019
|
});
|
|
20020
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20021
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20020
|
+
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"])));
|
|
20021
|
+
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) {
|
|
20022
20022
|
var theme = _a.theme;
|
|
20023
20023
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20024
20024
|
}, function (_a) {
|
|
20025
20025
|
var theme = _a.theme;
|
|
20026
20026
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20027
20027
|
});
|
|
20028
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20028
|
+
var CouponItem = newStyled(Item)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20029
20029
|
var color = _a.color;
|
|
20030
20030
|
return color;
|
|
20031
20031
|
});
|
|
@@ -20038,18 +20038,18 @@ var Subtotal = function (_a) {
|
|
|
20038
20038
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20039
20039
|
})] }), void 0));
|
|
20040
20040
|
};
|
|
20041
|
-
var templateObject_1$
|
|
20041
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$9;
|
|
20042
20042
|
|
|
20043
20043
|
var Totals = {
|
|
20044
20044
|
Total: Total,
|
|
20045
20045
|
Subtotal: Subtotal,
|
|
20046
20046
|
};
|
|
20047
20047
|
|
|
20048
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
20049
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
20050
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
20051
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
20052
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20048
|
+
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"])));
|
|
20049
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20050
|
+
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; });
|
|
20051
|
+
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'); });
|
|
20052
|
+
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"])));
|
|
20053
20053
|
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) {
|
|
20054
20054
|
return props.finishedTrack
|
|
20055
20055
|
? props.finishedTrackColor
|
|
@@ -20097,13 +20097,13 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20097
20097
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20098
20098
|
})] }), void 0));
|
|
20099
20099
|
};
|
|
20100
|
-
var templateObject_1$
|
|
20100
|
+
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;
|
|
20101
20101
|
|
|
20102
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20103
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20104
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20105
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20106
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20102
|
+
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"])));
|
|
20103
|
+
var CheckpointContainer = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20104
|
+
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; });
|
|
20105
|
+
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'); });
|
|
20106
|
+
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'); });
|
|
20107
20107
|
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) {
|
|
20108
20108
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20109
20109
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20137,9 +20137,9 @@ var TrackingProgress = function (_a) {
|
|
|
20137
20137
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20138
20138
|
})] }), void 0));
|
|
20139
20139
|
};
|
|
20140
|
-
var templateObject_1$
|
|
20140
|
+
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;
|
|
20141
20141
|
|
|
20142
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20142
|
+
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) {
|
|
20143
20143
|
var textPosition = _a.textPosition;
|
|
20144
20144
|
return textPosition;
|
|
20145
20145
|
}, function (_a) {
|
|
@@ -20152,7 +20152,7 @@ var TimerContainer = newStyled.div(templateObject_1$8 || (templateObject_1$8 = _
|
|
|
20152
20152
|
var borderRadius = _a.borderRadius;
|
|
20153
20153
|
return borderRadius || '8px';
|
|
20154
20154
|
});
|
|
20155
|
-
var templateObject_1$
|
|
20155
|
+
var templateObject_1$a;
|
|
20156
20156
|
|
|
20157
20157
|
var getDefaultCountdown = function () {
|
|
20158
20158
|
var tomorrowDate = new Date();
|
|
@@ -20168,7 +20168,7 @@ var HurryUp = function (_a) {
|
|
|
20168
20168
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
20169
20169
|
};
|
|
20170
20170
|
|
|
20171
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
20171
|
+
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) {
|
|
20172
20172
|
var size = _a.size;
|
|
20173
20173
|
return (size ? size : '100%');
|
|
20174
20174
|
}, function (_a) {
|
|
@@ -20182,7 +20182,7 @@ var borderSize = {
|
|
|
20182
20182
|
large: '3px',
|
|
20183
20183
|
};
|
|
20184
20184
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20185
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20185
|
+
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) {
|
|
20186
20186
|
var size = _a.size;
|
|
20187
20187
|
return borderSize[size];
|
|
20188
20188
|
}, function (_a) {
|
|
@@ -20195,7 +20195,7 @@ var StyledSpinner = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __
|
|
|
20195
20195
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20196
20196
|
return duration;
|
|
20197
20197
|
});
|
|
20198
|
-
var templateObject_1$
|
|
20198
|
+
var templateObject_1$9, templateObject_2$9;
|
|
20199
20199
|
|
|
20200
20200
|
var Spinner = function (_a) {
|
|
20201
20201
|
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;
|
|
@@ -20216,9 +20216,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20216
20216
|
var Shades700Color = '#292929';
|
|
20217
20217
|
var PrimaryColor = '#f7a08b';
|
|
20218
20218
|
var ClubBorderColor = '#882a2b';
|
|
20219
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
20220
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
20221
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
20219
|
+
var FlexContainer = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20220
|
+
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);
|
|
20221
|
+
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) {
|
|
20222
20222
|
var selected = _a.selected;
|
|
20223
20223
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20224
20224
|
}, function (_a) {
|
|
@@ -20227,14 +20227,14 @@ var ContainerBase = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __
|
|
|
20227
20227
|
? "& label {\n font-weight: 700;\n }"
|
|
20228
20228
|
: '';
|
|
20229
20229
|
}, PrimaryColor);
|
|
20230
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$
|
|
20230
|
+
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) {
|
|
20231
20231
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20232
20232
|
return (isNoMember && selected ? Shades700Color : '');
|
|
20233
20233
|
}, function (_a) {
|
|
20234
20234
|
var onClick = _a.onClick;
|
|
20235
20235
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20236
20236
|
});
|
|
20237
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
20237
|
+
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"])));
|
|
20238
20238
|
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) {
|
|
20239
20239
|
var isSelected = _a.isSelected;
|
|
20240
20240
|
return (isSelected ? "1px solid ".concat(Shades200Color) : "none");
|
|
@@ -20259,7 +20259,7 @@ var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_10$2 || (templateObje
|
|
|
20259
20259
|
: Shades200Color;
|
|
20260
20260
|
});
|
|
20261
20261
|
var Container$5 = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20262
|
-
var templateObject_1$
|
|
20262
|
+
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;
|
|
20263
20263
|
|
|
20264
20264
|
var ClubOfferSelector = function (_a) {
|
|
20265
20265
|
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;
|
|
@@ -20305,6 +20305,49 @@ var ClubOfferSelector = function (_a) {
|
|
|
20305
20305
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsx$1(Benefit, { children: jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice, { isNoMember: true, testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20306
20306
|
};
|
|
20307
20307
|
|
|
20308
|
+
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"])));
|
|
20309
|
+
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"])));
|
|
20310
|
+
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"])));
|
|
20311
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$6;
|
|
20312
|
+
|
|
20313
|
+
var ToggleComponent = function (_a) {
|
|
20314
|
+
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
20315
|
+
var _c = useState(isChecked), checked = _c[0], setChecked = _c[1];
|
|
20316
|
+
var handleChange = function (e) {
|
|
20317
|
+
setChecked(function (value) { return !value; });
|
|
20318
|
+
onToggle(e.target.checked);
|
|
20319
|
+
};
|
|
20320
|
+
return (jsxs$1(LabelWrapper, { children: [jsx$1(InputWrapper, { checked: checked, type: "checkbox", onChange: handleChange, value: "".concat(checked) }, void 0), jsx$1(SwitchWrapper, {}, void 0)] }, void 0));
|
|
20321
|
+
};
|
|
20322
|
+
|
|
20323
|
+
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) {
|
|
20324
|
+
var $checked = _a.$checked;
|
|
20325
|
+
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20326
|
+
}, function (_a) {
|
|
20327
|
+
var $checked = _a.$checked;
|
|
20328
|
+
return ($checked ? '#FFE1B8' : '#E5E5E5');
|
|
20329
|
+
});
|
|
20330
|
+
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"])));
|
|
20331
|
+
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"])));
|
|
20332
|
+
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"])));
|
|
20333
|
+
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"])));
|
|
20334
|
+
var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$5;
|
|
20335
|
+
|
|
20336
|
+
function Card(_a) {
|
|
20337
|
+
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;
|
|
20338
|
+
return (jsxs$1(ContainerWrapper, __assign$1({ "$checked": isChecked }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [jsx$1("div", { children: jsx$1("img", { src: srcImage, alt: "" }, void 0) }, void 0), jsx$1(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsx$1("div", { children: children }, void 0)] }, void 0), jsxs$1(CardBody, { children: [bodyCopy, ' ', jsx$1("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }, void 0)] }), void 0));
|
|
20339
|
+
}
|
|
20340
|
+
|
|
20341
|
+
function JoinClubCard(_a) {
|
|
20342
|
+
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, srcImage = _a.srcImage, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20343
|
+
var _b = useState(isChecked), checked = _b[0], setChecked = _b[1];
|
|
20344
|
+
var handleToggleValue = function (value) {
|
|
20345
|
+
setChecked(value);
|
|
20346
|
+
onCheckToggle(value);
|
|
20347
|
+
};
|
|
20348
|
+
return (jsx$1(Card, __assign$1({ link: link, srcImage: srcImage, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy }, { children: jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked: isChecked }, void 0) }), void 0));
|
|
20349
|
+
}
|
|
20350
|
+
|
|
20308
20351
|
var ImageContainer$1 = newStyled.div(function (_a) {
|
|
20309
20352
|
var width = _a.width, height = _a.height;
|
|
20310
20353
|
return ({
|
|
@@ -20747,5 +20790,5 @@ var SizeChartTableV2 = function (_a) {
|
|
|
20747
20790
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: getIsOdd(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0) }, void 0)] }, void 0)] }, void 0));
|
|
20748
20791
|
};
|
|
20749
20792
|
|
|
20750
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CancellationFlowAccordionContentPerPartner, Card$
|
|
20793
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$2 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
20751
20794
|
//# sourceMappingURL=index.esm.js.map
|