@trafilea/afrodita-components 6.24.0 → 6.25.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +25 -1
- package/build/index.esm.js +643 -539
- package/build/index.esm.js.map +1 -1
- package/build/index.js +644 -538
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -2609,6 +2609,20 @@ function css() {
|
|
|
2609
2609
|
return serializeStyles(args);
|
|
2610
2610
|
}
|
|
2611
2611
|
|
|
2612
|
+
var keyframes = function keyframes() {
|
|
2613
|
+
var insertable = css.apply(void 0, arguments);
|
|
2614
|
+
var name = "animation-" + insertable.name; // $FlowFixMe
|
|
2615
|
+
|
|
2616
|
+
return {
|
|
2617
|
+
name: name,
|
|
2618
|
+
styles: "@keyframes " + name + "{" + insertable.styles + "}",
|
|
2619
|
+
anim: 1,
|
|
2620
|
+
toString: function toString() {
|
|
2621
|
+
return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
|
|
2622
|
+
}
|
|
2623
|
+
};
|
|
2624
|
+
};
|
|
2625
|
+
|
|
2612
2626
|
var classnames$2 = function classnames(args) {
|
|
2613
2627
|
var len = args.length;
|
|
2614
2628
|
var i = 0;
|
|
@@ -3153,7 +3167,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3153
3167
|
desktop: 1280,
|
|
3154
3168
|
};
|
|
3155
3169
|
|
|
3156
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
3170
|
+
var Container$1j = newStyled.div(templateObject_1$2a || (templateObject_1$2a = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3157
3171
|
var height = _a.height;
|
|
3158
3172
|
return (height ? height : '1.5em');
|
|
3159
3173
|
}, function (_a) {
|
|
@@ -3180,9 +3194,9 @@ var SkeletonBox = function (_a) {
|
|
|
3180
3194
|
var theme = useTheme();
|
|
3181
3195
|
return jsxRuntime.jsx(Container$1j, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3182
3196
|
};
|
|
3183
|
-
var templateObject_1$
|
|
3197
|
+
var templateObject_1$2a;
|
|
3184
3198
|
|
|
3185
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3199
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$29 || (templateObject_1$29 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3186
3200
|
var width = _a.width;
|
|
3187
3201
|
return width;
|
|
3188
3202
|
}, function (_a) {
|
|
@@ -3198,7 +3212,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$26 || (templateObject_1$26
|
|
|
3198
3212
|
var opacity = _a.opacity;
|
|
3199
3213
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3200
3214
|
});
|
|
3201
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3215
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1v || (templateObject_2$1v = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3202
3216
|
var width = _a.width;
|
|
3203
3217
|
return width;
|
|
3204
3218
|
}, function (_a) {
|
|
@@ -3211,7 +3225,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1s || (templateObject_2$
|
|
|
3211
3225
|
var opacity = _a.opacity;
|
|
3212
3226
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3213
3227
|
});
|
|
3214
|
-
var templateObject_1$
|
|
3228
|
+
var templateObject_1$29, templateObject_2$1v;
|
|
3215
3229
|
|
|
3216
3230
|
/* eslint-disable no-undef */
|
|
3217
3231
|
var cache = new Map();
|
|
@@ -3387,7 +3401,7 @@ var buildImageUrl = function (_a) {
|
|
|
3387
3401
|
}
|
|
3388
3402
|
};
|
|
3389
3403
|
|
|
3390
|
-
var Img = newStyled.img(templateObject_1$
|
|
3404
|
+
var Img = newStyled.img(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3391
3405
|
var Image$3 = function (_a) {
|
|
3392
3406
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3393
3407
|
var config = useTheme().config;
|
|
@@ -3396,7 +3410,7 @@ var Image$3 = function (_a) {
|
|
|
3396
3410
|
: src;
|
|
3397
3411
|
return (jsxRuntime.jsx(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3398
3412
|
};
|
|
3399
|
-
var templateObject_1$
|
|
3413
|
+
var templateObject_1$28;
|
|
3400
3414
|
|
|
3401
3415
|
exports.CardSectionType = void 0;
|
|
3402
3416
|
(function (CardSectionType) {
|
|
@@ -3452,7 +3466,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3452
3466
|
};
|
|
3453
3467
|
}
|
|
3454
3468
|
};
|
|
3455
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
3469
|
+
var Container$1i = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
3456
3470
|
var backgroundColor = _a.backgroundColor;
|
|
3457
3471
|
return backgroundColor;
|
|
3458
3472
|
}, function (_a) {
|
|
@@ -3474,7 +3488,7 @@ var Container$1i = newStyled.div(templateObject_1$24 || (templateObject_1$24 = _
|
|
|
3474
3488
|
var size = _a.size;
|
|
3475
3489
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3476
3490
|
});
|
|
3477
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3491
|
+
var H3$3 = newStyled.h3(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
3478
3492
|
var textColor = _a.textColor;
|
|
3479
3493
|
return textColor;
|
|
3480
3494
|
}, function (_a) {
|
|
@@ -3491,7 +3505,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3491
3505
|
var theme = useTheme();
|
|
3492
3506
|
return (jsxRuntime.jsx(Container$1i, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3493
3507
|
};
|
|
3494
|
-
var templateObject_1$
|
|
3508
|
+
var templateObject_1$27, templateObject_2$1u;
|
|
3495
3509
|
|
|
3496
3510
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3497
3511
|
var _a, _b, _c;
|
|
@@ -3522,7 +3536,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3522
3536
|
};
|
|
3523
3537
|
}
|
|
3524
3538
|
};
|
|
3525
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
3539
|
+
var Container$1h = 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) {
|
|
3526
3540
|
var backgroundColor = _a.backgroundColor;
|
|
3527
3541
|
return backgroundColor;
|
|
3528
3542
|
}, function (_a) {
|
|
@@ -3544,7 +3558,7 @@ var Container$1h = newStyled.div(templateObject_1$23 || (templateObject_1$23 = _
|
|
|
3544
3558
|
var size = _a.size;
|
|
3545
3559
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3546
3560
|
});
|
|
3547
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3561
|
+
var H3$2 = 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) {
|
|
3548
3562
|
var textColor = _a.textColor;
|
|
3549
3563
|
return textColor;
|
|
3550
3564
|
}, function (_a) {
|
|
@@ -3561,7 +3575,7 @@ var DiscountTag$2 = function (_a) {
|
|
|
3561
3575
|
var theme = useTheme();
|
|
3562
3576
|
return (jsxRuntime.jsx(Container$1h, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3563
3577
|
};
|
|
3564
|
-
var templateObject_1$
|
|
3578
|
+
var templateObject_1$26, templateObject_2$1t;
|
|
3565
3579
|
|
|
3566
3580
|
function getWindowDimensions() {
|
|
3567
3581
|
if (typeof window === 'undefined')
|
|
@@ -3656,8 +3670,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3656
3670
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3657
3671
|
}
|
|
3658
3672
|
};
|
|
3659
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
3660
|
-
var Price = newStyled.p(templateObject_2$
|
|
3673
|
+
var Container$1g = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3674
|
+
var Price = newStyled.p(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
3661
3675
|
var weight = _a.weight;
|
|
3662
3676
|
return (weight ? weight : '400');
|
|
3663
3677
|
}, function (_a) {
|
|
@@ -3681,7 +3695,7 @@ var Price = newStyled.p(templateObject_2$1p || (templateObject_2$1p = __makeTemp
|
|
|
3681
3695
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3682
3696
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
3683
3697
|
});
|
|
3684
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3698
|
+
var TagContainer = newStyled.div(templateObject_3$19 || (templateObject_3$19 = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3685
3699
|
var _b;
|
|
3686
3700
|
var size = _a.size;
|
|
3687
3701
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3714,9 +3728,9 @@ var PriceLabel$1 = function (_a) {
|
|
|
3714
3728
|
};
|
|
3715
3729
|
return (jsxRuntime.jsxs(Container$1g, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3716
3730
|
};
|
|
3717
|
-
var templateObject_1$
|
|
3731
|
+
var templateObject_1$25, templateObject_2$1s, templateObject_3$19;
|
|
3718
3732
|
|
|
3719
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3733
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3720
3734
|
var PriceLabelV2$1 = function (_a) {
|
|
3721
3735
|
var _b;
|
|
3722
3736
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3787,11 +3801,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3787
3801
|
lineHeight: '22px',
|
|
3788
3802
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3789
3803
|
};
|
|
3790
|
-
var templateObject_1$
|
|
3804
|
+
var templateObject_1$24;
|
|
3791
3805
|
|
|
3792
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3793
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3794
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3806
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3807
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3808
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$18 || (templateObject_3$18 = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3795
3809
|
var PriceLabelV3 = function (_a) {
|
|
3796
3810
|
var _b;
|
|
3797
3811
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -3862,9 +3876,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3862
3876
|
lineHeight: '22px',
|
|
3863
3877
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3864
3878
|
};
|
|
3865
|
-
var templateObject_1$
|
|
3879
|
+
var templateObject_1$23, templateObject_2$1r, templateObject_3$18;
|
|
3866
3880
|
|
|
3867
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3881
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __makeTemplateObject(["\n display: flex;\n margin-left: -5px;\n"], ["\n display: flex;\n margin-left: -5px;\n"])));
|
|
3868
3882
|
var PriceLabel = function (_a) {
|
|
3869
3883
|
var _b;
|
|
3870
3884
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
@@ -3898,9 +3912,9 @@ var PriceLabel = function (_a) {
|
|
|
3898
3912
|
marginTop: '-6px',
|
|
3899
3913
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3900
3914
|
};
|
|
3901
|
-
var templateObject_1$
|
|
3915
|
+
var templateObject_1$22;
|
|
3902
3916
|
|
|
3903
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3917
|
+
var FinalPriceStyledContainer = 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"])));
|
|
3904
3918
|
var PriceLabelV2 = function (_a) {
|
|
3905
3919
|
var _b;
|
|
3906
3920
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
@@ -3933,7 +3947,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
3933
3947
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3934
3948
|
return (jsxRuntime.jsxs(Container$1g, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3935
3949
|
};
|
|
3936
|
-
var templateObject_1$
|
|
3950
|
+
var templateObject_1$21;
|
|
3937
3951
|
|
|
3938
3952
|
var Add = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3939
3953
|
|
|
@@ -4757,12 +4771,12 @@ function jsxs(type, props, key) {
|
|
|
4757
4771
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4758
4772
|
// `variants` styles that are consistent through all themes.
|
|
4759
4773
|
var TAGS = {
|
|
4760
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4761
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4762
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4763
|
-
display1: newStyled.h1(templateObject_4$
|
|
4764
|
-
display2: newStyled.h2(templateObject_5$
|
|
4765
|
-
display3: newStyled.h3(templateObject_6$
|
|
4774
|
+
hero1: newStyled.h1(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject([""], [""]))),
|
|
4775
|
+
hero2: newStyled.h2(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject([""], [""]))),
|
|
4776
|
+
hero3: newStyled.h3(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject([""], [""]))),
|
|
4777
|
+
display1: newStyled.h1(templateObject_4$U || (templateObject_4$U = __makeTemplateObject([""], [""]))),
|
|
4778
|
+
display2: newStyled.h2(templateObject_5$F || (templateObject_5$F = __makeTemplateObject([""], [""]))),
|
|
4779
|
+
display3: newStyled.h3(templateObject_6$z || (templateObject_6$z = __makeTemplateObject([""], [""]))),
|
|
4766
4780
|
heading1: newStyled.h1(templateObject_7$p || (templateObject_7$p = __makeTemplateObject([""], [""]))),
|
|
4767
4781
|
heading2: newStyled.h2(templateObject_8$k || (templateObject_8$k = __makeTemplateObject([""], [""]))),
|
|
4768
4782
|
heading3: newStyled.h3(templateObject_9$b || (templateObject_9$b = __makeTemplateObject([""], [""]))),
|
|
@@ -4893,14 +4907,14 @@ var DEFAULTS = {
|
|
|
4893
4907
|
size: 'regular',
|
|
4894
4908
|
},
|
|
4895
4909
|
};
|
|
4896
|
-
var templateObject_1$
|
|
4897
|
-
|
|
4898
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
4899
|
-
var Card$
|
|
4900
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4901
|
-
var Label$6 = newStyled.div(templateObject_4$
|
|
4902
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4903
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4910
|
+
var templateObject_1$20, templateObject_2$1q, templateObject_3$17, templateObject_4$U, templateObject_5$F, templateObject_6$z, 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;
|
|
4911
|
+
|
|
4912
|
+
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"])));
|
|
4913
|
+
var Card$4 = newStyled.div(templateObject_2$1p || (templateObject_2$1p = __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"])));
|
|
4914
|
+
var Tag$2 = newStyled.div(templateObject_3$16 || (templateObject_3$16 = __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"])));
|
|
4915
|
+
var Label$6 = newStyled.div(templateObject_4$T || (templateObject_4$T = __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"])));
|
|
4916
|
+
var Check$1 = newStyled.div(templateObject_5$E || (templateObject_5$E = __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"])));
|
|
4917
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4904
4918
|
var PackSelectorV2 = function (_a) {
|
|
4905
4919
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4906
4920
|
return (jsxRuntime.jsx(Container$1f, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4917,7 +4931,7 @@ var PackCard$1 = function (_a) {
|
|
|
4917
4931
|
.then(function (icon) { return setIcon(icon); })
|
|
4918
4932
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4919
4933
|
}, [pack.meta.icon]);
|
|
4920
|
-
return (jsxRuntime.jsxs(Card$
|
|
4934
|
+
return (jsxRuntime.jsxs(Card$4, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$6, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsxRuntime.jsx(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(DiscountContainer$1, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
4921
4935
|
locale: 'en-US',
|
|
4922
4936
|
currency: currencyCode || 'USD',
|
|
4923
4937
|
}) }), void 0), pack.meta.quantity > 1 ? (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
@@ -4925,27 +4939,27 @@ var PackCard$1 = function (_a) {
|
|
|
4925
4939
|
currency: currencyCode || 'USD',
|
|
4926
4940
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4927
4941
|
};
|
|
4928
|
-
var templateObject_1$
|
|
4942
|
+
var templateObject_1$1$, templateObject_2$1p, templateObject_3$16, templateObject_4$T, templateObject_5$E, templateObject_6$y;
|
|
4929
4943
|
|
|
4930
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
4931
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4944
|
+
var Container$1e = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4945
|
+
var DropContainer = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4932
4946
|
var DropList = function (_a) {
|
|
4933
4947
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4934
4948
|
return (jsxRuntime.jsx(Container$1e, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4935
4949
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4936
4950
|
}) }, void 0));
|
|
4937
4951
|
};
|
|
4938
|
-
var templateObject_1$
|
|
4952
|
+
var templateObject_1$1_, templateObject_2$1o;
|
|
4939
4953
|
|
|
4940
4954
|
var DROPS_TOTAL = 5;
|
|
4941
|
-
var Container$1d = newStyled.div(templateObject_1$
|
|
4942
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4943
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4955
|
+
var Container$1d = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4956
|
+
var Title$b = newStyled.p(templateObject_2$1n || (templateObject_2$1n = __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"])));
|
|
4957
|
+
var Description$3 = newStyled.p(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4944
4958
|
var AbsorbencyLevel = function (_a) {
|
|
4945
4959
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4946
4960
|
return (jsxRuntime.jsxs(Container$1d, { children: [jsxRuntime.jsx(Title$b, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4947
4961
|
};
|
|
4948
|
-
var templateObject_1$
|
|
4962
|
+
var templateObject_1$1Z, templateObject_2$1n, templateObject_3$15;
|
|
4949
4963
|
|
|
4950
4964
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4951
4965
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -5021,7 +5035,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
5021
5035
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
5022
5036
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
5023
5037
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
5024
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5038
|
+
var StyledContent$1 = newStyled.button(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
5025
5039
|
var Accordion$1 = function (_a) {
|
|
5026
5040
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
5027
5041
|
var theme = useTheme();
|
|
@@ -5045,9 +5059,9 @@ var Accordion$1 = function (_a) {
|
|
|
5045
5059
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5046
5060
|
} }), void 0));
|
|
5047
5061
|
};
|
|
5048
|
-
var templateObject_1$
|
|
5062
|
+
var templateObject_1$1Y;
|
|
5049
5063
|
|
|
5050
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
5064
|
+
var Container$1c = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
5051
5065
|
var AccordionOptions = function (_a) {
|
|
5052
5066
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5053
5067
|
var _b = React$2.useState({
|
|
@@ -5071,7 +5085,7 @@ var AccordionOptions = function (_a) {
|
|
|
5071
5085
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5072
5086
|
}) }, void 0));
|
|
5073
5087
|
};
|
|
5074
|
-
var templateObject_1$
|
|
5088
|
+
var templateObject_1$1X;
|
|
5075
5089
|
|
|
5076
5090
|
/**
|
|
5077
5091
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5207,22 +5221,22 @@ var isValidDate = function (value) {
|
|
|
5207
5221
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5208
5222
|
};
|
|
5209
5223
|
|
|
5210
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5211
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5212
|
-
var templateObject_1$
|
|
5224
|
+
var Bold = newStyled.span(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5225
|
+
var FlexContainer$3 = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __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"])));
|
|
5226
|
+
var templateObject_1$1W, templateObject_2$1m;
|
|
5213
5227
|
|
|
5214
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
5228
|
+
var Container$1b = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
5215
5229
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5216
5230
|
return width;
|
|
5217
5231
|
}, function (_a) {
|
|
5218
5232
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5219
5233
|
return height;
|
|
5220
5234
|
});
|
|
5221
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5222
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5223
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5224
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5225
|
-
var templateObject_1$
|
|
5235
|
+
var FlexCentered = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __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"])));
|
|
5236
|
+
var LeftSide = newStyled.div(templateObject_3$14 || (templateObject_3$14 = __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"])));
|
|
5237
|
+
var RightSide = newStyled.div(templateObject_4$S || (templateObject_4$S = __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"])));
|
|
5238
|
+
var FlexStart = newStyled.div(templateObject_5$D || (templateObject_5$D = __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"])));
|
|
5239
|
+
var templateObject_1$1V, templateObject_2$1l, templateObject_3$14, templateObject_4$S, templateObject_5$D;
|
|
5226
5240
|
|
|
5227
5241
|
var CouponCard = function (_a) {
|
|
5228
5242
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -5278,14 +5292,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5278
5292
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5279
5293
|
};
|
|
5280
5294
|
|
|
5281
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5282
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5295
|
+
var ErrorText = newStyled.h3(templateObject_1$1U || (templateObject_1$1U = __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; });
|
|
5296
|
+
var ErrorContainer = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
5283
5297
|
var Error$1 = function (_a) {
|
|
5284
5298
|
var error = _a.error;
|
|
5285
5299
|
var theme = useTheme();
|
|
5286
5300
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5287
5301
|
};
|
|
5288
|
-
var templateObject_1$
|
|
5302
|
+
var templateObject_1$1U, templateObject_2$1k;
|
|
5289
5303
|
|
|
5290
5304
|
var BaseSelectButton = function (_a) {
|
|
5291
5305
|
var children = _a.children, as = _a.as;
|
|
@@ -5302,7 +5316,7 @@ function BaseSelectOption(_a) {
|
|
|
5302
5316
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5303
5317
|
}
|
|
5304
5318
|
|
|
5305
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5319
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5306
5320
|
function BaseSelect(_a) {
|
|
5307
5321
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5308
5322
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5312,7 +5326,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5312
5326
|
Options: BaseSelectOptions,
|
|
5313
5327
|
Option: BaseSelectOption,
|
|
5314
5328
|
});
|
|
5315
|
-
var templateObject_1$
|
|
5329
|
+
var templateObject_1$1T;
|
|
5316
5330
|
|
|
5317
5331
|
var CustomButton = newStyled.button(function (_a) {
|
|
5318
5332
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5351,7 +5365,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5351
5365
|
});
|
|
5352
5366
|
});
|
|
5353
5367
|
// TODO Remove this when we find the real solution
|
|
5354
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5368
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
5355
5369
|
var open = _a.open;
|
|
5356
5370
|
return open &&
|
|
5357
5371
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5371,7 +5385,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5371
5385
|
} }), void 0));
|
|
5372
5386
|
};
|
|
5373
5387
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
5374
|
-
var templateObject_1$
|
|
5388
|
+
var templateObject_1$1S;
|
|
5375
5389
|
|
|
5376
5390
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5377
5391
|
var theme = _a.theme;
|
|
@@ -5538,7 +5552,7 @@ var CustomCheckboxStyles = {
|
|
|
5538
5552
|
},
|
|
5539
5553
|
};
|
|
5540
5554
|
|
|
5541
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
5555
|
+
var Container$1a = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
5542
5556
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5543
5557
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5544
5558
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5549,7 +5563,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5549
5563
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5550
5564
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5551
5565
|
]; });
|
|
5552
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5566
|
+
var Input$5 = newStyled.input(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
5553
5567
|
var disabled = _a.disabled;
|
|
5554
5568
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5555
5569
|
});
|
|
@@ -5565,7 +5579,7 @@ var Checkbox = function (_a) {
|
|
|
5565
5579
|
};
|
|
5566
5580
|
return (jsxRuntime.jsxs(Container$1a, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$5, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5567
5581
|
};
|
|
5568
|
-
var templateObject_1$
|
|
5582
|
+
var templateObject_1$1R, templateObject_2$1j;
|
|
5569
5583
|
|
|
5570
5584
|
var CustomOption = newStyled.li(function (_a) {
|
|
5571
5585
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5614,9 +5628,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5614
5628
|
Option: BaseDropdownOption,
|
|
5615
5629
|
});
|
|
5616
5630
|
|
|
5617
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
5618
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5619
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5631
|
+
var Container$19 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject([""], [""])));
|
|
5632
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1i || (templateObject_2$1i = __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"])));
|
|
5633
|
+
var SelectedOption = newStyled.span(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5620
5634
|
var fontWeight = _a.fontWeight;
|
|
5621
5635
|
return fontWeight || '';
|
|
5622
5636
|
});
|
|
@@ -5651,7 +5665,7 @@ function SimpleDropdown(_a) {
|
|
|
5651
5665
|
var DropdownContainer = showRequiredPlaceholder ? Container$19 : React$2.Fragment;
|
|
5652
5666
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5653
5667
|
}
|
|
5654
|
-
var templateObject_1$
|
|
5668
|
+
var templateObject_1$1Q, templateObject_2$1i, templateObject_3$13;
|
|
5655
5669
|
|
|
5656
5670
|
/* base styles & size variants */
|
|
5657
5671
|
var CustomRadioStyles$2 = {
|
|
@@ -5716,9 +5730,9 @@ var ContainerStyles$2 = {
|
|
|
5716
5730
|
},
|
|
5717
5731
|
};
|
|
5718
5732
|
|
|
5719
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5733
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5720
5734
|
var Container$18 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5721
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5735
|
+
var Input$4 = newStyled.input(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5722
5736
|
var disabled = _a.disabled;
|
|
5723
5737
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5724
5738
|
});
|
|
@@ -5726,14 +5740,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5726
5740
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5727
5741
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5728
5742
|
]; });
|
|
5729
|
-
var StyledLabel$3 = newStyled(Label$5)(templateObject_3
|
|
5743
|
+
var StyledLabel$3 = newStyled(Label$5)(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5730
5744
|
var theme = _a.theme;
|
|
5731
5745
|
return theme.component.radio.textSize;
|
|
5732
5746
|
}, function (_a) {
|
|
5733
5747
|
var theme = _a.theme;
|
|
5734
5748
|
return theme.component.radio.lineHeight;
|
|
5735
5749
|
});
|
|
5736
|
-
var StyledLabelV2 = newStyled(Label$5)(templateObject_4$
|
|
5750
|
+
var StyledLabelV2 = newStyled(Label$5)(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"])), function (_a) {
|
|
5737
5751
|
var theme = _a.theme;
|
|
5738
5752
|
return theme.component.radio.textSize;
|
|
5739
5753
|
}, function (_a) {
|
|
@@ -5749,7 +5763,7 @@ var RadioInput = function (_a) {
|
|
|
5749
5763
|
};
|
|
5750
5764
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$18, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsx(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: label }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5751
5765
|
};
|
|
5752
|
-
var templateObject_1$
|
|
5766
|
+
var templateObject_1$1P, templateObject_2$1h, templateObject_3$12, templateObject_4$R;
|
|
5753
5767
|
|
|
5754
5768
|
var useOnClickOutside = function (ref, handler) {
|
|
5755
5769
|
React$2.useEffect(function () {
|
|
@@ -5842,7 +5856,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5842
5856
|
}
|
|
5843
5857
|
};
|
|
5844
5858
|
|
|
5845
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5859
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5846
5860
|
var position = _a.position;
|
|
5847
5861
|
return getWrapperFlexDirection(position);
|
|
5848
5862
|
}, function (_a) {
|
|
@@ -5852,7 +5866,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __ma
|
|
|
5852
5866
|
var disableHover = _a.disableHover;
|
|
5853
5867
|
return (disableHover ? 0 : 1);
|
|
5854
5868
|
});
|
|
5855
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5869
|
+
var TooltipContainer = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
5856
5870
|
var position = _a.position;
|
|
5857
5871
|
return getContainerFlexDirection(position);
|
|
5858
5872
|
}, function (_a) {
|
|
@@ -5880,14 +5894,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1d || (templateObject_2$1d
|
|
|
5880
5894
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5881
5895
|
return actual === expected ? margin : '0';
|
|
5882
5896
|
};
|
|
5883
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5897
|
+
var ContentWrapper = newStyled.div(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
5884
5898
|
var borderColor = _a.borderColor;
|
|
5885
5899
|
return borderColor;
|
|
5886
5900
|
}, function (_a) {
|
|
5887
5901
|
var backgroundColor = _a.backgroundColor;
|
|
5888
5902
|
return backgroundColor;
|
|
5889
5903
|
});
|
|
5890
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5904
|
+
var TooltipText = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
|
|
5891
5905
|
var theme = _a.theme;
|
|
5892
5906
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5893
5907
|
}, function (_a) {
|
|
@@ -5897,8 +5911,8 @@ var TooltipText = newStyled.div(templateObject_4$O || (templateObject_4$O = __ma
|
|
|
5897
5911
|
var color = _a.color;
|
|
5898
5912
|
return color;
|
|
5899
5913
|
});
|
|
5900
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5901
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
5914
|
+
var TopSection = newStyled.div(templateObject_5$C || (templateObject_5$C = __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"])));
|
|
5915
|
+
var Title$a = newStyled.h1(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5902
5916
|
var color = _a.color;
|
|
5903
5917
|
return color;
|
|
5904
5918
|
});
|
|
@@ -5907,7 +5921,7 @@ var CloseToolTip = newStyled.button(templateObject_8$j || (templateObject_8$j =
|
|
|
5907
5921
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5908
5922
|
return right;
|
|
5909
5923
|
});
|
|
5910
|
-
var templateObject_1$
|
|
5924
|
+
var templateObject_1$1O, templateObject_2$1g, templateObject_3$11, templateObject_4$Q, templateObject_5$C, templateObject_6$x, templateObject_7$o, templateObject_8$j;
|
|
5911
5925
|
|
|
5912
5926
|
var Tooltip = function (_a) {
|
|
5913
5927
|
var _b;
|
|
@@ -5950,8 +5964,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5950
5964
|
};
|
|
5951
5965
|
};
|
|
5952
5966
|
|
|
5953
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
5954
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5967
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5968
|
+
var ContainerBase$2 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5955
5969
|
var selected = _a.selected, theme = _a.theme;
|
|
5956
5970
|
return selected
|
|
5957
5971
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5965,19 +5979,19 @@ var ContainerBase$2 = newStyled.div(templateObject_2$1c || (templateObject_2$1c
|
|
|
5965
5979
|
var theme = _a.theme;
|
|
5966
5980
|
return theme.colors.pallete.primary.color;
|
|
5967
5981
|
});
|
|
5968
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3$
|
|
5982
|
+
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
5969
5983
|
var onClick = _a.onClick;
|
|
5970
5984
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5971
5985
|
});
|
|
5972
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
5973
|
-
var SubscriptionHeader$2 = newStyled.div(templateObject_5$
|
|
5986
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5987
|
+
var SubscriptionHeader$2 = newStyled.div(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5974
5988
|
var theme = _a.theme;
|
|
5975
5989
|
return theme.colors.shades[200].color;
|
|
5976
5990
|
}, function (_a) {
|
|
5977
5991
|
var theme = _a.theme;
|
|
5978
5992
|
return theme.colors.pallete.primary.color;
|
|
5979
5993
|
});
|
|
5980
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_6$
|
|
5994
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5981
5995
|
var Benefit$2 = newStyled.div(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
5982
5996
|
var BenefitText$2 = newStyled(Text$7)(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5983
5997
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
@@ -5988,7 +6002,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
5988
6002
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5989
6003
|
});
|
|
5990
6004
|
var Container$17 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5991
|
-
var templateObject_1$
|
|
6005
|
+
var templateObject_1$1N, templateObject_2$1f, templateObject_3$10, templateObject_4$P, templateObject_5$B, templateObject_6$w, templateObject_7$n, templateObject_8$i, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
5992
6006
|
|
|
5993
6007
|
var radioIds$2 = {
|
|
5994
6008
|
oneTime: {
|
|
@@ -6043,12 +6057,12 @@ var Autoship = function (_a) {
|
|
|
6043
6057
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$2, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6044
6058
|
};
|
|
6045
6059
|
|
|
6046
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
6060
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
6047
6061
|
var theme = _a.theme;
|
|
6048
6062
|
return theme.name === 'TheSpaDr' &&
|
|
6049
6063
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
6050
6064
|
});
|
|
6051
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6065
|
+
var DiscountTag$1 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
6052
6066
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6053
6067
|
return isSelected
|
|
6054
6068
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6064,7 +6078,7 @@ var getSelectedBorder = function (_a) {
|
|
|
6064
6078
|
}
|
|
6065
6079
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6066
6080
|
};
|
|
6067
|
-
var ContainerBase$1 = newStyled.div(templateObject_3
|
|
6081
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6068
6082
|
var selected = _a.selected, theme = _a.theme;
|
|
6069
6083
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6070
6084
|
}, function (_a) {
|
|
@@ -6076,12 +6090,12 @@ var ContainerBase$1 = newStyled.div(templateObject_3$Y || (templateObject_3$Y =
|
|
|
6076
6090
|
var theme = _a.theme;
|
|
6077
6091
|
return theme.colors.pallete.primary.color;
|
|
6078
6092
|
});
|
|
6079
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
6093
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
6080
6094
|
var onClick = _a.onClick;
|
|
6081
6095
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6082
6096
|
});
|
|
6083
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
6084
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_6$
|
|
6097
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6098
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6085
6099
|
var theme = _a.theme;
|
|
6086
6100
|
return theme.colors.shades[200].color;
|
|
6087
6101
|
}, function (_a) {
|
|
@@ -6101,7 +6115,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6101
6115
|
var theme = _a.theme;
|
|
6102
6116
|
return theme.component.autoship.tooltip.margin;
|
|
6103
6117
|
});
|
|
6104
|
-
var templateObject_1$
|
|
6118
|
+
var templateObject_1$1M, templateObject_2$1e, templateObject_3$$, templateObject_4$O, templateObject_5$A, templateObject_6$v, templateObject_7$m, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2;
|
|
6105
6119
|
|
|
6106
6120
|
var radioIds$1 = {
|
|
6107
6121
|
oneTime: {
|
|
@@ -6179,13 +6193,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6179
6193
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
6180
6194
|
_a$2);
|
|
6181
6195
|
|
|
6182
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6183
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6184
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6185
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6186
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6187
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6188
|
-
var templateObject_1$
|
|
6196
|
+
var CustomerDetails = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject([""], [""])));
|
|
6197
|
+
var CustomerInfo = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
6198
|
+
var Name = newStyled.h4(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
6199
|
+
var StarIconContainer = newStyled.div(templateObject_4$N || (templateObject_4$N = __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"])));
|
|
6200
|
+
var Description$2 = newStyled.p(templateObject_5$z || (templateObject_5$z = __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"])));
|
|
6201
|
+
var ReviewDays = newStyled.span(templateObject_6$u || (templateObject_6$u = __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"])));
|
|
6202
|
+
var templateObject_1$1L, templateObject_2$1d, templateObject_3$_, templateObject_4$N, templateObject_5$z, templateObject_6$u;
|
|
6189
6203
|
|
|
6190
6204
|
var NameWithStars = function (_a) {
|
|
6191
6205
|
var name = _a.name, size = _a.size;
|
|
@@ -6203,10 +6217,10 @@ var ResultFeedback = function (_a) {
|
|
|
6203
6217
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6204
6218
|
};
|
|
6205
6219
|
|
|
6206
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6207
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6208
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6209
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6220
|
+
var Container$15 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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; });
|
|
6221
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __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"])));
|
|
6222
|
+
var ImageCard = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __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; });
|
|
6223
|
+
var UserInfoText = newStyled.div(templateObject_4$M || (templateObject_4$M = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6210
6224
|
var theme = _a.theme;
|
|
6211
6225
|
return theme.colors.pallete.secondary.color;
|
|
6212
6226
|
}, function (_a) {
|
|
@@ -6216,7 +6230,7 @@ var UserInfoText = newStyled.div(templateObject_4$K || (templateObject_4$K = __m
|
|
|
6216
6230
|
var theme = _a.theme, size = _a.size;
|
|
6217
6231
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6218
6232
|
});
|
|
6219
|
-
var templateObject_1$
|
|
6233
|
+
var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$M;
|
|
6220
6234
|
|
|
6221
6235
|
/* base styles & size variants */
|
|
6222
6236
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6294,7 +6308,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6294
6308
|
return (jsxRuntime.jsxs(Container$15, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6295
6309
|
};
|
|
6296
6310
|
|
|
6297
|
-
var Section = newStyled.div(templateObject_1$
|
|
6311
|
+
var Section = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
6298
6312
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6299
6313
|
});
|
|
6300
6314
|
var CardHeader = function (_a) {
|
|
@@ -6305,16 +6319,16 @@ var CardFooter = function (_a) {
|
|
|
6305
6319
|
var children = _a.children;
|
|
6306
6320
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6307
6321
|
};
|
|
6308
|
-
var templateObject_1$
|
|
6322
|
+
var templateObject_1$1J;
|
|
6309
6323
|
|
|
6310
|
-
var Body = newStyled.div(templateObject_1$
|
|
6311
|
-
var CardBody = function (_a) {
|
|
6324
|
+
var Body = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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"])));
|
|
6325
|
+
var CardBody$1 = function (_a) {
|
|
6312
6326
|
var children = _a.children;
|
|
6313
6327
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6314
6328
|
};
|
|
6315
|
-
var templateObject_1$
|
|
6329
|
+
var templateObject_1$1I;
|
|
6316
6330
|
|
|
6317
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6331
|
+
var Container$14 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
6318
6332
|
var flex = _a.flex;
|
|
6319
6333
|
return flex &&
|
|
6320
6334
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6326,55 +6340,55 @@ var Container$14 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = _
|
|
|
6326
6340
|
}, function (props) { return props.theme.component.card.borderRadius; }, function (props) {
|
|
6327
6341
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
6328
6342
|
});
|
|
6329
|
-
var Card$
|
|
6343
|
+
var Card$2 = function (_a) {
|
|
6330
6344
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
6331
6345
|
var theme = useTheme();
|
|
6332
6346
|
return (jsxRuntime.jsx(Container$14, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6333
6347
|
};
|
|
6334
|
-
var Card$
|
|
6348
|
+
var Card$3 = Object.assign(Card$2, {
|
|
6335
6349
|
Header: CardHeader,
|
|
6336
6350
|
Footer: CardFooter,
|
|
6337
|
-
Body: CardBody,
|
|
6351
|
+
Body: CardBody$1,
|
|
6338
6352
|
});
|
|
6339
|
-
var templateObject_1$
|
|
6353
|
+
var templateObject_1$1H;
|
|
6340
6354
|
|
|
6341
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6342
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6343
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6355
|
+
var StyledWrapper = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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"])));
|
|
6356
|
+
var StyledContainer = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
6357
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
6344
6358
|
var color = _a.color;
|
|
6345
6359
|
return color;
|
|
6346
6360
|
});
|
|
6347
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6348
|
-
var templateObject_1$
|
|
6361
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$L || (templateObject_4$L = __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"])));
|
|
6362
|
+
var templateObject_1$1G, templateObject_2$1b, templateObject_3$Y, templateObject_4$L;
|
|
6349
6363
|
|
|
6350
6364
|
var Minimalistic = function (_a) {
|
|
6351
6365
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
6352
6366
|
var theme = useTheme();
|
|
6353
|
-
return (jsxRuntime.jsx(Card$
|
|
6367
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6354
6368
|
};
|
|
6355
6369
|
|
|
6356
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6357
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6358
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6359
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6370
|
+
var Container$13 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6371
|
+
var Title$9 = newStyled.h1(templateObject_2$1a || (templateObject_2$1a = __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; });
|
|
6372
|
+
var Details$1 = newStyled.span(templateObject_3$X || (templateObject_3$X = __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; });
|
|
6373
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
6360
6374
|
var Simple = function (_a) {
|
|
6361
6375
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
6362
6376
|
var theme = useTheme();
|
|
6363
|
-
return (jsxRuntime.jsx(Card$
|
|
6377
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$13, { children: [jsxRuntime.jsx(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6364
6378
|
};
|
|
6365
|
-
var templateObject_1$
|
|
6379
|
+
var templateObject_1$1F, templateObject_2$1a, templateObject_3$X, templateObject_4$K;
|
|
6366
6380
|
|
|
6367
6381
|
var Bundle = {
|
|
6368
6382
|
Minimalistic: Minimalistic,
|
|
6369
6383
|
Simple: Simple,
|
|
6370
6384
|
};
|
|
6371
6385
|
|
|
6372
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
6386
|
+
var Container$12 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
6373
6387
|
var displayBNPL = _a.displayBNPL;
|
|
6374
6388
|
return (displayBNPL ? 'flex' : 'none');
|
|
6375
6389
|
});
|
|
6376
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6377
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6390
|
+
var TextContainer$1 = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __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"])));
|
|
6391
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6378
6392
|
var BuyNowPayLater = function (_a) {
|
|
6379
6393
|
var _b;
|
|
6380
6394
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -6386,41 +6400,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6386
6400
|
}
|
|
6387
6401
|
return (jsxRuntime.jsx(Container$12, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6388
6402
|
};
|
|
6389
|
-
var templateObject_1$
|
|
6403
|
+
var templateObject_1$1E, templateObject_2$19, templateObject_3$W;
|
|
6390
6404
|
|
|
6391
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6405
|
+
var Text$6 = newStyled.span(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6392
6406
|
var Title$8 = function (_a) {
|
|
6393
6407
|
var title = _a.title;
|
|
6394
6408
|
var theme = useTheme();
|
|
6395
6409
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6396
6410
|
};
|
|
6397
|
-
var templateObject_1$
|
|
6411
|
+
var templateObject_1$1D;
|
|
6398
6412
|
|
|
6399
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6413
|
+
var P$3 = newStyled.p(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6400
6414
|
var Promo = function (_a) {
|
|
6401
6415
|
var text = _a.text;
|
|
6402
6416
|
var theme = useTheme();
|
|
6403
6417
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6404
6418
|
};
|
|
6405
|
-
var templateObject_1$
|
|
6419
|
+
var templateObject_1$1C;
|
|
6406
6420
|
|
|
6407
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6421
|
+
var Text$5 = newStyled.span(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
6408
6422
|
var Description$1 = function (_a) {
|
|
6409
6423
|
var text = _a.text;
|
|
6410
6424
|
var theme = useTheme();
|
|
6411
6425
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6412
6426
|
};
|
|
6413
|
-
var templateObject_1$
|
|
6427
|
+
var templateObject_1$1B;
|
|
6414
6428
|
|
|
6415
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
6429
|
+
var Container$11 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
6416
6430
|
var CloseButton$1 = function (_a) {
|
|
6417
6431
|
var onClick = _a.onClick, size = _a.size;
|
|
6418
6432
|
var theme = useTheme();
|
|
6419
6433
|
return (jsxRuntime.jsx(Container$11, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6420
6434
|
};
|
|
6421
|
-
var templateObject_1$
|
|
6435
|
+
var templateObject_1$1A;
|
|
6422
6436
|
|
|
6423
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6437
|
+
var Text$4 = newStyled.h3(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
6424
6438
|
var backgroundColor = _a.backgroundColor;
|
|
6425
6439
|
return backgroundColor;
|
|
6426
6440
|
}, function (_a) {
|
|
@@ -6435,7 +6449,7 @@ var OfferBanner = function (_a) {
|
|
|
6435
6449
|
var theme = useTheme();
|
|
6436
6450
|
return (jsxRuntime.jsx(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6437
6451
|
};
|
|
6438
|
-
var templateObject_1$
|
|
6452
|
+
var templateObject_1$1z;
|
|
6439
6453
|
|
|
6440
6454
|
var CartProductItem = {
|
|
6441
6455
|
Title: Title$8,
|
|
@@ -6445,12 +6459,12 @@ var CartProductItem = {
|
|
|
6445
6459
|
CloseButton: CloseButton$1,
|
|
6446
6460
|
};
|
|
6447
6461
|
|
|
6448
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
6449
|
-
var MobileContainer = newStyled(Container$10)(templateObject_2$
|
|
6450
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6451
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6452
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6453
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6462
|
+
var Container$10 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
6463
|
+
var MobileContainer = newStyled(Container$10)(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6464
|
+
var DollarPart = newStyled.span(templateObject_3$V || (templateObject_3$V = __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"])));
|
|
6465
|
+
var ClubMembersText = newStyled.span(templateObject_4$J || (templateObject_4$J = __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"])));
|
|
6466
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6467
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6454
6468
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6455
6469
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6456
6470
|
var ClubPriceLabel = function (_a) {
|
|
@@ -6458,7 +6472,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6458
6472
|
var isMobile = useWindowDimensions().isMobile;
|
|
6459
6473
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$10, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6460
6474
|
};
|
|
6461
|
-
var templateObject_1$
|
|
6475
|
+
var templateObject_1$1y, templateObject_2$18, templateObject_3$V, templateObject_4$J, templateObject_5$y, templateObject_6$t, templateObject_7$l, templateObject_8$g;
|
|
6462
6476
|
|
|
6463
6477
|
var Spacing = function (_a) {
|
|
6464
6478
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6466,10 +6480,10 @@ var Spacing = function (_a) {
|
|
|
6466
6480
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6467
6481
|
};
|
|
6468
6482
|
|
|
6469
|
-
var Container$$ = newStyled('div')(templateObject_1$
|
|
6470
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6471
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6472
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6483
|
+
var Container$$ = newStyled('div')(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
6484
|
+
var Content$2 = newStyled('div')(templateObject_2$17 || (templateObject_2$17 = __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"])));
|
|
6485
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$U || (templateObject_3$U = __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"])));
|
|
6486
|
+
var Bar$2 = newStyled('div')(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6473
6487
|
var index = _a.index;
|
|
6474
6488
|
return "".concat(6 + 3 * index, "px");
|
|
6475
6489
|
}, function (_a) {
|
|
@@ -6480,13 +6494,13 @@ var StrengthBars = function (_a) {
|
|
|
6480
6494
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6481
6495
|
return (jsxRuntime.jsxs(Container$$, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6482
6496
|
};
|
|
6483
|
-
var templateObject_1$
|
|
6497
|
+
var templateObject_1$1x, templateObject_2$17, templateObject_3$U, templateObject_4$I;
|
|
6484
6498
|
|
|
6485
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6486
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6487
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6488
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6489
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6499
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1w || (templateObject_1$1w = __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"])));
|
|
6500
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$16 || (templateObject_2$16 = __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"])));
|
|
6501
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6502
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6503
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6490
6504
|
var RegularPriceTag = function () {
|
|
6491
6505
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6492
6506
|
};
|
|
@@ -6539,12 +6553,12 @@ var PriceLabelV4 = function (_a) {
|
|
|
6539
6553
|
? finalPriceArray[0]
|
|
6540
6554
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6541
6555
|
};
|
|
6542
|
-
var templateObject_1$
|
|
6556
|
+
var templateObject_1$1w, templateObject_2$16, templateObject_3$T, templateObject_4$H, templateObject_5$x;
|
|
6543
6557
|
|
|
6544
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
6545
|
-
var templateObject_1$
|
|
6558
|
+
var Container$_ = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6559
|
+
var templateObject_1$1v;
|
|
6546
6560
|
|
|
6547
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6561
|
+
var StarContainer = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6548
6562
|
var marginRight = _a.marginRight;
|
|
6549
6563
|
return marginRight;
|
|
6550
6564
|
});
|
|
@@ -6560,7 +6574,7 @@ var StarList = function (_a) {
|
|
|
6560
6574
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6561
6575
|
}) }, void 0));
|
|
6562
6576
|
};
|
|
6563
|
-
var templateObject_1$
|
|
6577
|
+
var templateObject_1$1u;
|
|
6564
6578
|
|
|
6565
6579
|
/* base styles & size variants */
|
|
6566
6580
|
var LabelStyles = {
|
|
@@ -6601,8 +6615,8 @@ var LabelStyles = {
|
|
|
6601
6615
|
});
|
|
6602
6616
|
},
|
|
6603
6617
|
};
|
|
6604
|
-
var Container$Z = newStyled.a(templateObject_1$
|
|
6605
|
-
var templateObject_1$
|
|
6618
|
+
var Container$Z = newStyled.a(templateObject_1$1t || (templateObject_1$1t = __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"])));
|
|
6619
|
+
var templateObject_1$1t;
|
|
6606
6620
|
|
|
6607
6621
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6608
6622
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6622,7 +6636,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6622
6636
|
}),
|
|
6623
6637
|
];
|
|
6624
6638
|
});
|
|
6625
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6639
|
+
var RatingLabel = newStyled.span(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6626
6640
|
var starsNumber = 5;
|
|
6627
6641
|
var Rating = function (_a) {
|
|
6628
6642
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6645,7 +6659,7 @@ var Rating = function (_a) {
|
|
|
6645
6659
|
: {};
|
|
6646
6660
|
return (jsxRuntime.jsxs(Container$Z, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6647
6661
|
};
|
|
6648
|
-
var templateObject_1$
|
|
6662
|
+
var templateObject_1$1s;
|
|
6649
6663
|
|
|
6650
6664
|
var ImageContainer$6 = newStyled.div(function (_a) {
|
|
6651
6665
|
var width = _a.width, height = _a.height;
|
|
@@ -6655,10 +6669,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6655
6669
|
height: height,
|
|
6656
6670
|
});
|
|
6657
6671
|
});
|
|
6658
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6659
|
-
var Container$Y = newStyled.a(templateObject_2$
|
|
6660
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6661
|
-
var Title$7 = newStyled.p(templateObject_4$
|
|
6672
|
+
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1r || (templateObject_1$1r = __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"])));
|
|
6673
|
+
var Container$Y = newStyled.a(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6674
|
+
var ProdCardContainer$4 = newStyled.div(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6675
|
+
var Title$7 = newStyled.p(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6662
6676
|
var getStylesBySize$c = function (size) {
|
|
6663
6677
|
switch (size) {
|
|
6664
6678
|
case exports.ComponentSize.Medium:
|
|
@@ -6684,11 +6698,11 @@ var getStylesBySize$c = function (size) {
|
|
|
6684
6698
|
};
|
|
6685
6699
|
}
|
|
6686
6700
|
};
|
|
6687
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
6701
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6688
6702
|
var style = _a.style;
|
|
6689
6703
|
return style.width;
|
|
6690
6704
|
});
|
|
6691
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_6$
|
|
6705
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6692
6706
|
var style = _a.style;
|
|
6693
6707
|
return style.width;
|
|
6694
6708
|
});
|
|
@@ -6753,7 +6767,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6753
6767
|
letterSpacing: '-0.05rem',
|
|
6754
6768
|
} }), void 0)) }), void 0)), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6755
6769
|
};
|
|
6756
|
-
var templateObject_1$
|
|
6770
|
+
var templateObject_1$1r, templateObject_2$15, templateObject_3$S, templateObject_4$G, templateObject_5$w, templateObject_6$s, templateObject_7$k;
|
|
6757
6771
|
|
|
6758
6772
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6759
6773
|
var width = _a.width, height = _a.height;
|
|
@@ -6763,10 +6777,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6763
6777
|
height: height,
|
|
6764
6778
|
});
|
|
6765
6779
|
});
|
|
6766
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6767
|
-
var Container$X = newStyled.a(templateObject_2$
|
|
6768
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6769
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
6780
|
+
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1q || (templateObject_1$1q = __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; });
|
|
6781
|
+
var Container$X = 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"])));
|
|
6782
|
+
var ProdCardContainer$3 = 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"])));
|
|
6783
|
+
var Title$6 = 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; });
|
|
6770
6784
|
var getStylesBySize$b = function (size) {
|
|
6771
6785
|
switch (size) {
|
|
6772
6786
|
case exports.ComponentSize.Medium:
|
|
@@ -6792,11 +6806,11 @@ var getStylesBySize$b = function (size) {
|
|
|
6792
6806
|
};
|
|
6793
6807
|
}
|
|
6794
6808
|
};
|
|
6795
|
-
var TopTagContainer$7 = newStyled.div(templateObject_5$
|
|
6809
|
+
var TopTagContainer$7 = 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) {
|
|
6796
6810
|
var style = _a.style;
|
|
6797
6811
|
return style.width;
|
|
6798
6812
|
});
|
|
6799
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6813
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6800
6814
|
var BottomTagContainer$7 = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6801
6815
|
var style = _a.style;
|
|
6802
6816
|
return style.width;
|
|
@@ -6852,9 +6866,9 @@ var ProductItemTK = function (_a) {
|
|
|
6852
6866
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6853
6867
|
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6854
6868
|
};
|
|
6855
|
-
var templateObject_1$
|
|
6869
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$F, templateObject_5$v, templateObject_6$r, templateObject_7$j, templateObject_8$f;
|
|
6856
6870
|
|
|
6857
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
6871
|
+
var Container$W = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
6858
6872
|
function withProductGrid(ProductItemComponent, data) {
|
|
6859
6873
|
function WithProductGrid(props) {
|
|
6860
6874
|
return (jsxRuntime.jsx(Container$W, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6864,7 +6878,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6864
6878
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6865
6879
|
return WithProductGrid;
|
|
6866
6880
|
}
|
|
6867
|
-
var templateObject_1$
|
|
6881
|
+
var templateObject_1$1p;
|
|
6868
6882
|
|
|
6869
6883
|
var Collection = {
|
|
6870
6884
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6911,11 +6925,11 @@ var OutOfStock = function (_a) {
|
|
|
6911
6925
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6912
6926
|
};
|
|
6913
6927
|
|
|
6914
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6915
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6916
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6917
|
-
var Span = newStyled.span(templateObject_4$
|
|
6918
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6928
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6929
|
+
newStyled(lt.Label)(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6930
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$Q || (templateObject_3$Q = __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"])));
|
|
6931
|
+
var Span = newStyled.span(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6932
|
+
var OptionsContainer = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
6919
6933
|
var Label$4 = function (_a) {
|
|
6920
6934
|
var label = _a.label, values = _a.values;
|
|
6921
6935
|
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -6933,23 +6947,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6933
6947
|
Option: Option,
|
|
6934
6948
|
OptionsContainer: OptionsContainer,
|
|
6935
6949
|
});
|
|
6936
|
-
var templateObject_1$
|
|
6950
|
+
var templateObject_1$1o, templateObject_2$13, templateObject_3$Q, templateObject_4$E, templateObject_5$u;
|
|
6937
6951
|
|
|
6938
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6952
|
+
var Container$V = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
6939
6953
|
var borderColor = _a.borderColor;
|
|
6940
6954
|
return borderColor;
|
|
6941
6955
|
}, function (_a) {
|
|
6942
6956
|
var noStock = _a.noStock;
|
|
6943
6957
|
return (noStock ? '0.4' : '1');
|
|
6944
6958
|
});
|
|
6945
|
-
var Image$2 = newStyled.img(templateObject_2
|
|
6959
|
+
var Image$2 = newStyled.img(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6946
6960
|
var PatternSelector = function (_a) {
|
|
6947
6961
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6948
6962
|
var theme = useTheme();
|
|
6949
6963
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6950
6964
|
return (jsxRuntime.jsx(Container$V, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6951
6965
|
};
|
|
6952
|
-
var templateObject_1$
|
|
6966
|
+
var templateObject_1$1n, templateObject_2$12;
|
|
6953
6967
|
|
|
6954
6968
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6955
6969
|
if (options == null || options.length === 0) {
|
|
@@ -7008,21 +7022,21 @@ var SingleColorPicker = function (_a) {
|
|
|
7008
7022
|
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
|
|
7009
7023
|
};
|
|
7010
7024
|
|
|
7011
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7012
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
7013
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
7025
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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'); });
|
|
7026
|
+
var Col$1 = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7027
|
+
var Row$2 = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
7014
7028
|
return props.rightToLeft &&
|
|
7015
7029
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7016
7030
|
});
|
|
7017
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
7018
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
7019
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7031
|
+
var H5 = newStyled.h5(templateObject_4$D || (templateObject_4$D = __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; });
|
|
7032
|
+
var H3$1 = newStyled.h3(templateObject_5$t || (templateObject_5$t = __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; });
|
|
7033
|
+
var FreeShipping = newStyled.span(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7020
7034
|
var CrossSellCheckbox = function (_a) {
|
|
7021
7035
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7022
7036
|
var theme = useTheme();
|
|
7023
7037
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7024
7038
|
};
|
|
7025
|
-
var templateObject_1$
|
|
7039
|
+
var templateObject_1$1m, templateObject_2$11, templateObject_3$P, templateObject_4$D, templateObject_5$t, templateObject_6$q;
|
|
7026
7040
|
|
|
7027
7041
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7028
7042
|
__proto__: null,
|
|
@@ -7050,7 +7064,7 @@ var sizeMapper = (_a = {},
|
|
|
7050
7064
|
_a[exports.ComponentSize.Large] = 'large',
|
|
7051
7065
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
7052
7066
|
_a);
|
|
7053
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7067
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
7054
7068
|
var wide = _a.wide;
|
|
7055
7069
|
return (wide ? '100%' : 'fit-content');
|
|
7056
7070
|
}, function (_a) {
|
|
@@ -7072,11 +7086,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1i || (templateObj
|
|
|
7072
7086
|
var theme = _a.theme;
|
|
7073
7087
|
return theme.colors.text.disabled;
|
|
7074
7088
|
});
|
|
7075
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7089
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7076
7090
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7077
7091
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7078
7092
|
});
|
|
7079
|
-
var templateObject_1$
|
|
7093
|
+
var templateObject_1$1l, templateObject_2$10;
|
|
7080
7094
|
|
|
7081
7095
|
var BaseCTA = function (_a) {
|
|
7082
7096
|
var _b, _c, _d;
|
|
@@ -7163,38 +7177,38 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7163
7177
|
} }), void 0));
|
|
7164
7178
|
};
|
|
7165
7179
|
|
|
7166
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
7167
|
-
var IconContainer$4 = newStyled.div(templateObject_2
|
|
7168
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7169
|
-
var Details = newStyled.span(templateObject_4$
|
|
7180
|
+
var Container$U = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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; });
|
|
7181
|
+
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"])));
|
|
7182
|
+
var Text$3 = newStyled.p(templateObject_3$O || (templateObject_3$O = __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; });
|
|
7183
|
+
var Details = newStyled.span(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7170
7184
|
var Note = function (_a) {
|
|
7171
7185
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7172
7186
|
var theme = useTheme();
|
|
7173
7187
|
return (jsxRuntime.jsxs(Container$U, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7174
7188
|
};
|
|
7175
|
-
var templateObject_1$
|
|
7189
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
7176
7190
|
|
|
7177
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7191
|
+
var Title$5 = newStyled.h1(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
7178
7192
|
var theme = _a.theme;
|
|
7179
7193
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
7180
7194
|
});
|
|
7181
|
-
var Line = newStyled.div(templateObject_2$
|
|
7182
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7195
|
+
var Line = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7196
|
+
var Row$1 = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
7183
7197
|
flexDirection: ['column', 'row'],
|
|
7184
7198
|
}));
|
|
7185
|
-
var Col = newStyled.div(templateObject_4$
|
|
7199
|
+
var Col = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
7186
7200
|
margin: ['0', '0 1.25rem'],
|
|
7187
7201
|
marginBottom: ['1.875rem', '0'],
|
|
7188
7202
|
alignItems: ['center', 'flex-start'],
|
|
7189
7203
|
textAlign: ['center', 'inherit'],
|
|
7190
7204
|
width: ['100%', 'inherit'],
|
|
7191
7205
|
}));
|
|
7192
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
7206
|
+
var IconContainer$3 = newStyled.div(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7193
7207
|
marginRight: ['0', '0.438rem'],
|
|
7194
7208
|
marginBottom: ['10px', '0'],
|
|
7195
7209
|
width: ['auto', '1.5rem'],
|
|
7196
7210
|
}));
|
|
7197
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7211
|
+
var SectionTitle = newStyled.h1(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7198
7212
|
display: ['block', 'flex'],
|
|
7199
7213
|
}), function (_a) {
|
|
7200
7214
|
var theme = _a.theme;
|
|
@@ -7217,16 +7231,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7217
7231
|
var theme = useTheme();
|
|
7218
7232
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7219
7233
|
};
|
|
7220
|
-
var templateObject_1$
|
|
7234
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B, templateObject_5$s, templateObject_6$p, templateObject_7$i, templateObject_8$e;
|
|
7221
7235
|
|
|
7222
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7236
|
+
var Backdrop = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
7223
7237
|
var top = _a.top;
|
|
7224
7238
|
return top;
|
|
7225
7239
|
}, function (_a) {
|
|
7226
7240
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7227
7241
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7228
7242
|
});
|
|
7229
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7243
|
+
var Sidebar = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
7230
7244
|
var height = _a.height;
|
|
7231
7245
|
return height;
|
|
7232
7246
|
}, function (_a) {
|
|
@@ -7273,20 +7287,20 @@ var Drawer = function (_a) {
|
|
|
7273
7287
|
}, [isOpen, onClose, onOpen]);
|
|
7274
7288
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7275
7289
|
};
|
|
7276
|
-
var templateObject_1$
|
|
7290
|
+
var templateObject_1$1i, templateObject_2$Z;
|
|
7277
7291
|
|
|
7278
7292
|
var TooltipArrow = function (_a) {
|
|
7279
7293
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7280
7294
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7281
7295
|
};
|
|
7282
7296
|
|
|
7283
|
-
var List = newStyled.ul(templateObject_1$
|
|
7284
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7285
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7286
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7287
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7288
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7289
|
-
var templateObject_1$
|
|
7297
|
+
var List = newStyled.ul(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7298
|
+
var Item$2 = newStyled.li(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
7299
|
+
var DropdownWrapper = newStyled.div(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
7300
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
7301
|
+
var StyledDropdown = newStyled.ul(templateObject_5$r || (templateObject_5$r = __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; });
|
|
7302
|
+
var DropdownItem = newStyled.li(templateObject_6$o || (templateObject_6$o = __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; });
|
|
7303
|
+
var templateObject_1$1h, templateObject_2$Y, templateObject_3$M, templateObject_4$A, templateObject_5$r, templateObject_6$o;
|
|
7290
7304
|
|
|
7291
7305
|
var DropdownListIcons = function (_a) {
|
|
7292
7306
|
var items = _a.items;
|
|
@@ -7299,13 +7313,13 @@ var Dropdown = function (_a) {
|
|
|
7299
7313
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7300
7314
|
};
|
|
7301
7315
|
|
|
7302
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7303
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7304
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7305
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7306
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7307
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7308
|
-
var templateObject_1$
|
|
7316
|
+
var DropdownContainer = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
7317
|
+
var DropdownLabel = newStyled.div(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
7318
|
+
var SizeLabel = newStyled.span(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7319
|
+
var DetailLabel = newStyled.span(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
7320
|
+
var DropdownOptions = newStyled.div(templateObject_5$q || (templateObject_5$q = __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"])));
|
|
7321
|
+
var DropdownOption = newStyled.div(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
7322
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$z, templateObject_5$q, templateObject_6$n;
|
|
7309
7323
|
|
|
7310
7324
|
var SizeDropdown = function (_a) {
|
|
7311
7325
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7328,10 +7342,10 @@ var SizeDropdown = function (_a) {
|
|
|
7328
7342
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7329
7343
|
};
|
|
7330
7344
|
|
|
7331
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7332
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7333
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7334
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7345
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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; });
|
|
7346
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$W || (templateObject_2$W = __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; });
|
|
7347
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$K || (templateObject_3$K = __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"])));
|
|
7348
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7335
7349
|
var DropdownDialog = function (_a) {
|
|
7336
7350
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7337
7351
|
var theme = useTheme$1();
|
|
@@ -7340,7 +7354,7 @@ var DropdownDialog = function (_a) {
|
|
|
7340
7354
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7341
7355
|
}) }), void 0) }), void 0));
|
|
7342
7356
|
};
|
|
7343
|
-
var templateObject_1$
|
|
7357
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$K, templateObject_4$y;
|
|
7344
7358
|
|
|
7345
7359
|
function FilteringDropdown(_a) {
|
|
7346
7360
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -7373,29 +7387,29 @@ function FilteringDropdown(_a) {
|
|
|
7373
7387
|
}) }, void 0)] }), void 0));
|
|
7374
7388
|
}
|
|
7375
7389
|
|
|
7376
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7377
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7378
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7379
|
-
var Container$T = newStyled.div(templateObject_4$
|
|
7390
|
+
var Title$4 = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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; });
|
|
7391
|
+
var H3 = newStyled.h3(templateObject_2$V || (templateObject_2$V = __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; });
|
|
7392
|
+
var ArrowContainer = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7393
|
+
var Container$T = newStyled.div(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
7380
7394
|
var Accordion = function (_a) {
|
|
7381
7395
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
7382
7396
|
var theme = useTheme();
|
|
7383
7397
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7384
7398
|
return (jsxRuntime.jsxs(Container$T, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7385
7399
|
};
|
|
7386
|
-
var templateObject_1$
|
|
7387
|
-
|
|
7388
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7389
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7390
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7391
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7392
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7393
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7400
|
+
var templateObject_1$1e, templateObject_2$V, templateObject_3$J, templateObject_4$x;
|
|
7401
|
+
|
|
7402
|
+
var SectionContent = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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; });
|
|
7403
|
+
var Header$1 = newStyled.div(templateObject_2$U || (templateObject_2$U = __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"])));
|
|
7404
|
+
var MobileHeader = newStyled.div(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
7405
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
7406
|
+
var H4 = newStyled.h4(templateObject_5$p || (templateObject_5$p = __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; });
|
|
7407
|
+
var FilterLink = newStyled.a(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
7394
7408
|
var OptionContainer = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
7395
7409
|
var ClearAll = newStyled.span(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
7396
7410
|
var MobileFooter = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7397
7411
|
var MobileClearContainer = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
7398
|
-
var templateObject_1$
|
|
7412
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$w, templateObject_5$p, templateObject_6$m, templateObject_7$h, templateObject_8$d, templateObject_9$8, templateObject_10$7;
|
|
7399
7413
|
|
|
7400
7414
|
var getStylesBySize$a = function (size, theme) {
|
|
7401
7415
|
switch (size) {
|
|
@@ -7460,9 +7474,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7460
7474
|
} }), id: id }, void 0));
|
|
7461
7475
|
};
|
|
7462
7476
|
|
|
7463
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7464
|
-
var LI = newStyled.li(templateObject_2$
|
|
7465
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7477
|
+
var UL = newStyled.ul(templateObject_1$1c || (templateObject_1$1c = __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"])));
|
|
7478
|
+
var LI = newStyled.li(templateObject_2$T || (templateObject_2$T = __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; });
|
|
7479
|
+
var CloseIconContainer = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
7466
7480
|
var Tags = function (_a) {
|
|
7467
7481
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7468
7482
|
var theme = useTheme();
|
|
@@ -7470,7 +7484,7 @@ var Tags = function (_a) {
|
|
|
7470
7484
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7471
7485
|
}) }), void 0));
|
|
7472
7486
|
};
|
|
7473
|
-
var templateObject_1$
|
|
7487
|
+
var templateObject_1$1c, templateObject_2$T, templateObject_3$H;
|
|
7474
7488
|
|
|
7475
7489
|
var Filters = function (_a) {
|
|
7476
7490
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -7606,8 +7620,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7606
7620
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7607
7621
|
};
|
|
7608
7622
|
|
|
7609
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7610
|
-
var Container$S = newStyled.div(templateObject_2$
|
|
7623
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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"])));
|
|
7624
|
+
var Container$S = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
7611
7625
|
var FitGuarantee = function (_a) {
|
|
7612
7626
|
var _b;
|
|
7613
7627
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -7618,17 +7632,17 @@ var FitGuarantee = function (_a) {
|
|
|
7618
7632
|
console.error('Icon', iconName, 'not found');
|
|
7619
7633
|
return null;
|
|
7620
7634
|
}
|
|
7621
|
-
return (jsxRuntime.jsx(Card$
|
|
7635
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$S, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsxRuntime.jsx(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxRuntime.jsxs(Container$S, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7622
7636
|
margin: '0.1rem 0',
|
|
7623
7637
|
width: '100%',
|
|
7624
7638
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7625
7639
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7626
7640
|
} }, { children: title }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7627
7641
|
};
|
|
7628
|
-
var templateObject_1$
|
|
7642
|
+
var templateObject_1$1b, templateObject_2$S;
|
|
7629
7643
|
|
|
7630
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
7631
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7644
|
+
var Container$R = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
7645
|
+
var P$2 = newStyled.p(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
7632
7646
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7633
7647
|
border: 'none',
|
|
7634
7648
|
background: 'transparent',
|
|
@@ -7643,7 +7657,7 @@ var FitPredictor = function (_a) {
|
|
|
7643
7657
|
var theme = useTheme();
|
|
7644
7658
|
return (jsxs(Container$R, __assign$1({ theme: theme }, { children: [jsx(Container$R, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7645
7659
|
};
|
|
7646
|
-
var templateObject_1$
|
|
7660
|
+
var templateObject_1$1a, templateObject_2$R;
|
|
7647
7661
|
|
|
7648
7662
|
var Button$7 = newStyled.button(function () { return ({
|
|
7649
7663
|
background: 'transparent',
|
|
@@ -11887,14 +11901,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11887
11901
|
return Slider;
|
|
11888
11902
|
}(React__default["default"].Component);
|
|
11889
11903
|
|
|
11890
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11904
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
11891
11905
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11892
11906
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11893
11907
|
}, function (_a) {
|
|
11894
11908
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11895
11909
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11896
11910
|
});
|
|
11897
|
-
var templateObject_1$
|
|
11911
|
+
var templateObject_1$19;
|
|
11898
11912
|
|
|
11899
11913
|
var getStylesBySize$9 = function (size) {
|
|
11900
11914
|
// rem units
|
|
@@ -11953,7 +11967,7 @@ var SliderNavigation = function (_a) {
|
|
|
11953
11967
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
11954
11968
|
};
|
|
11955
11969
|
|
|
11956
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11970
|
+
var Image$1 = newStyled.img(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: ", ";\n height: ", ";\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11957
11971
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11958
11972
|
return borderRadiusVariant &&
|
|
11959
11973
|
"\n border-radius: 20px;\n ";
|
|
@@ -11971,7 +11985,7 @@ var Image$1 = newStyled.img(templateObject_1$15 || (templateObject_1$15 = __make
|
|
|
11971
11985
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11972
11986
|
: 'inherit';
|
|
11973
11987
|
});
|
|
11974
|
-
var templateObject_1$
|
|
11988
|
+
var templateObject_1$18;
|
|
11975
11989
|
|
|
11976
11990
|
var ImageSmallPreview = function (_a) {
|
|
11977
11991
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare;
|
|
@@ -11979,9 +11993,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11979
11993
|
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: "eager", width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
11980
11994
|
};
|
|
11981
11995
|
|
|
11982
|
-
var horizontalStyles = css(templateObject_1$
|
|
11983
|
-
var verticalStyles = css(templateObject_2$
|
|
11984
|
-
var Container$Q = newStyled.div(templateObject_3$
|
|
11996
|
+
var horizontalStyles = css(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
11997
|
+
var verticalStyles = css(templateObject_2$Q || (templateObject_2$Q = __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"])));
|
|
11998
|
+
var Container$Q = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
11985
11999
|
var position = _a.position;
|
|
11986
12000
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11987
12001
|
}, function (_a) {
|
|
@@ -11989,12 +12003,12 @@ var Container$Q = newStyled.div(templateObject_3$D || (templateObject_3$D = __ma
|
|
|
11989
12003
|
return hasOverflowArrows &&
|
|
11990
12004
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11991
12005
|
});
|
|
11992
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
11993
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11994
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
12006
|
+
var Button$6 = newStyled.button(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
12007
|
+
var ArrowsContainer = newStyled.div(templateObject_5$o || (templateObject_5$o = __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"])));
|
|
12008
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
11995
12009
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
11996
12010
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
11997
|
-
var templateObject_1$
|
|
12011
|
+
var templateObject_1$17, templateObject_2$Q, templateObject_3$G, templateObject_4$v, templateObject_5$o, templateObject_6$l, templateObject_7$g, templateObject_8$c;
|
|
11998
12012
|
|
|
11999
12013
|
var ImagePreviewList = function (_a) {
|
|
12000
12014
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare;
|
|
@@ -13604,22 +13618,22 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13604
13618
|
afterZoomOut: PropTypes.func
|
|
13605
13619
|
} : {};
|
|
13606
13620
|
|
|
13607
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13608
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13609
|
-
var templateObject_1$
|
|
13621
|
+
var ProgressContainer = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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); });
|
|
13622
|
+
var ProgressFiller = newStyled.div(templateObject_2$P || (templateObject_2$P = __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; });
|
|
13623
|
+
var templateObject_1$16, templateObject_2$P;
|
|
13610
13624
|
|
|
13611
13625
|
var ProgressBar$1 = function (_a) {
|
|
13612
13626
|
var progress = _a.progress, hide = _a.hide;
|
|
13613
13627
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13614
13628
|
};
|
|
13615
13629
|
|
|
13616
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
13617
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13618
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13619
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
13620
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
13621
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
13622
|
-
var templateObject_1$
|
|
13630
|
+
var Container$P = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13631
|
+
var HTMLVideo = newStyled.video(templateObject_2$O || (templateObject_2$O = __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; });
|
|
13632
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
13633
|
+
var PlayContainer = newStyled.div(templateObject_4$u || (templateObject_4$u = __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"])));
|
|
13634
|
+
var PauseContainer = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
13635
|
+
var MuteButton = newStyled.button(templateObject_6$k || (templateObject_6$k = __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"])));
|
|
13636
|
+
var templateObject_1$15, templateObject_2$O, templateObject_3$F, templateObject_4$u, templateObject_5$n, templateObject_6$k;
|
|
13623
13637
|
|
|
13624
13638
|
var Video$1 = function (_a) {
|
|
13625
13639
|
var _b, _c, _d, _e;
|
|
@@ -13668,24 +13682,24 @@ var Video$1 = function (_a) {
|
|
|
13668
13682
|
return (jsxRuntime.jsxs(Container$P, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxRuntime.jsxs(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({}, rest, { muted: true, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13669
13683
|
};
|
|
13670
13684
|
|
|
13671
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
13685
|
+
var Container$O = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13672
13686
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13673
13687
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13674
13688
|
});
|
|
13675
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13689
|
+
var TopTagContainer$6 = newStyled.div(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13676
13690
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13677
13691
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13678
13692
|
}, function (_a) {
|
|
13679
13693
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13680
13694
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13681
13695
|
});
|
|
13682
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13696
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13683
13697
|
var isCTAHidden = _a.isCTAHidden;
|
|
13684
13698
|
return (isCTAHidden ? '60px' : '120px');
|
|
13685
13699
|
});
|
|
13686
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13687
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13688
|
-
var templateObject_1$
|
|
13700
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_4$t || (templateObject_4$t = __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"])));
|
|
13701
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$m || (templateObject_5$m = __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"])));
|
|
13702
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$t, templateObject_5$m;
|
|
13689
13703
|
|
|
13690
13704
|
var ImageProductSlide$1 = function (_a) {
|
|
13691
13705
|
var _b;
|
|
@@ -13698,8 +13712,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13698
13712
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsxRuntime.jsx(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager" }, void 0)), jsxRuntime.jsx(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13699
13713
|
};
|
|
13700
13714
|
|
|
13701
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
13702
|
-
var templateObject_1$
|
|
13715
|
+
var Container$N = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
13716
|
+
var templateObject_1$13;
|
|
13703
13717
|
|
|
13704
13718
|
var getInitialIndex = function (images, selectedValue) {
|
|
13705
13719
|
if (selectedValue) {
|
|
@@ -13747,7 +13761,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13747
13761
|
};
|
|
13748
13762
|
}
|
|
13749
13763
|
};
|
|
13750
|
-
var Container$M = newStyled.div(templateObject_1
|
|
13764
|
+
var Container$M = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13751
13765
|
var backgroundColor = _a.backgroundColor;
|
|
13752
13766
|
return backgroundColor;
|
|
13753
13767
|
}, function (_a) {
|
|
@@ -13777,9 +13791,9 @@ var IconButton = function (_a) {
|
|
|
13777
13791
|
var theme = useTheme();
|
|
13778
13792
|
return (jsxRuntime.jsx(Container$M, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13779
13793
|
};
|
|
13780
|
-
var templateObject_1
|
|
13794
|
+
var templateObject_1$12;
|
|
13781
13795
|
|
|
13782
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13796
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
13783
13797
|
var AmazonButton = function (_a) {
|
|
13784
13798
|
var onClick = _a.onClick;
|
|
13785
13799
|
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13788,7 +13802,7 @@ var PaypalButton = function (_a) {
|
|
|
13788
13802
|
var onClick = _a.onClick;
|
|
13789
13803
|
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13790
13804
|
};
|
|
13791
|
-
var templateObject_1$
|
|
13805
|
+
var templateObject_1$11;
|
|
13792
13806
|
|
|
13793
13807
|
var Container$L = newStyled.div(function (props) { return ({
|
|
13794
13808
|
height: 'auto',
|
|
@@ -13843,9 +13857,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13843
13857
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$L, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13844
13858
|
};
|
|
13845
13859
|
|
|
13846
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
13847
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13848
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13860
|
+
var Container$K = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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'); });
|
|
13861
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$M || (templateObject_2$M = __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'); });
|
|
13862
|
+
var StyledTitle = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13849
13863
|
var titlePosition = _a.titlePosition;
|
|
13850
13864
|
return titlePosition == 'center' &&
|
|
13851
13865
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13855,13 +13869,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13855
13869
|
var isMobile = useWindowDimensions().isMobile;
|
|
13856
13870
|
return (jsxRuntime.jsxs(Container$K, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13857
13871
|
};
|
|
13858
|
-
var templateObject_1$
|
|
13872
|
+
var templateObject_1$10, templateObject_2$M, templateObject_3$D;
|
|
13859
13873
|
|
|
13860
|
-
var Label$3 = newStyled.span(templateObject_1
|
|
13874
|
+
var Label$3 = newStyled.span(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
13861
13875
|
var color = _a.color;
|
|
13862
13876
|
return color;
|
|
13863
13877
|
});
|
|
13864
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13878
|
+
var MandatoryIcon = newStyled.span(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13865
13879
|
var color = _a.color;
|
|
13866
13880
|
return color;
|
|
13867
13881
|
});
|
|
@@ -13870,7 +13884,7 @@ var InputLabel = function (_a) {
|
|
|
13870
13884
|
var theme = useTheme();
|
|
13871
13885
|
return (jsxRuntime.jsxs(Label$3, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13872
13886
|
};
|
|
13873
|
-
var templateObject_1
|
|
13887
|
+
var templateObject_1$$, templateObject_2$L;
|
|
13874
13888
|
|
|
13875
13889
|
var containerByStatus = function (theme, status) {
|
|
13876
13890
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13879,12 +13893,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13879
13893
|
return theme.colors.semantic.urgent.color;
|
|
13880
13894
|
return '';
|
|
13881
13895
|
};
|
|
13882
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13896
|
+
var Container$J = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13883
13897
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13884
13898
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13885
13899
|
});
|
|
13886
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13887
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13900
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$K || (templateObject_2$K = __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"])));
|
|
13901
|
+
var StyledInput = newStyled.input(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
13888
13902
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13889
13903
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13890
13904
|
}, function (_a) {
|
|
@@ -13939,11 +13953,11 @@ var StyledInput = newStyled.input(templateObject_3$z || (templateObject_3$z = __
|
|
|
13939
13953
|
return hasValue &&
|
|
13940
13954
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13941
13955
|
});
|
|
13942
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13956
|
+
var InputWrapper$1 = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
13943
13957
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13944
13958
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13945
13959
|
});
|
|
13946
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13960
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
13947
13961
|
var theme = _a.theme;
|
|
13948
13962
|
return theme.component.input.placeholderColor;
|
|
13949
13963
|
}, function (_a) {
|
|
@@ -13956,8 +13970,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$j || (templateObject_5
|
|
|
13956
13970
|
var theme = _a.theme;
|
|
13957
13971
|
return theme.component.input.lineHeight;
|
|
13958
13972
|
});
|
|
13959
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13960
|
-
var templateObject_1$
|
|
13973
|
+
var ClearInput = newStyled.div(templateObject_6$j || (templateObject_6$j = __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"])));
|
|
13974
|
+
var templateObject_1$_, templateObject_2$K, templateObject_3$C, templateObject_4$s, templateObject_5$l, templateObject_6$j;
|
|
13961
13975
|
|
|
13962
13976
|
var BaseInput = function (_a) {
|
|
13963
13977
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -13980,7 +13994,7 @@ var BaseInput = function (_a) {
|
|
|
13980
13994
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13981
13995
|
}, [status]);
|
|
13982
13996
|
var hasValue = Boolean(value);
|
|
13983
|
-
return (jsxRuntime.jsxs(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13997
|
+
return (jsxRuntime.jsxs(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper$1, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13984
13998
|
onChange(event.target.value, event);
|
|
13985
13999
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
13986
14000
|
onChange('', { target: { value: '' } });
|
|
@@ -14001,11 +14015,11 @@ var Button$5 = function (_a) {
|
|
|
14001
14015
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14002
14016
|
};
|
|
14003
14017
|
|
|
14004
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
14018
|
+
var Container$I = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
14005
14019
|
var theme = _a.theme;
|
|
14006
14020
|
return theme.component.inputCustom.input.borderRadius;
|
|
14007
14021
|
});
|
|
14008
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14022
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
14009
14023
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14010
14024
|
return defaultRounded
|
|
14011
14025
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14022,21 +14036,21 @@ var Custom = function (_a) {
|
|
|
14022
14036
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14023
14037
|
return (jsxRuntime.jsx(Container$I, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
14024
14038
|
};
|
|
14025
|
-
var templateObject_1$
|
|
14039
|
+
var templateObject_1$Z, templateObject_2$J;
|
|
14026
14040
|
|
|
14027
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14041
|
+
var SuccessContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
14028
14042
|
var size = _a.size;
|
|
14029
14043
|
return (size === 'small' ? '36px' : '');
|
|
14030
14044
|
});
|
|
14031
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14032
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14045
|
+
var SuccessMessage = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
14046
|
+
var SuccessText = newStyled.span(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
14033
14047
|
var Success = function (_a) {
|
|
14034
14048
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14035
14049
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14036
14050
|
};
|
|
14037
|
-
var templateObject_1$
|
|
14051
|
+
var templateObject_1$Y, templateObject_2$I, templateObject_3$B;
|
|
14038
14052
|
|
|
14039
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14053
|
+
var ButtonContainer = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14040
14054
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14041
14055
|
return status === exports.InputValidationType.Empty &&
|
|
14042
14056
|
type === 'primary' &&
|
|
@@ -14053,16 +14067,16 @@ var BasePlusButton = function (_a) {
|
|
|
14053
14067
|
}
|
|
14054
14068
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14055
14069
|
};
|
|
14056
|
-
var templateObject_1$
|
|
14070
|
+
var templateObject_1$X;
|
|
14057
14071
|
|
|
14058
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14059
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14072
|
+
var Container$H = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
14073
|
+
var IconContainer$2 = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
14060
14074
|
var BasePlusIcon = function (_a) {
|
|
14061
14075
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14062
14076
|
var theme = useTheme();
|
|
14063
14077
|
return (jsxRuntime.jsx(Container$H, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14064
14078
|
};
|
|
14065
|
-
var templateObject_1$
|
|
14079
|
+
var templateObject_1$W, templateObject_2$H;
|
|
14066
14080
|
|
|
14067
14081
|
var Input$3 = {
|
|
14068
14082
|
Simple: BaseInput,
|
|
@@ -14107,7 +14121,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14107
14121
|
}, [preventTouch, ref, touchStart]);
|
|
14108
14122
|
}
|
|
14109
14123
|
|
|
14110
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14124
|
+
var Container$G = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14111
14125
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14112
14126
|
return borderRadiusVariant &&
|
|
14113
14127
|
"\n border-radius: 40px;\n ";
|
|
@@ -14116,11 +14130,11 @@ var Container$G = newStyled.div(templateObject_1$S || (templateObject_1$S = __ma
|
|
|
14116
14130
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14117
14131
|
});
|
|
14118
14132
|
// max-height: 31.875rem;
|
|
14119
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14120
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14121
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_4$
|
|
14122
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
14123
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
14133
|
+
var TopTagContainer$5 = newStyled.div(templateObject_2$G || (templateObject_2$G = __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'); });
|
|
14134
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14135
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14136
|
+
var NavButtonContainer$2 = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14137
|
+
var Button$4 = newStyled.button(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14124
14138
|
var settings$1 = {
|
|
14125
14139
|
dots: true,
|
|
14126
14140
|
infinite: false,
|
|
@@ -14179,16 +14193,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14179
14193
|
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14180
14194
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14181
14195
|
};
|
|
14182
|
-
var templateObject_1$
|
|
14196
|
+
var templateObject_1$V, templateObject_2$G, templateObject_3$A, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
14183
14197
|
|
|
14184
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14198
|
+
var Container$F = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14185
14199
|
var ProductGalleryMobile = function (_a) {
|
|
14186
14200
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c;
|
|
14187
14201
|
var _d = React$2.useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14188
14202
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14189
14203
|
return (jsxRuntime.jsx(Container$F, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); } }, void 0) }), void 0));
|
|
14190
14204
|
};
|
|
14191
|
-
var templateObject_1$
|
|
14205
|
+
var templateObject_1$U;
|
|
14192
14206
|
|
|
14193
14207
|
function _extends() {
|
|
14194
14208
|
_extends = Object.assign || function (target) {
|
|
@@ -14455,14 +14469,14 @@ function useSwipeable(options) {
|
|
|
14455
14469
|
return handlers;
|
|
14456
14470
|
}
|
|
14457
14471
|
|
|
14458
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14472
|
+
var Button$3 = newStyled.button(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
14459
14473
|
var ArrowButton = function (_a) {
|
|
14460
14474
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14461
14475
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14462
14476
|
};
|
|
14463
|
-
var templateObject_1$
|
|
14477
|
+
var templateObject_1$T;
|
|
14464
14478
|
|
|
14465
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14479
|
+
var Container$E = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
14466
14480
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14467
14481
|
var SlideDots = function (_a) {
|
|
14468
14482
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14471,11 +14485,11 @@ var SlideDots = function (_a) {
|
|
|
14471
14485
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14472
14486
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
14473
14487
|
};
|
|
14474
|
-
var templateObject_1$
|
|
14488
|
+
var templateObject_1$S;
|
|
14475
14489
|
|
|
14476
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14477
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14478
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14490
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$R || (templateObject_1$R = __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"])));
|
|
14491
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14492
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14479
14493
|
var SlideNavigation = function (_a) {
|
|
14480
14494
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14481
14495
|
var theme = useTheme();
|
|
@@ -14487,23 +14501,23 @@ var SlideNavigation = function (_a) {
|
|
|
14487
14501
|
onNavigate(selectedIndex + 1);
|
|
14488
14502
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14489
14503
|
};
|
|
14490
|
-
var templateObject_1$
|
|
14504
|
+
var templateObject_1$R, templateObject_2$F, templateObject_3$z;
|
|
14491
14505
|
|
|
14492
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14506
|
+
var Container$D = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
14493
14507
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14494
14508
|
return borderRadiusVariant &&
|
|
14495
14509
|
"\n border-radius: 40px;\n ";
|
|
14496
14510
|
});
|
|
14497
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14498
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14511
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14512
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14499
14513
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14500
14514
|
var _b, _c;
|
|
14501
14515
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14502
14516
|
return (jsxRuntime.jsxs(Container$D, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14503
14517
|
});
|
|
14504
|
-
var templateObject_1$
|
|
14518
|
+
var templateObject_1$Q, templateObject_2$E, templateObject_3$y;
|
|
14505
14519
|
|
|
14506
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14520
|
+
var Container$C = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14507
14521
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14508
14522
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
14509
14523
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14527,9 +14541,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14527
14541
|
}, [index, images]);
|
|
14528
14542
|
return (jsxRuntime.jsxs(Container$C, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14529
14543
|
};
|
|
14530
|
-
var templateObject_1$
|
|
14544
|
+
var templateObject_1$P;
|
|
14531
14545
|
|
|
14532
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
14546
|
+
var Container$B = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14533
14547
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14534
14548
|
return borderRadiusVariant &&
|
|
14535
14549
|
"\n border-radius: 40px;\n ";
|
|
@@ -14538,11 +14552,11 @@ var Container$B = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
14538
14552
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14539
14553
|
});
|
|
14540
14554
|
// max-height: 31.875rem;
|
|
14541
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14542
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14543
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14544
|
-
var Video = newStyled.div(templateObject_5$
|
|
14545
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14555
|
+
var TopTagContainer$3 = 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'); });
|
|
14556
|
+
var BottomTagContainer$3 = 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"])));
|
|
14557
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
14558
|
+
var Video = newStyled.div(templateObject_5$j || (templateObject_5$j = __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"])));
|
|
14559
|
+
var VideoTag = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
14546
14560
|
var Text$2 = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14547
14561
|
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"])));
|
|
14548
14562
|
var Button$2 = newStyled.button(templateObject_9$7 || (templateObject_9$7 = __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"])));
|
|
@@ -14603,14 +14617,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14603
14617
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14604
14618
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14605
14619
|
};
|
|
14606
|
-
var templateObject_1$
|
|
14620
|
+
var templateObject_1$O, templateObject_2$D, templateObject_3$x, templateObject_4$q, templateObject_5$j, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7;
|
|
14607
14621
|
|
|
14608
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
14622
|
+
var Container$A = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14609
14623
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14610
14624
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14611
14625
|
return (jsxRuntime.jsx(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14612
14626
|
};
|
|
14613
|
-
var templateObject_1$
|
|
14627
|
+
var templateObject_1$N;
|
|
14614
14628
|
|
|
14615
14629
|
var __defProp$1 = Object.defineProperty;
|
|
14616
14630
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14743,17 +14757,17 @@ var Portal = function (_a) {
|
|
|
14743
14757
|
var visibleStyle = function (_a) {
|
|
14744
14758
|
var opened = _a.opened;
|
|
14745
14759
|
return opened
|
|
14746
|
-
? css(templateObject_1$
|
|
14760
|
+
? css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14747
14761
|
};
|
|
14748
14762
|
var transformStyle = function (_a) {
|
|
14749
14763
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14750
14764
|
return opened
|
|
14751
|
-
? css(templateObject_3$
|
|
14765
|
+
? css(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14752
14766
|
};
|
|
14753
|
-
var Container$z = newStyled.div(templateObject_6$
|
|
14767
|
+
var Container$z = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14754
14768
|
var width = _a.width;
|
|
14755
14769
|
return width
|
|
14756
|
-
? css(templateObject_5$
|
|
14770
|
+
? css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14757
14771
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14758
14772
|
});
|
|
14759
14773
|
}, visibleStyle, transformStyle);
|
|
@@ -14798,9 +14812,9 @@ var useModal = function (id) {
|
|
|
14798
14812
|
close: close,
|
|
14799
14813
|
}); }, [close, open, opened]);
|
|
14800
14814
|
};
|
|
14801
|
-
var templateObject_1$
|
|
14815
|
+
var templateObject_1$M, templateObject_2$C, templateObject_3$w, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$e;
|
|
14802
14816
|
|
|
14803
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14817
|
+
var Bar$1 = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14804
14818
|
var height = _a.height;
|
|
14805
14819
|
return height || '0.5rem';
|
|
14806
14820
|
}, function (_a) {
|
|
@@ -14872,19 +14886,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14872
14886
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14873
14887
|
return (jsxRuntime.jsxs(Container$y, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14874
14888
|
};
|
|
14875
|
-
var templateObject_1$
|
|
14889
|
+
var templateObject_1$L;
|
|
14876
14890
|
|
|
14877
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14891
|
+
var Container$x = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
14878
14892
|
var theme = _a.theme;
|
|
14879
14893
|
return theme.component.orderBar.backgroundColor;
|
|
14880
14894
|
});
|
|
14881
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14895
|
+
var H1 = newStyled.h1(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
14882
14896
|
var OrderBar = function (_a) {
|
|
14883
14897
|
var message = _a.message, color = _a.color;
|
|
14884
14898
|
var theme = useTheme();
|
|
14885
14899
|
return (jsxRuntime.jsxs(Container$x, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14886
14900
|
};
|
|
14887
|
-
var templateObject_1$
|
|
14901
|
+
var templateObject_1$K, templateObject_2$B;
|
|
14888
14902
|
|
|
14889
14903
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14890
14904
|
background: props.bgColor,
|
|
@@ -14908,15 +14922,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14908
14922
|
justifyContent: 'center',
|
|
14909
14923
|
gap: '10px',
|
|
14910
14924
|
});
|
|
14911
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14925
|
+
var StyledContent = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
14912
14926
|
var bgColor = _a.bgColor;
|
|
14913
14927
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14914
14928
|
}, function (_a) {
|
|
14915
14929
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14916
14930
|
return width;
|
|
14917
14931
|
});
|
|
14918
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14919
|
-
var templateObject_1$
|
|
14932
|
+
var StyledController = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
14933
|
+
var templateObject_1$J, templateObject_2$A;
|
|
14920
14934
|
|
|
14921
14935
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14922
14936
|
var background = _a.background, width = _a.width;
|
|
@@ -18736,12 +18750,12 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18736
18750
|
HTMLReactParser$1.attributesToProps;
|
|
18737
18751
|
HTMLReactParser$1.Element;
|
|
18738
18752
|
|
|
18739
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18740
|
-
var Card = newStyled.div(templateObject_2$
|
|
18741
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18742
|
-
var Label$2 = newStyled.div(templateObject_4$
|
|
18743
|
-
var Check = newStyled.div(templateObject_5$
|
|
18744
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18753
|
+
var Container$w = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
18754
|
+
var Card$1 = newStyled.div(templateObject_2$z || (templateObject_2$z = __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"])));
|
|
18755
|
+
var Tag$1 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
18756
|
+
var Label$2 = newStyled.div(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
18757
|
+
var Check = newStyled.div(templateObject_5$h || (templateObject_5$h = __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"])));
|
|
18758
|
+
var IconContainer$1 = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18745
18759
|
var IconPlaceholder = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18746
18760
|
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"])));
|
|
18747
18761
|
var PackSelector = function (_a) {
|
|
@@ -18760,7 +18774,7 @@ var PackCard = function (_a) {
|
|
|
18760
18774
|
.then(function (icon) { return setIcon(icon); })
|
|
18761
18775
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
18762
18776
|
}, [pack.meta.icon]);
|
|
18763
|
-
return (jsxRuntime.jsxs(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$2, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18777
|
+
return (jsxRuntime.jsxs(Card$1, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$2, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18764
18778
|
color: 'var(--colors-semantic-urgent-color)',
|
|
18765
18779
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
18766
18780
|
locale: 'en-US',
|
|
@@ -18773,14 +18787,14 @@ var PackCard = function (_a) {
|
|
|
18773
18787
|
currency: currencyCode || 'USD',
|
|
18774
18788
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18775
18789
|
};
|
|
18776
|
-
var templateObject_1$
|
|
18790
|
+
var templateObject_1$I, templateObject_2$z, templateObject_3$v, templateObject_4$o, templateObject_5$h, templateObject_6$f, templateObject_7$d, templateObject_8$a;
|
|
18777
18791
|
|
|
18778
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18779
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18780
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18792
|
+
var Container$v = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18793
|
+
var IconContainer = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
18794
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18781
18795
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18782
18796
|
}));
|
|
18783
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18797
|
+
var PageNumber = newStyled.span(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
18784
18798
|
var bold = _a.bold;
|
|
18785
18799
|
return (bold ? '700' : '500');
|
|
18786
18800
|
}, function (_a) {
|
|
@@ -18797,7 +18811,7 @@ var PageNumber = newStyled.span(templateObject_4$l || (templateObject_4$l = __ma
|
|
|
18797
18811
|
var background = _a.background;
|
|
18798
18812
|
return background || 'unset';
|
|
18799
18813
|
});
|
|
18800
|
-
var templateObject_1$
|
|
18814
|
+
var templateObject_1$H, templateObject_2$y, templateObject_3$u, templateObject_4$n;
|
|
18801
18815
|
|
|
18802
18816
|
var Pagination = function (_a) {
|
|
18803
18817
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18862,7 +18876,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18862
18876
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18863
18877
|
};
|
|
18864
18878
|
|
|
18865
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
18879
|
+
var Container$u = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18866
18880
|
var width = _a.width;
|
|
18867
18881
|
return width;
|
|
18868
18882
|
}, function (_a) {
|
|
@@ -18880,12 +18894,12 @@ var PaymentMethod = function (_a) {
|
|
|
18880
18894
|
var theme = useTheme();
|
|
18881
18895
|
return (jsxRuntime.jsx(Container$u, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
18882
18896
|
};
|
|
18883
|
-
var templateObject_1$
|
|
18897
|
+
var templateObject_1$G;
|
|
18884
18898
|
|
|
18885
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
18899
|
+
var Container$t = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18886
18900
|
var IMAGE_WIDTH = '63px';
|
|
18887
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18888
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18901
|
+
var ImageContainer$3 = newStyled.div(templateObject_2$x || (templateObject_2$x = __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);
|
|
18902
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
18889
18903
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18890
18904
|
}), IMAGE_WIDTH);
|
|
18891
18905
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18908,7 +18922,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18908
18922
|
margin: margin,
|
|
18909
18923
|
});
|
|
18910
18924
|
});
|
|
18911
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18925
|
+
var PriceContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
18912
18926
|
var withTag = _a.withTag; _a.theme;
|
|
18913
18927
|
return withTag
|
|
18914
18928
|
? mediaQueries({
|
|
@@ -18917,15 +18931,15 @@ var PriceContainer = newStyled.div(templateObject_4$k || (templateObject_4$k = _
|
|
|
18917
18931
|
})
|
|
18918
18932
|
: 'justify-content: end';
|
|
18919
18933
|
});
|
|
18920
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18921
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18934
|
+
var Quantity = newStyled.div(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
18935
|
+
var StyledSpan = newStyled.span(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18922
18936
|
var SimpleOrderItem = function (_a) {
|
|
18923
18937
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18924
18938
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, midElement = _a.midElement, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
18925
18939
|
var theme = useTheme();
|
|
18926
18940
|
return (jsxRuntime.jsxs(Container$t, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title" }, { children: subtitle }), void 0), midElement, jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18927
18941
|
};
|
|
18928
|
-
var templateObject_1$
|
|
18942
|
+
var templateObject_1$F, templateObject_2$x, templateObject_3$t, templateObject_4$m, templateObject_5$g, templateObject_6$e;
|
|
18929
18943
|
|
|
18930
18944
|
var P$1 = newStyled.p(function (_a) {
|
|
18931
18945
|
var color = _a.color;
|
|
@@ -18939,7 +18953,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18939
18953
|
margin: '0.938rem 4.188rem',
|
|
18940
18954
|
});
|
|
18941
18955
|
});
|
|
18942
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18956
|
+
var Bar = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18943
18957
|
var height = _a.height;
|
|
18944
18958
|
return height || '0.5rem';
|
|
18945
18959
|
}, function (_a) {
|
|
@@ -18984,12 +18998,12 @@ var ProgressBar = function (_a) {
|
|
|
18984
18998
|
var theme = useTheme();
|
|
18985
18999
|
return (jsxRuntime.jsxs(Container$s, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18986
19000
|
};
|
|
18987
|
-
var templateObject_1$
|
|
19001
|
+
var templateObject_1$E;
|
|
18988
19002
|
|
|
18989
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
18990
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18991
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18992
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
19003
|
+
var Container$r = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
19004
|
+
var Item$1 = newStyled.span(templateObject_2$w || (templateObject_2$w = __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"])));
|
|
19005
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
19006
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
18993
19007
|
var QuantityPicker = function (_a) {
|
|
18994
19008
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
18995
19009
|
var theme = useTheme();
|
|
@@ -19014,7 +19028,7 @@ var QuantityPicker = function (_a) {
|
|
|
19014
19028
|
}, [value, clamp]);
|
|
19015
19029
|
return (jsxRuntime.jsxs(Container$r, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
19016
19030
|
};
|
|
19017
|
-
var templateObject_1$
|
|
19031
|
+
var templateObject_1$D, templateObject_2$w, templateObject_3$s, templateObject_4$l;
|
|
19018
19032
|
|
|
19019
19033
|
/* base styles & size variants */
|
|
19020
19034
|
var CustomRadioStyles$1 = {
|
|
@@ -19083,9 +19097,9 @@ var ContainerStyles$1 = {
|
|
|
19083
19097
|
},
|
|
19084
19098
|
};
|
|
19085
19099
|
|
|
19086
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19100
|
+
var Wrapper$3 = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
19087
19101
|
var Container$q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19088
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19102
|
+
var Input$2 = newStyled.input(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
19089
19103
|
var disabled = _a.disabled;
|
|
19090
19104
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19091
19105
|
});
|
|
@@ -19093,7 +19107,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19093
19107
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19094
19108
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19095
19109
|
]; });
|
|
19096
|
-
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$
|
|
19110
|
+
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
19097
19111
|
var RadioPrimary = function (_a) {
|
|
19098
19112
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d;
|
|
19099
19113
|
var theme = useTheme();
|
|
@@ -19103,7 +19117,7 @@ var RadioPrimary = function (_a) {
|
|
|
19103
19117
|
};
|
|
19104
19118
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$q, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19105
19119
|
};
|
|
19106
|
-
var templateObject_1$
|
|
19120
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$r;
|
|
19107
19121
|
|
|
19108
19122
|
var RadioGroupInput = function (_a) {
|
|
19109
19123
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19182,9 +19196,9 @@ var ContainerStyles = {
|
|
|
19182
19196
|
},
|
|
19183
19197
|
};
|
|
19184
19198
|
|
|
19185
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19199
|
+
var Wrapper$2 = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
19186
19200
|
var Container$p = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19187
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19201
|
+
var Input$1 = 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) {
|
|
19188
19202
|
var disabled = _a.disabled;
|
|
19189
19203
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19190
19204
|
});
|
|
@@ -19192,7 +19206,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19192
19206
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19193
19207
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19194
19208
|
]; });
|
|
19195
|
-
var StyledLabel = newStyled(Label$5)(templateObject_3$
|
|
19209
|
+
var StyledLabel = newStyled(Label$5)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19196
19210
|
var theme = _a.theme;
|
|
19197
19211
|
return theme.component.radio.textSize;
|
|
19198
19212
|
}, function (_a) {
|
|
@@ -19208,7 +19222,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19208
19222
|
};
|
|
19209
19223
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$p, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19210
19224
|
};
|
|
19211
|
-
var templateObject_1$
|
|
19225
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$q;
|
|
19212
19226
|
|
|
19213
19227
|
var ClubRadioGroupInput = function (_a) {
|
|
19214
19228
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19236,12 +19250,12 @@ function formatDate(date, format) {
|
|
|
19236
19250
|
}
|
|
19237
19251
|
}
|
|
19238
19252
|
|
|
19239
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19240
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19241
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19242
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19243
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19244
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19253
|
+
var Container$o = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
19254
|
+
var Content$1 = newStyled.div(templateObject_2$t || (templateObject_2$t = __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"])));
|
|
19255
|
+
var StarsContent = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19256
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
19257
|
+
var DateText$1 = newStyled.span(templateObject_5$f || (templateObject_5$f = __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"])));
|
|
19258
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
19245
19259
|
var VerifiedText = newStyled.h1(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
19246
19260
|
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"])));
|
|
19247
19261
|
var ReviewDescription = newStyled.div(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
@@ -19277,16 +19291,16 @@ var Review$1 = function (_a) {
|
|
|
19277
19291
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$o, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19278
19292
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19279
19293
|
};
|
|
19280
|
-
var templateObject_1$
|
|
19294
|
+
var templateObject_1$A, templateObject_2$t, templateObject_3$p, templateObject_4$k, templateObject_5$f, templateObject_6$d, templateObject_7$c, templateObject_8$9, templateObject_9$6, templateObject_10$6, templateObject_11$4, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19281
19295
|
|
|
19282
19296
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19283
19297
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19284
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
19285
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19286
|
-
var Content = newStyled.div(templateObject_3$
|
|
19287
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19288
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19289
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19298
|
+
var Container$n = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
19299
|
+
var Heading = newStyled.div(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
19300
|
+
var Content = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19301
|
+
var ReviewContainer = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19302
|
+
var DateText = newStyled.span(templateObject_5$e || (templateObject_5$e = __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"])));
|
|
19303
|
+
var VariantText = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19290
19304
|
var ReviewerName = newStyled.h2(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
19291
19305
|
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"])));
|
|
19292
19306
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
@@ -19333,14 +19347,14 @@ var Review = function (_a) {
|
|
|
19333
19347
|
: description,
|
|
19334
19348
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19335
19349
|
};
|
|
19336
|
-
var templateObject_1$
|
|
19337
|
-
|
|
19338
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19339
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19340
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19341
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19342
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19343
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19350
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$o, templateObject_4$j, templateObject_5$e, templateObject_6$c, 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;
|
|
19351
|
+
|
|
19352
|
+
var Container$m = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19353
|
+
var ReviewsContainer = newStyled.div(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
19354
|
+
var ReviewsCount = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
19355
|
+
var ReviewsStars = newStyled.div(templateObject_4$i || (templateObject_4$i = __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"])));
|
|
19356
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$d || (templateObject_5$d = __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"])));
|
|
19357
|
+
var ReviewsImages = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
19344
19358
|
var SummaryItem = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
19345
19359
|
var backgroundUrl = _a.backgroundUrl;
|
|
19346
19360
|
return "url(".concat(backgroundUrl, ")");
|
|
@@ -19351,17 +19365,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19351
19365
|
var theme = useTheme();
|
|
19352
19366
|
return (jsxRuntime.jsxs(Container$m, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19353
19367
|
};
|
|
19354
|
-
var templateObject_1$
|
|
19368
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$n, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$a;
|
|
19355
19369
|
|
|
19356
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19357
|
-
var Text = newStyled.p(templateObject_2$
|
|
19370
|
+
var Container$l = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19371
|
+
var Text = newStyled.p(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
19358
19372
|
var ScrollToTop = function (_a) {
|
|
19359
19373
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19360
19374
|
var theme = useTheme();
|
|
19361
19375
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19362
19376
|
return (jsxRuntime.jsxs(Container$l, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19363
19377
|
};
|
|
19364
|
-
var templateObject_1$
|
|
19378
|
+
var templateObject_1$x, templateObject_2$q;
|
|
19365
19379
|
|
|
19366
19380
|
var Input = newStyled.input(function (props) { return ({
|
|
19367
19381
|
padding: props.theme.component.input.padding,
|
|
@@ -19392,7 +19406,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19392
19406
|
},
|
|
19393
19407
|
}); });
|
|
19394
19408
|
|
|
19395
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19409
|
+
var Container$k = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
19396
19410
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19397
19411
|
}));
|
|
19398
19412
|
var Description = newStyled.div({
|
|
@@ -19411,7 +19425,7 @@ var ProductItem = function (_a) {
|
|
|
19411
19425
|
var theme = useTheme();
|
|
19412
19426
|
return (jsxRuntime.jsxs(Container$k, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19413
19427
|
};
|
|
19414
|
-
var templateObject_1$
|
|
19428
|
+
var templateObject_1$w;
|
|
19415
19429
|
|
|
19416
19430
|
var Container$j = newStyled.div({
|
|
19417
19431
|
display: 'flex',
|
|
@@ -19427,7 +19441,7 @@ var Ul = newStyled.ul({
|
|
|
19427
19441
|
margin: '0px',
|
|
19428
19442
|
padding: '0px',
|
|
19429
19443
|
});
|
|
19430
|
-
var Li = newStyled.li(templateObject_1$
|
|
19444
|
+
var Li = newStyled.li(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
19431
19445
|
padding: [0, '0rem 1rem'],
|
|
19432
19446
|
borderRadius: [0, '0.5rem'],
|
|
19433
19447
|
}));
|
|
@@ -19439,12 +19453,12 @@ var Anchor = newStyled.a({
|
|
|
19439
19453
|
padding: 0,
|
|
19440
19454
|
textDecoration: 'none',
|
|
19441
19455
|
});
|
|
19442
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19456
|
+
var Container$i = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
19443
19457
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19444
19458
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19445
19459
|
borderRadius: ['0', '0.5rem'],
|
|
19446
19460
|
}));
|
|
19447
|
-
var Header = newStyled.div(templateObject_3$
|
|
19461
|
+
var Header = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19448
19462
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19449
19463
|
}));
|
|
19450
19464
|
var ResultsPanel = function (_a) {
|
|
@@ -19452,9 +19466,9 @@ var ResultsPanel = function (_a) {
|
|
|
19452
19466
|
var theme = useTheme();
|
|
19453
19467
|
return (jsxRuntime.jsxs(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19454
19468
|
};
|
|
19455
|
-
var templateObject_1$
|
|
19469
|
+
var templateObject_1$v, templateObject_2$p, templateObject_3$m;
|
|
19456
19470
|
|
|
19457
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19471
|
+
var Button$1 = newStyled.button(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
19458
19472
|
right: ['1rem', '7.75rem'],
|
|
19459
19473
|
top: ['0.75rem', '0.75rem'],
|
|
19460
19474
|
}));
|
|
@@ -19463,7 +19477,7 @@ var ClearButton = function (_a) {
|
|
|
19463
19477
|
var theme = useTheme();
|
|
19464
19478
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19465
19479
|
};
|
|
19466
|
-
var templateObject_1$
|
|
19480
|
+
var templateObject_1$u;
|
|
19467
19481
|
|
|
19468
19482
|
var SearchIconContainer = newStyled.div({
|
|
19469
19483
|
display: 'flex',
|
|
@@ -19473,7 +19487,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19473
19487
|
background: 'white',
|
|
19474
19488
|
alignSelf: 'center',
|
|
19475
19489
|
});
|
|
19476
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19490
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19477
19491
|
var SearchControl = function (_a) {
|
|
19478
19492
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19479
19493
|
var theme = useTheme();
|
|
@@ -19489,7 +19503,7 @@ var SearchControl = function (_a) {
|
|
|
19489
19503
|
}
|
|
19490
19504
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19491
19505
|
};
|
|
19492
|
-
var templateObject_1$
|
|
19506
|
+
var templateObject_1$t;
|
|
19493
19507
|
|
|
19494
19508
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19495
19509
|
var reducer = function (state, action) {
|
|
@@ -19556,20 +19570,20 @@ var SearchBar = function (_a) {
|
|
|
19556
19570
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19557
19571
|
};
|
|
19558
19572
|
|
|
19559
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19560
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19561
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19562
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19563
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19573
|
+
var Container$g = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19574
|
+
var BackArrow = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19575
|
+
var BoldSpan = newStyled.span(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19576
|
+
var NormalSpan = newStyled.span(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
19577
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19564
19578
|
var SearchNavigation = function (_a) {
|
|
19565
19579
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19566
19580
|
return (jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19567
19581
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19568
19582
|
}) }, void 0)] }, void 0));
|
|
19569
19583
|
};
|
|
19570
|
-
var templateObject_1$
|
|
19584
|
+
var templateObject_1$s, templateObject_2$o, templateObject_3$l, templateObject_4$h, templateObject_5$c;
|
|
19571
19585
|
|
|
19572
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19586
|
+
var Container$f = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19573
19587
|
var alignCenter = _a.alignCenter;
|
|
19574
19588
|
return alignCenter &&
|
|
19575
19589
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19579,26 +19593,26 @@ var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __ma
|
|
|
19579
19593
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19580
19594
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19581
19595
|
});
|
|
19582
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19583
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19596
|
+
var TitleText = newStyled.div(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
19597
|
+
var BannerText = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19584
19598
|
var ShortBanner = function (_a) {
|
|
19585
19599
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19586
19600
|
var theme = useTheme();
|
|
19587
19601
|
return (jsxRuntime.jsxs(Container$f, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19588
19602
|
};
|
|
19589
|
-
var templateObject_1$
|
|
19590
|
-
|
|
19591
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19592
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19593
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19594
|
-
var Label$1 = newStyled('div')(templateObject_4$
|
|
19595
|
-
var TopLabel$1 = newStyled(Label$1)(templateObject_5$
|
|
19596
|
-
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$
|
|
19603
|
+
var templateObject_1$r, templateObject_2$n, templateObject_3$k;
|
|
19604
|
+
|
|
19605
|
+
var TableElement$2 = newStyled.table(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19606
|
+
var TableCell$2 = newStyled.td(templateObject_2$m || (templateObject_2$m = __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; });
|
|
19607
|
+
var TableHead$2 = newStyled.th(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19608
|
+
var Label$1 = newStyled('div')(templateObject_4$g || (templateObject_4$g = __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"])));
|
|
19609
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19610
|
+
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19597
19611
|
var Container$e = newStyled('div')(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19598
19612
|
var LabelText$1 = newStyled('span')(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19599
19613
|
var Column$1 = newStyled('div')(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19600
19614
|
var TableRow$2 = newStyled.tr(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19601
|
-
var templateObject_1$
|
|
19615
|
+
var templateObject_1$q, templateObject_2$m, templateObject_3$j, templateObject_4$g, templateObject_5$b, templateObject_6$a, templateObject_7$9, templateObject_8$7, templateObject_9$4, templateObject_10$4;
|
|
19602
19616
|
|
|
19603
19617
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19604
19618
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19639,16 +19653,16 @@ var SizeChartTable = function (_a) {
|
|
|
19639
19653
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(TableRow$2, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19640
19654
|
};
|
|
19641
19655
|
|
|
19642
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19643
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19644
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19645
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
19656
|
+
var TableElement$1 = newStyled.table(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19657
|
+
var TableCell$1 = newStyled.td(templateObject_2$l || (templateObject_2$l = __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; });
|
|
19658
|
+
var TableHead$1 = newStyled.th(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19659
|
+
var TableRow$1 = newStyled.tr(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19646
19660
|
var SizeTable = function (_a) {
|
|
19647
19661
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19648
19662
|
var theme = useTheme();
|
|
19649
19663
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19650
19664
|
};
|
|
19651
|
-
var templateObject_1$
|
|
19665
|
+
var templateObject_1$p, templateObject_2$l, templateObject_3$i, templateObject_4$f;
|
|
19652
19666
|
|
|
19653
19667
|
var getStylesBySize$7 = function (size) {
|
|
19654
19668
|
switch (size) {
|
|
@@ -19675,7 +19689,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19675
19689
|
} });
|
|
19676
19690
|
};
|
|
19677
19691
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19678
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19692
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19679
19693
|
};
|
|
19680
19694
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19681
19695
|
if (disabled)
|
|
@@ -19691,23 +19705,23 @@ var TextButton = function (_a) {
|
|
|
19691
19705
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19692
19706
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
19693
19707
|
};
|
|
19694
|
-
var templateObject_1$
|
|
19708
|
+
var templateObject_1$o;
|
|
19695
19709
|
|
|
19696
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19697
|
-
var P = newStyled.p(templateObject_2$
|
|
19698
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19710
|
+
var Container$d = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19711
|
+
var P = newStyled.p(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19712
|
+
var PercentageSpan = newStyled.span(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19699
19713
|
var SizeFitGuide = function (_a) {
|
|
19700
19714
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19701
19715
|
return (jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19702
19716
|
};
|
|
19703
|
-
var templateObject_1$
|
|
19717
|
+
var templateObject_1$n, templateObject_2$k, templateObject_3$h;
|
|
19704
19718
|
|
|
19705
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19719
|
+
var ButtonsContainer = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19706
19720
|
var inline = _a.inline;
|
|
19707
19721
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19708
19722
|
});
|
|
19709
|
-
var Row = newStyled.div(templateObject_2$
|
|
19710
|
-
var templateObject_1$
|
|
19723
|
+
var Row = newStyled.div(templateObject_2$j || (templateObject_2$j = __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"])));
|
|
19724
|
+
var templateObject_1$m, templateObject_2$j;
|
|
19711
19725
|
|
|
19712
19726
|
var SizeSelector = function (_a) {
|
|
19713
19727
|
var _b;
|
|
@@ -19729,7 +19743,7 @@ var SizeSelector = function (_a) {
|
|
|
19729
19743
|
}) }), void 0)] }), void 0));
|
|
19730
19744
|
};
|
|
19731
19745
|
|
|
19732
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19746
|
+
var TabContainer = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19733
19747
|
var titleSize = _a.titleSize;
|
|
19734
19748
|
return titleSize;
|
|
19735
19749
|
}, function (_a) {
|
|
@@ -19746,18 +19760,18 @@ var Tab = function (_a) {
|
|
|
19746
19760
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19747
19761
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19748
19762
|
};
|
|
19749
|
-
var templateObject_1$
|
|
19763
|
+
var templateObject_1$l;
|
|
19750
19764
|
|
|
19751
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19752
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19765
|
+
var Container$c = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19766
|
+
var TabList = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19753
19767
|
var backgroundColor = _a.backgroundColor;
|
|
19754
19768
|
return backgroundColor;
|
|
19755
19769
|
}, function (_a) {
|
|
19756
19770
|
var borderColor = _a.borderColor;
|
|
19757
19771
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19758
19772
|
});
|
|
19759
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19760
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19773
|
+
var TabContent = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19774
|
+
var TabSeparator = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19761
19775
|
var Tabs = function (_a) {
|
|
19762
19776
|
var _b;
|
|
19763
19777
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -19768,14 +19782,14 @@ var Tabs = function (_a) {
|
|
|
19768
19782
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19769
19783
|
return (jsxRuntime.jsxs(Container$c, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19770
19784
|
};
|
|
19771
|
-
var templateObject_1$
|
|
19785
|
+
var templateObject_1$k, templateObject_2$i, templateObject_3$g, templateObject_4$e;
|
|
19772
19786
|
|
|
19773
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19787
|
+
var Container$b = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19774
19788
|
var Tag = function (_a) {
|
|
19775
19789
|
var text = _a.text, className = _a.className;
|
|
19776
19790
|
return jsxRuntime.jsx(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19777
19791
|
};
|
|
19778
|
-
var templateObject_1$
|
|
19792
|
+
var templateObject_1$j;
|
|
19779
19793
|
|
|
19780
19794
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19781
19795
|
switch (size) {
|
|
@@ -19886,9 +19900,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19886
19900
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19887
19901
|
};
|
|
19888
19902
|
|
|
19889
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19890
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19891
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19903
|
+
var ImageWrapper = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19904
|
+
var VideoOverlay = newStyled.div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
19905
|
+
var FullscreenVideo = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19892
19906
|
var ImageVideo = function (_a) {
|
|
19893
19907
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19894
19908
|
var video = React$2.useRef(null);
|
|
@@ -19908,12 +19922,12 @@ var ImageVideo = function (_a) {
|
|
|
19908
19922
|
height: '100%',
|
|
19909
19923
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19910
19924
|
};
|
|
19911
|
-
var templateObject_1$
|
|
19925
|
+
var templateObject_1$i, templateObject_2$h, templateObject_3$f;
|
|
19912
19926
|
|
|
19913
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19914
|
-
var ContainerMobile = css(templateObject_2$
|
|
19915
|
-
var Container$a = newStyled.div(templateObject_3$
|
|
19916
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19927
|
+
var ContainerDesktop = css(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19928
|
+
var ContainerMobile = css(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
19929
|
+
var Container$a = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19930
|
+
var TextContainer = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
19917
19931
|
var TextWithImage = function (_a) {
|
|
19918
19932
|
var _b, _c, _d, _e;
|
|
19919
19933
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -19943,25 +19957,25 @@ var TextWithImage = function (_a) {
|
|
|
19943
19957
|
},
|
|
19944
19958
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19945
19959
|
};
|
|
19946
|
-
var templateObject_1$
|
|
19960
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$e, templateObject_4$d;
|
|
19947
19961
|
|
|
19948
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19962
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19949
19963
|
var timerColor = _a.timerColor;
|
|
19950
19964
|
return timerColor || '';
|
|
19951
19965
|
});
|
|
19952
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19966
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"], ["\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: 10px;\n"])), function (_a) {
|
|
19953
19967
|
var timerColor = _a.timerColor;
|
|
19954
19968
|
return timerColor || '';
|
|
19955
19969
|
});
|
|
19956
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19970
|
+
var UnitBlock = newStyled(Text$7)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: 32px;\n height: 32px;\n border-radius: 2px;\n padding: 0 6px;\n line-height: 22px;\n text-align: center;\n position: relative;\n & + & {\n &:before {\n position: absolute;\n content: ':';\n display: block;\n left: -7px;\n top: 5px;\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
19957
19971
|
var theme = _a.theme;
|
|
19958
19972
|
return theme.colors.shades.white.color;
|
|
19959
19973
|
}, function (_a) {
|
|
19960
19974
|
var theme = _a.theme;
|
|
19961
19975
|
return theme.colors.shades.white.color;
|
|
19962
19976
|
});
|
|
19963
|
-
var Unit = newStyled.p(templateObject_4$
|
|
19964
|
-
var templateObject_1$
|
|
19977
|
+
var Unit = newStyled.p(templateObject_4$c || (templateObject_4$c = __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"])));
|
|
19978
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$d, templateObject_4$c;
|
|
19965
19979
|
|
|
19966
19980
|
var HRS = 'HRS';
|
|
19967
19981
|
var MIN = 'MIN';
|
|
@@ -20002,9 +20016,9 @@ var Timer = function (_a) {
|
|
|
20002
20016
|
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
20003
20017
|
};
|
|
20004
20018
|
|
|
20005
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20006
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20007
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20019
|
+
var Wrapper$1 = newStyled.div(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
20020
|
+
var GrandTotal = newStyled.h1(templateObject_2$e || (templateObject_2$e = __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; });
|
|
20021
|
+
var Currency = newStyled.span(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
20008
20022
|
var theme = _a.theme;
|
|
20009
20023
|
return theme.component.total.basicTotal.currency.color;
|
|
20010
20024
|
}, function (_a) {
|
|
@@ -20017,21 +20031,21 @@ var Currency = newStyled.span(templateObject_3$9 || (templateObject_3$9 = __make
|
|
|
20017
20031
|
var theme = _a.theme;
|
|
20018
20032
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20019
20033
|
});
|
|
20020
|
-
var Container$9 = newStyled.div(templateObject_4$
|
|
20034
|
+
var Container$9 = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
20021
20035
|
var highlightColor = _a.highlightColor;
|
|
20022
20036
|
return highlightColor;
|
|
20023
20037
|
});
|
|
20024
|
-
var TotalContainer = newStyled(Container$9)(templateObject_5$
|
|
20038
|
+
var TotalContainer = newStyled(Container$9)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20025
20039
|
var showTotalLabel = _a.showTotalLabel;
|
|
20026
20040
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20027
20041
|
});
|
|
20028
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20042
|
+
var DiscountText = newStyled.h3(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
20029
20043
|
var DiscountAmount = newStyled.h3(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
20030
20044
|
var theme = _a.theme;
|
|
20031
20045
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20032
20046
|
});
|
|
20033
20047
|
var TotalLabel = newStyled(Text$7)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20034
|
-
var templateObject_1$
|
|
20048
|
+
var templateObject_1$f, templateObject_2$e, templateObject_3$c, templateObject_4$b, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$6;
|
|
20035
20049
|
|
|
20036
20050
|
var Total = function (_a) {
|
|
20037
20051
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
@@ -20039,19 +20053,19 @@ var Total = function (_a) {
|
|
|
20039
20053
|
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$9, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20040
20054
|
};
|
|
20041
20055
|
|
|
20042
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20056
|
+
var Wrapper = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20043
20057
|
var color = _a.color;
|
|
20044
20058
|
return color;
|
|
20045
20059
|
});
|
|
20046
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20047
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20060
|
+
var ItemContainer = newStyled.div(templateObject_2$d || (templateObject_2$d = __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"])));
|
|
20061
|
+
var Item = newStyled.h4(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
20048
20062
|
var theme = _a.theme;
|
|
20049
20063
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20050
20064
|
}, function (_a) {
|
|
20051
20065
|
var theme = _a.theme;
|
|
20052
20066
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20053
20067
|
});
|
|
20054
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20068
|
+
var CouponItem = newStyled(Item)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20055
20069
|
var color = _a.color;
|
|
20056
20070
|
return color;
|
|
20057
20071
|
});
|
|
@@ -20064,18 +20078,65 @@ var Subtotal = function (_a) {
|
|
|
20064
20078
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20065
20079
|
})] }), void 0));
|
|
20066
20080
|
};
|
|
20067
|
-
var templateObject_1$
|
|
20081
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$b, templateObject_4$a;
|
|
20068
20082
|
|
|
20069
20083
|
var Totals = {
|
|
20070
20084
|
Total: Total,
|
|
20071
20085
|
Subtotal: Subtotal,
|
|
20072
20086
|
};
|
|
20073
20087
|
|
|
20074
|
-
var
|
|
20075
|
-
|
|
20076
|
-
|
|
20077
|
-
|
|
20078
|
-
var
|
|
20088
|
+
var slideInAnimation = function (distanceFromTop) {
|
|
20089
|
+
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20090
|
+
return keyframes(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20091
|
+
};
|
|
20092
|
+
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20093
|
+
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20094
|
+
return keyframes(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"], ["\n from {\n top: 0;\n }\n to {\n top: ", ";\n }\n"])), distanceFromTop);
|
|
20095
|
+
};
|
|
20096
|
+
var ToastContainer = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n"])));
|
|
20097
|
+
var ToastContent = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: fixed;\n top: ", "; \n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"], ["\n position: fixed;\n top: ", "; \n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.2);\n width: 730px;\n animation: ", " 0.5s ease;\n\n @media (max-width: 768px) {\n width: calc(100vw - 32px);\n top: ", ";\n min-width: auto;\n animation: ", " 0.5s ease;\n }\n"])), function (_a) {
|
|
20098
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20099
|
+
return distanceFromTop || '124px';
|
|
20100
|
+
}, function (_a) {
|
|
20101
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20102
|
+
return slideInAnimation(distanceFromTop);
|
|
20103
|
+
}, function (_a) {
|
|
20104
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20105
|
+
return distanceFromTop || '85px';
|
|
20106
|
+
}, function (_a) {
|
|
20107
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20108
|
+
return mobileSlideInAnimation(distanceFromTop);
|
|
20109
|
+
});
|
|
20110
|
+
var ToastText = newStyled.p(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"], ["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"])), function (_a) {
|
|
20111
|
+
var severity = _a.severity;
|
|
20112
|
+
return severity === 'error' ? '#C64844' : '#292929';
|
|
20113
|
+
});
|
|
20114
|
+
var CloseIcon = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20115
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$9, templateObject_5$9, templateObject_6$8;
|
|
20116
|
+
|
|
20117
|
+
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20118
|
+
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
20119
|
+
var _c = React$2.useState(false), isVisible = _c[0], setIsVisible = _c[1];
|
|
20120
|
+
React$2.useEffect(function () {
|
|
20121
|
+
if (isVisible) {
|
|
20122
|
+
var timeout_1 = setTimeout(function () {
|
|
20123
|
+
setIsVisible(false);
|
|
20124
|
+
}, life || 3000);
|
|
20125
|
+
return function () { return clearTimeout(timeout_1); };
|
|
20126
|
+
}
|
|
20127
|
+
}, [isVisible, life]);
|
|
20128
|
+
React$2.useImperativeHandle(ref, function () { return ({
|
|
20129
|
+
show: function () { return setIsVisible(true); },
|
|
20130
|
+
}); });
|
|
20131
|
+
return (jsxRuntime.jsx(ToastContainer, __assign$1({ "data-testid": "toast-container" }, { children: isVisible && (jsxRuntime.jsxs(ToastContent, __assign$1({ "data-testid": "toast-content", distanceFromTop: distanceFromTop }, { children: [severity === 'success' && (jsxRuntime.jsx(Icon.Actions.CircleSolidCheck, { height: "1.5rem", width: "1.5rem", fill: "#4CBEA4" }, void 0)), severity === 'error' && (jsxRuntime.jsx(Icon.Actions.CircleSolidWarning, { height: "1.5rem", width: "1.5rem", fill: "#C64844" }, void 0)), jsxRuntime.jsx(ToastText, __assign$1({ severity: severity }, { children: summary }), void 0), withCloseIcon && (jsxRuntime.jsx(CloseIcon, __assign$1({ role: "button", onClick: function () { return setIsVisible(false); }, "data-testid": "close-icon" }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: "1.1rem", width: "1.1rem", fill: "#5A5A5A" }, void 0) }), void 0))] }), void 0)) }), void 0));
|
|
20132
|
+
});
|
|
20133
|
+
Toast.displayName = 'Toast';
|
|
20134
|
+
|
|
20135
|
+
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"])));
|
|
20136
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20137
|
+
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; });
|
|
20138
|
+
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'); });
|
|
20139
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
20079
20140
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
20080
20141
|
return props.finishedTrack
|
|
20081
20142
|
? props.finishedTrackColor
|
|
@@ -20123,13 +20184,13 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20123
20184
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20124
20185
|
})] }), void 0));
|
|
20125
20186
|
};
|
|
20126
|
-
var templateObject_1$
|
|
20187
|
+
var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$8, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$5, templateObject_9$3, templateObject_10$3, templateObject_11$2;
|
|
20127
20188
|
|
|
20128
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20129
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20130
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20131
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20132
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20189
|
+
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"])));
|
|
20190
|
+
var CheckpointContainer = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20191
|
+
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; });
|
|
20192
|
+
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'); });
|
|
20193
|
+
var CheckpointStatus = newStyled.p(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
20133
20194
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20134
20195
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20135
20196
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20163,9 +20224,9 @@ var TrackingProgress = function (_a) {
|
|
|
20163
20224
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20164
20225
|
})] }), void 0));
|
|
20165
20226
|
};
|
|
20166
|
-
var templateObject_1$
|
|
20227
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$8, templateObject_4$7, templateObject_5$7, templateObject_6$6, templateObject_7$6, templateObject_8$4;
|
|
20167
20228
|
|
|
20168
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20229
|
+
var TimerContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
20169
20230
|
var textPosition = _a.textPosition;
|
|
20170
20231
|
return textPosition;
|
|
20171
20232
|
}, function (_a) {
|
|
@@ -20178,7 +20239,7 @@ var TimerContainer = newStyled.div(templateObject_1$8 || (templateObject_1$8 = _
|
|
|
20178
20239
|
var borderRadius = _a.borderRadius;
|
|
20179
20240
|
return borderRadius || '8px';
|
|
20180
20241
|
});
|
|
20181
|
-
var templateObject_1$
|
|
20242
|
+
var templateObject_1$a;
|
|
20182
20243
|
|
|
20183
20244
|
var getDefaultCountdown = function () {
|
|
20184
20245
|
var tomorrowDate = new Date();
|
|
@@ -20194,7 +20255,7 @@ var HurryUp = function (_a) {
|
|
|
20194
20255
|
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
20195
20256
|
};
|
|
20196
20257
|
|
|
20197
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
20258
|
+
var Container$6 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
20198
20259
|
var size = _a.size;
|
|
20199
20260
|
return (size ? size : '100%');
|
|
20200
20261
|
}, function (_a) {
|
|
@@ -20208,7 +20269,7 @@ var borderSize = {
|
|
|
20208
20269
|
large: '3px',
|
|
20209
20270
|
};
|
|
20210
20271
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20211
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20272
|
+
var StyledSpinner = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
20212
20273
|
var size = _a.size;
|
|
20213
20274
|
return borderSize[size];
|
|
20214
20275
|
}, function (_a) {
|
|
@@ -20221,7 +20282,7 @@ var StyledSpinner = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __
|
|
|
20221
20282
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20222
20283
|
return duration;
|
|
20223
20284
|
});
|
|
20224
|
-
var templateObject_1$
|
|
20285
|
+
var templateObject_1$9, templateObject_2$9;
|
|
20225
20286
|
|
|
20226
20287
|
var Spinner = function (_a) {
|
|
20227
20288
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
@@ -20242,9 +20303,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20242
20303
|
var Shades700Color = '#292929';
|
|
20243
20304
|
var PrimaryColor = '#f7a08b';
|
|
20244
20305
|
var ClubBorderColor = '#882a2b';
|
|
20245
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
20246
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
20247
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
20306
|
+
var FlexContainer = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20307
|
+
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);
|
|
20308
|
+
var ContainerBase = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
20248
20309
|
var selected = _a.selected;
|
|
20249
20310
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20250
20311
|
}, function (_a) {
|
|
@@ -20253,14 +20314,14 @@ var ContainerBase = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __
|
|
|
20253
20314
|
? "& label {\n font-weight: 700;\n }"
|
|
20254
20315
|
: '';
|
|
20255
20316
|
}, PrimaryColor);
|
|
20256
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$
|
|
20317
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
20257
20318
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20258
20319
|
return (isNoMember && selected ? Shades700Color : '');
|
|
20259
20320
|
}, function (_a) {
|
|
20260
20321
|
var onClick = _a.onClick;
|
|
20261
20322
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20262
20323
|
});
|
|
20263
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
20324
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
20264
20325
|
var SubscriptionHeader = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
20265
20326
|
var isSelected = _a.isSelected;
|
|
20266
20327
|
return (isSelected ? "1px solid ".concat(Shades200Color) : "none");
|
|
@@ -20285,7 +20346,7 @@ var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_10$2 || (templateObje
|
|
|
20285
20346
|
: Shades200Color;
|
|
20286
20347
|
});
|
|
20287
20348
|
var Container$5 = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20288
|
-
var templateObject_1$
|
|
20349
|
+
var templateObject_1$8, templateObject_2$8, templateObject_3$7, templateObject_4$6, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$1;
|
|
20289
20350
|
|
|
20290
20351
|
var ClubOfferSelector = function (_a) {
|
|
20291
20352
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20331,6 +20392,49 @@ var ClubOfferSelector = function (_a) {
|
|
|
20331
20392
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsxRuntime.jsx(BenefitsContainer, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsxRuntime.jsx(Benefit, { children: jsxRuntime.jsx(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice, { isNoMember: true, testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20332
20393
|
};
|
|
20333
20394
|
|
|
20395
|
+
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"])));
|
|
20396
|
+
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"])));
|
|
20397
|
+
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"])));
|
|
20398
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$6;
|
|
20399
|
+
|
|
20400
|
+
var ToggleComponent = function (_a) {
|
|
20401
|
+
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
20402
|
+
var _c = React$2.useState(isChecked), checked = _c[0], setChecked = _c[1];
|
|
20403
|
+
var handleChange = function (e) {
|
|
20404
|
+
setChecked(function (value) { return !value; });
|
|
20405
|
+
onToggle(e.target.checked);
|
|
20406
|
+
};
|
|
20407
|
+
return (jsxRuntime.jsxs(LabelWrapper, { children: [jsxRuntime.jsx(InputWrapper, { checked: checked, type: "checkbox", onChange: handleChange, value: "".concat(checked) }, void 0), jsxRuntime.jsx(SwitchWrapper, {}, void 0)] }, void 0));
|
|
20408
|
+
};
|
|
20409
|
+
|
|
20410
|
+
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) {
|
|
20411
|
+
var $checked = _a.$checked;
|
|
20412
|
+
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20413
|
+
}, function (_a) {
|
|
20414
|
+
var $checked = _a.$checked;
|
|
20415
|
+
return ($checked ? '#FFE1B8' : '#E5E5E5');
|
|
20416
|
+
});
|
|
20417
|
+
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"])));
|
|
20418
|
+
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"])));
|
|
20419
|
+
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"])));
|
|
20420
|
+
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"])));
|
|
20421
|
+
var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$5;
|
|
20422
|
+
|
|
20423
|
+
function Card(_a) {
|
|
20424
|
+
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;
|
|
20425
|
+
return (jsxRuntime.jsxs(ContainerWrapper, __assign$1({ "$checked": isChecked }, { children: [jsxRuntime.jsxs(CardHeaderWrapper, { children: [jsxRuntime.jsxs(ClubCopyWrapper, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("img", { src: srcImage, alt: "" }, void 0) }, void 0), jsxRuntime.jsx(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsxRuntime.jsx("div", { children: children }, void 0)] }, void 0), jsxRuntime.jsxs(CardBody, { children: [bodyCopy, ' ', jsxRuntime.jsx("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }, void 0)] }), void 0));
|
|
20426
|
+
}
|
|
20427
|
+
|
|
20428
|
+
function JoinClubCard(_a) {
|
|
20429
|
+
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, srcImage = _a.srcImage, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20430
|
+
var _b = React$2.useState(isChecked), checked = _b[0], setChecked = _b[1];
|
|
20431
|
+
var handleToggleValue = function (value) {
|
|
20432
|
+
setChecked(value);
|
|
20433
|
+
onCheckToggle(value);
|
|
20434
|
+
};
|
|
20435
|
+
return (jsxRuntime.jsx(Card, __assign$1({ link: link, srcImage: srcImage, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy }, { children: jsxRuntime.jsx(ToggleComponent, { onToggle: handleToggleValue, isChecked: isChecked }, void 0) }), void 0));
|
|
20436
|
+
}
|
|
20437
|
+
|
|
20334
20438
|
var ImageContainer$1 = newStyled.div(function (_a) {
|
|
20335
20439
|
var width = _a.width, height = _a.height;
|
|
20336
20440
|
return ({
|
|
@@ -20788,7 +20892,7 @@ exports.ButtonSecondary = ButtonSecondary;
|
|
|
20788
20892
|
exports.ButtonSecondaryOutline = ButtonSecondaryOutline;
|
|
20789
20893
|
exports.BuyNowPayLater = BuyNowPayLater;
|
|
20790
20894
|
exports.CancellationFlowAccordionContentPerPartner = CancellationFlowAccordionContentPerPartner;
|
|
20791
|
-
exports.Card = Card$
|
|
20895
|
+
exports.Card = Card$3;
|
|
20792
20896
|
exports.CartProductItem = CartProductItem;
|
|
20793
20897
|
exports.CategorySquareTag = CategorySquareTag;
|
|
20794
20898
|
exports.CategoryTag = CategoryTag;
|
|
@@ -20817,6 +20921,7 @@ exports.IconsWithTitle = IconsWithTitle;
|
|
|
20817
20921
|
exports.Image = Image$3;
|
|
20818
20922
|
exports.ImageCardWithDescription = ImageCardWithDescription;
|
|
20819
20923
|
exports.Input = Input$3;
|
|
20924
|
+
exports.JoinClubCard = JoinClubCard;
|
|
20820
20925
|
exports.LibIcon = Icon$1;
|
|
20821
20926
|
exports.Modal = Modal;
|
|
20822
20927
|
exports.MotivatorProgressBar = MotivatorProgressBar;
|
|
@@ -20879,6 +20984,7 @@ exports.TextWithImage = TextWithImage;
|
|
|
20879
20984
|
exports.ThemeProvider = ThemeProvider;
|
|
20880
20985
|
exports.ThemeVariables = ThemeVariables;
|
|
20881
20986
|
exports.Timer = Timer;
|
|
20987
|
+
exports.Toast = Toast;
|
|
20882
20988
|
exports.Tooltip = Tooltip;
|
|
20883
20989
|
exports.Totals = Totals;
|
|
20884
20990
|
exports.TrackingProgress = TrackingProgress;
|