@trafilea/afrodita-components 6.25.0 → 6.25.2
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 +16 -2
- package/build/index.esm.js +655 -583
- package/build/index.esm.js.map +1 -1
- package/build/index.js +654 -581
- 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$28 || (templateObject_1$28
|
|
|
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$1u || (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$26 || (templateObject_1$26 = _
|
|
|
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$25 || (templateObject_1$25 = _
|
|
|
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$1r || (templateObject_2$1r = __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,13 +4771,13 @@ 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$
|
|
4766
|
-
heading1: newStyled.h1(templateObject_7$
|
|
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$A || (templateObject_6$A = __makeTemplateObject([""], [""]))),
|
|
4780
|
+
heading1: newStyled.h1(templateObject_7$q || (templateObject_7$q = __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([""], [""]))),
|
|
4769
4783
|
heading4: newStyled.h4(templateObject_10$a || (templateObject_10$a = __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$4 = newStyled.div(templateObject_2$
|
|
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$A, templateObject_7$q, 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$z || (templateObject_6$z = __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) {
|
|
@@ -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$z;
|
|
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$1N || (templateObject_1$1N = __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$1f || (templateObject_2$1f
|
|
|
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,17 +5911,17 @@ var TooltipText = newStyled.div(templateObject_4$P || (templateObject_4$P = __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$y || (templateObject_6$y = __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
|
});
|
|
5905
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5919
|
+
var IconContainer$5 = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5906
5920
|
var CloseToolTip = newStyled.button(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
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$y, templateObject_7$p, 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,20 +5979,20 @@ var ContainerBase$2 = newStyled.div(templateObject_2$1e || (templateObject_2$1e
|
|
|
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$
|
|
5981
|
-
var Benefit$2 = newStyled.div(templateObject_7$
|
|
5994
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5995
|
+
var Benefit$2 = newStyled.div(templateObject_7$o || (templateObject_7$o = __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"])));
|
|
5984
5998
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\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$x, templateObject_7$o, 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,19 +6090,19 @@ var ContainerBase$1 = newStyled.div(templateObject_3$_ || (templateObject_3$_ =
|
|
|
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$w || (templateObject_6$w = __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) {
|
|
6088
6102
|
var theme = _a.theme;
|
|
6089
6103
|
return theme.colors.pallete.primary.color;
|
|
6090
6104
|
});
|
|
6091
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_7$
|
|
6105
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6092
6106
|
var Benefit$1 = newStyled.div(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6093
6107
|
var BenefitText$1 = newStyled(Text$7)(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6094
6108
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
@@ -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$w, templateObject_7$n, 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$v || (templateObject_6$v = __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$v;
|
|
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$L || (templateObject_4$L = __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$
|
|
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"])));
|
|
6311
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;";
|
|
@@ -6336,16 +6350,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6336
6350
|
Footer: CardFooter,
|
|
6337
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;
|
|
@@ -6353,28 +6367,28 @@ var Minimalistic = function (_a) {
|
|
|
6353
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
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,20 +6459,20 @@ 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$
|
|
6454
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
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$u || (templateObject_6$u = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6468
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$m || (templateObject_7$m = __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) {
|
|
6457
6471
|
var clubPrice = _a.clubPrice;
|
|
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$u, templateObject_7$m, 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,15 +6698,15 @@ 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$t || (templateObject_6$t = __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
|
});
|
|
6695
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6709
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6696
6710
|
var ProductItemMobile = function (_a) {
|
|
6697
6711
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
6698
6712
|
display: false,
|
|
@@ -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$t, templateObject_7$l;
|
|
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,12 +6806,12 @@ 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$
|
|
6800
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_7$
|
|
6813
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$s || (templateObject_6$s = __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"])));
|
|
6814
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_7$k || (templateObject_7$k = __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;
|
|
6803
6817
|
});
|
|
@@ -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$s, templateObject_7$k, 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$r || (templateObject_6$r = __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$r;
|
|
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$1k || (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,44 +7177,44 @@ 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$q || (templateObject_6$q = __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;
|
|
7201
7215
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7202
7216
|
});
|
|
7203
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7217
|
+
var SectionDetails = newStyled.p(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7204
7218
|
var theme = _a.theme;
|
|
7205
7219
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7206
7220
|
}, function (_a) {
|
|
@@ -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$q, templateObject_7$j, 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$p || (templateObject_6$p = __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$p;
|
|
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$o || (templateObject_6$o = __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$o;
|
|
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$
|
|
7394
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
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$n || (templateObject_6$n = __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; });
|
|
7408
|
+
var OptionContainer = newStyled.div(templateObject_7$i || (templateObject_7$i = __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$n, templateObject_7$i, 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;
|
|
@@ -7625,10 +7639,10 @@ var FitGuarantee = function (_a) {
|
|
|
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$17 || (templateObject_1$17 = __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$F || (templateObject_3$F = __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$
|
|
11995
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
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$m || (templateObject_6$m = __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"])));
|
|
12009
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$h || (templateObject_7$h = __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$m, templateObject_7$h, 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;
|
|
@@ -12013,6 +12027,70 @@ var ImagePreviewList = function (_a) {
|
|
|
12013
12027
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
12014
12028
|
};
|
|
12015
12029
|
|
|
12030
|
+
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); });
|
|
12031
|
+
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; });
|
|
12032
|
+
var templateObject_1$16, templateObject_2$P;
|
|
12033
|
+
|
|
12034
|
+
var ProgressBar$1 = function (_a) {
|
|
12035
|
+
var progress = _a.progress, hide = _a.hide;
|
|
12036
|
+
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12037
|
+
};
|
|
12038
|
+
|
|
12039
|
+
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"])));
|
|
12040
|
+
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; });
|
|
12041
|
+
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"])));
|
|
12042
|
+
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"])));
|
|
12043
|
+
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"])));
|
|
12044
|
+
var MuteButton = newStyled.button(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
12045
|
+
var templateObject_1$15, templateObject_2$O, templateObject_3$F, templateObject_4$u, templateObject_5$n, templateObject_6$l;
|
|
12046
|
+
|
|
12047
|
+
var Video$1 = function (_a) {
|
|
12048
|
+
var _b, _c, _d, _e;
|
|
12049
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _f = _a.withProgressBar, withProgressBar = _f === void 0 ? true : _f, hasAudioControl = _a.hasAudioControl, muted = _a.muted, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl", "muted"]);
|
|
12050
|
+
var videoRef = React$2.useRef(null);
|
|
12051
|
+
var _g = React$2.useState(true), isLoading = _g[0], setIsLoading = _g[1];
|
|
12052
|
+
var _h = React$2.useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
|
|
12053
|
+
var _j = React$2.useState(muted), isMuted = _j[0], setIsMuted = _j[1];
|
|
12054
|
+
var _k = React$2.useState(0), videoProgress = _k[0], setVideoProgress = _k[1];
|
|
12055
|
+
var _l = React$2.useState(false), debouncePlay = _l[0], setDebouncePlay = _l[1];
|
|
12056
|
+
var isStarted = videoProgress > 0;
|
|
12057
|
+
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
12058
|
+
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
12059
|
+
var handlePlayClick = function () {
|
|
12060
|
+
if (videoRef.current && !debouncePlay) {
|
|
12061
|
+
setDebouncePlay(true);
|
|
12062
|
+
videoRef.current
|
|
12063
|
+
.play()
|
|
12064
|
+
.then(function () {
|
|
12065
|
+
setIsPlaying(true);
|
|
12066
|
+
setDebouncePlay(false);
|
|
12067
|
+
})
|
|
12068
|
+
.catch(function (error) {
|
|
12069
|
+
console.error('Error playing video:', error);
|
|
12070
|
+
setDebouncePlay(false);
|
|
12071
|
+
});
|
|
12072
|
+
}
|
|
12073
|
+
};
|
|
12074
|
+
var handlePauseClick = function () {
|
|
12075
|
+
if (videoRef.current && isPlaying) {
|
|
12076
|
+
videoRef.current.pause();
|
|
12077
|
+
setIsPlaying(false);
|
|
12078
|
+
}
|
|
12079
|
+
};
|
|
12080
|
+
var handleMuteToggle = function () {
|
|
12081
|
+
if (videoRef.current) {
|
|
12082
|
+
videoRef.current.muted = !videoRef.current.muted;
|
|
12083
|
+
setIsMuted(function (prevState) { return !prevState; });
|
|
12084
|
+
}
|
|
12085
|
+
};
|
|
12086
|
+
var onTimeUpdate = function () {
|
|
12087
|
+
if (videoRef.current) {
|
|
12088
|
+
setVideoProgress(videoRef.current.currentTime);
|
|
12089
|
+
}
|
|
12090
|
+
};
|
|
12091
|
+
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));
|
|
12092
|
+
};
|
|
12093
|
+
|
|
12016
12094
|
var propTypes = {exports: {}};
|
|
12017
12095
|
|
|
12018
12096
|
var reactIs = {exports: {}};
|
|
@@ -13604,102 +13682,46 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13604
13682
|
afterZoomOut: PropTypes.func
|
|
13605
13683
|
} : {};
|
|
13606
13684
|
|
|
13607
|
-
var
|
|
13608
|
-
var ProgressFiller = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
13609
|
-
var templateObject_1$15, templateObject_2$O;
|
|
13610
|
-
|
|
13611
|
-
var ProgressBar$1 = function (_a) {
|
|
13612
|
-
var progress = _a.progress, hide = _a.hide;
|
|
13613
|
-
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13614
|
-
};
|
|
13615
|
-
|
|
13616
|
-
var Container$P = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13617
|
-
var HTMLVideo = newStyled.video(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
13618
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
13619
|
-
var PlayContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13620
|
-
var PauseContainer = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
13621
|
-
var MuteButton = newStyled.button(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
13622
|
-
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$j;
|
|
13623
|
-
|
|
13624
|
-
var Video$1 = function (_a) {
|
|
13625
|
-
var _b, _c, _d, _e;
|
|
13626
|
-
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _f = _a.withProgressBar, withProgressBar = _f === void 0 ? true : _f, hasAudioControl = _a.hasAudioControl, muted = _a.muted, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl", "muted"]);
|
|
13627
|
-
var videoRef = React$2.useRef(null);
|
|
13628
|
-
var _g = React$2.useState(true), isLoading = _g[0], setIsLoading = _g[1];
|
|
13629
|
-
var _h = React$2.useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
|
|
13630
|
-
var _j = React$2.useState(muted), isMuted = _j[0], setIsMuted = _j[1];
|
|
13631
|
-
var _k = React$2.useState(0), videoProgress = _k[0], setVideoProgress = _k[1];
|
|
13632
|
-
var _l = React$2.useState(false), debouncePlay = _l[0], setDebouncePlay = _l[1];
|
|
13633
|
-
var isStarted = videoProgress > 0;
|
|
13634
|
-
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
13635
|
-
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
13636
|
-
var handlePlayClick = function () {
|
|
13637
|
-
if (videoRef.current && !debouncePlay) {
|
|
13638
|
-
setDebouncePlay(true);
|
|
13639
|
-
videoRef.current
|
|
13640
|
-
.play()
|
|
13641
|
-
.then(function () {
|
|
13642
|
-
setIsPlaying(true);
|
|
13643
|
-
setDebouncePlay(false);
|
|
13644
|
-
})
|
|
13645
|
-
.catch(function (error) {
|
|
13646
|
-
console.error('Error playing video:', error);
|
|
13647
|
-
setDebouncePlay(false);
|
|
13648
|
-
});
|
|
13649
|
-
}
|
|
13650
|
-
};
|
|
13651
|
-
var handlePauseClick = function () {
|
|
13652
|
-
if (videoRef.current && isPlaying) {
|
|
13653
|
-
videoRef.current.pause();
|
|
13654
|
-
setIsPlaying(false);
|
|
13655
|
-
}
|
|
13656
|
-
};
|
|
13657
|
-
var handleMuteToggle = function () {
|
|
13658
|
-
if (videoRef.current) {
|
|
13659
|
-
videoRef.current.muted = !videoRef.current.muted;
|
|
13660
|
-
setIsMuted(function (prevState) { return !prevState; });
|
|
13661
|
-
}
|
|
13662
|
-
};
|
|
13663
|
-
var onTimeUpdate = function () {
|
|
13664
|
-
if (videoRef.current) {
|
|
13665
|
-
setVideoProgress(videoRef.current.currentTime);
|
|
13666
|
-
}
|
|
13667
|
-
};
|
|
13668
|
-
return (jsxRuntime.jsxs(Container$P, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxRuntime.jsxs(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsxRuntime.jsx(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({}, rest, { muted: true, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13669
|
-
};
|
|
13670
|
-
|
|
13671
|
-
var Container$O = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
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
|
|
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 ImageStyled = newStyled(Image$3)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13703
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13704
|
+
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13705
|
+
});
|
|
13706
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13707
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13708
|
+
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13709
|
+
});
|
|
13710
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$g;
|
|
13689
13711
|
|
|
13690
13712
|
var ImageProductSlide$1 = function (_a) {
|
|
13691
13713
|
var _b;
|
|
13692
|
-
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom;
|
|
13714
|
+
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom, isRatioSquare = _a.isRatioSquare;
|
|
13693
13715
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13694
13716
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13695
|
-
return (jsxRuntime.jsxs(Container$O, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [withZoom ? (jsxRuntime.jsx(
|
|
13717
|
+
return (jsxRuntime.jsxs(Container$O, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [withZoom ? (jsxRuntime.jsx(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13696
13718
|
alt: content.alt,
|
|
13697
13719
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13698
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsxRuntime.jsx(
|
|
13720
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsxRuntime.jsx(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", isRatioSquare: isRatioSquare }, 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
13721
|
};
|
|
13700
13722
|
|
|
13701
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
13702
|
-
var templateObject_1$
|
|
13723
|
+
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"])));
|
|
13724
|
+
var templateObject_1$13;
|
|
13703
13725
|
|
|
13704
13726
|
var getInitialIndex = function (images, selectedValue) {
|
|
13705
13727
|
if (selectedValue) {
|
|
@@ -13725,7 +13747,7 @@ var ProductGallery = function (_a) {
|
|
|
13725
13747
|
setActiveIndex(index);
|
|
13726
13748
|
};
|
|
13727
13749
|
var selectedImage = images[activeIndex];
|
|
13728
|
-
return (jsxRuntime.jsxs(Container$N, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, void 0), jsxRuntime.jsx(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
|
|
13750
|
+
return (jsxRuntime.jsxs(Container$N, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, void 0), jsxRuntime.jsx(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }, void 0));
|
|
13729
13751
|
};
|
|
13730
13752
|
|
|
13731
13753
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13747,7 +13769,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13747
13769
|
};
|
|
13748
13770
|
}
|
|
13749
13771
|
};
|
|
13750
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
13772
|
+
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
13773
|
var backgroundColor = _a.backgroundColor;
|
|
13752
13774
|
return backgroundColor;
|
|
13753
13775
|
}, function (_a) {
|
|
@@ -13777,9 +13799,9 @@ var IconButton = function (_a) {
|
|
|
13777
13799
|
var theme = useTheme();
|
|
13778
13800
|
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
13801
|
};
|
|
13780
|
-
var templateObject_1$
|
|
13802
|
+
var templateObject_1$12;
|
|
13781
13803
|
|
|
13782
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13804
|
+
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
13805
|
var AmazonButton = function (_a) {
|
|
13784
13806
|
var onClick = _a.onClick;
|
|
13785
13807
|
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 +13810,7 @@ var PaypalButton = function (_a) {
|
|
|
13788
13810
|
var onClick = _a.onClick;
|
|
13789
13811
|
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
13812
|
};
|
|
13791
|
-
var templateObject_1$
|
|
13813
|
+
var templateObject_1$11;
|
|
13792
13814
|
|
|
13793
13815
|
var Container$L = newStyled.div(function (props) { return ({
|
|
13794
13816
|
height: 'auto',
|
|
@@ -13843,9 +13865,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13843
13865
|
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
13866
|
};
|
|
13845
13867
|
|
|
13846
|
-
var Container$K = newStyled.div(templateObject_1
|
|
13847
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13848
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13868
|
+
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'); });
|
|
13869
|
+
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'); });
|
|
13870
|
+
var StyledTitle = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13849
13871
|
var titlePosition = _a.titlePosition;
|
|
13850
13872
|
return titlePosition == 'center' &&
|
|
13851
13873
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13855,13 +13877,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13855
13877
|
var isMobile = useWindowDimensions().isMobile;
|
|
13856
13878
|
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
13879
|
};
|
|
13858
|
-
var templateObject_1
|
|
13880
|
+
var templateObject_1$10, templateObject_2$M, templateObject_3$D;
|
|
13859
13881
|
|
|
13860
|
-
var Label$3 = newStyled.span(templateObject_1
|
|
13882
|
+
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
13883
|
var color = _a.color;
|
|
13862
13884
|
return color;
|
|
13863
13885
|
});
|
|
13864
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13886
|
+
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
13887
|
var color = _a.color;
|
|
13866
13888
|
return color;
|
|
13867
13889
|
});
|
|
@@ -13870,7 +13892,7 @@ var InputLabel = function (_a) {
|
|
|
13870
13892
|
var theme = useTheme();
|
|
13871
13893
|
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
13894
|
};
|
|
13873
|
-
var templateObject_1
|
|
13895
|
+
var templateObject_1$$, templateObject_2$L;
|
|
13874
13896
|
|
|
13875
13897
|
var containerByStatus = function (theme, status) {
|
|
13876
13898
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13879,12 +13901,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13879
13901
|
return theme.colors.semantic.urgent.color;
|
|
13880
13902
|
return '';
|
|
13881
13903
|
};
|
|
13882
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13904
|
+
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
13905
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13884
13906
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13885
13907
|
});
|
|
13886
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13887
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13908
|
+
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"])));
|
|
13909
|
+
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
13910
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13889
13911
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13890
13912
|
}, function (_a) {
|
|
@@ -13939,11 +13961,11 @@ var StyledInput = newStyled.input(templateObject_3$B || (templateObject_3$B = __
|
|
|
13939
13961
|
return hasValue &&
|
|
13940
13962
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13941
13963
|
});
|
|
13942
|
-
var InputWrapper$1 = newStyled.div(templateObject_4$
|
|
13964
|
+
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
13965
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13944
13966
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13945
13967
|
});
|
|
13946
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13968
|
+
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
13969
|
var theme = _a.theme;
|
|
13948
13970
|
return theme.component.input.placeholderColor;
|
|
13949
13971
|
}, function (_a) {
|
|
@@ -13956,8 +13978,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$k || (templateObject_5
|
|
|
13956
13978
|
var theme = _a.theme;
|
|
13957
13979
|
return theme.component.input.lineHeight;
|
|
13958
13980
|
});
|
|
13959
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13960
|
-
var templateObject_1$
|
|
13981
|
+
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"])));
|
|
13982
|
+
var templateObject_1$_, templateObject_2$K, templateObject_3$C, templateObject_4$s, templateObject_5$l, templateObject_6$j;
|
|
13961
13983
|
|
|
13962
13984
|
var BaseInput = function (_a) {
|
|
13963
13985
|
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"]);
|
|
@@ -14001,11 +14023,11 @@ var Button$5 = function (_a) {
|
|
|
14001
14023
|
throw new Error("Invalid button variant ".concat(variant));
|
|
14002
14024
|
};
|
|
14003
14025
|
|
|
14004
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
14026
|
+
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
14027
|
var theme = _a.theme;
|
|
14006
14028
|
return theme.component.inputCustom.input.borderRadius;
|
|
14007
14029
|
});
|
|
14008
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14030
|
+
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
14031
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
14010
14032
|
return defaultRounded
|
|
14011
14033
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -14022,21 +14044,21 @@ var Custom = function (_a) {
|
|
|
14022
14044
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
14023
14045
|
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
14046
|
};
|
|
14025
|
-
var templateObject_1$
|
|
14047
|
+
var templateObject_1$Z, templateObject_2$J;
|
|
14026
14048
|
|
|
14027
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14049
|
+
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
14050
|
var size = _a.size;
|
|
14029
14051
|
return (size === 'small' ? '36px' : '');
|
|
14030
14052
|
});
|
|
14031
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14032
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14053
|
+
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"])));
|
|
14054
|
+
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
14055
|
var Success = function (_a) {
|
|
14034
14056
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14035
14057
|
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
14058
|
};
|
|
14037
|
-
var templateObject_1$
|
|
14059
|
+
var templateObject_1$Y, templateObject_2$I, templateObject_3$B;
|
|
14038
14060
|
|
|
14039
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14061
|
+
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
14062
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14041
14063
|
return status === exports.InputValidationType.Empty &&
|
|
14042
14064
|
type === 'primary' &&
|
|
@@ -14053,16 +14075,16 @@ var BasePlusButton = function (_a) {
|
|
|
14053
14075
|
}
|
|
14054
14076
|
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
14077
|
};
|
|
14056
|
-
var templateObject_1$
|
|
14078
|
+
var templateObject_1$X;
|
|
14057
14079
|
|
|
14058
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14059
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14080
|
+
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"])));
|
|
14081
|
+
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
14082
|
var BasePlusIcon = function (_a) {
|
|
14061
14083
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14062
14084
|
var theme = useTheme();
|
|
14063
14085
|
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
14086
|
};
|
|
14065
|
-
var templateObject_1$
|
|
14087
|
+
var templateObject_1$W, templateObject_2$H;
|
|
14066
14088
|
|
|
14067
14089
|
var Input$3 = {
|
|
14068
14090
|
Simple: BaseInput,
|
|
@@ -14107,7 +14129,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14107
14129
|
}, [preventTouch, ref, touchStart]);
|
|
14108
14130
|
}
|
|
14109
14131
|
|
|
14110
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14132
|
+
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
14133
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14112
14134
|
return borderRadiusVariant &&
|
|
14113
14135
|
"\n border-radius: 40px;\n ";
|
|
@@ -14116,11 +14138,11 @@ var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __ma
|
|
|
14116
14138
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14117
14139
|
});
|
|
14118
14140
|
// 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$
|
|
14141
|
+
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'); });
|
|
14142
|
+
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"])));
|
|
14143
|
+
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"])));
|
|
14144
|
+
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"])));
|
|
14145
|
+
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
14146
|
var settings$1 = {
|
|
14125
14147
|
dots: true,
|
|
14126
14148
|
infinite: false,
|
|
@@ -14179,16 +14201,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14179
14201
|
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
14202
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14181
14203
|
};
|
|
14182
|
-
var templateObject_1$
|
|
14204
|
+
var templateObject_1$V, templateObject_2$G, templateObject_3$A, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
14183
14205
|
|
|
14184
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14206
|
+
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
14207
|
var ProductGalleryMobile = function (_a) {
|
|
14186
14208
|
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
14209
|
var _d = React$2.useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14188
14210
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14189
14211
|
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
14212
|
};
|
|
14191
|
-
var templateObject_1$
|
|
14213
|
+
var templateObject_1$U;
|
|
14192
14214
|
|
|
14193
14215
|
function _extends() {
|
|
14194
14216
|
_extends = Object.assign || function (target) {
|
|
@@ -14455,14 +14477,14 @@ function useSwipeable(options) {
|
|
|
14455
14477
|
return handlers;
|
|
14456
14478
|
}
|
|
14457
14479
|
|
|
14458
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14480
|
+
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
14481
|
var ArrowButton = function (_a) {
|
|
14460
14482
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14461
14483
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14462
14484
|
};
|
|
14463
|
-
var templateObject_1$
|
|
14485
|
+
var templateObject_1$T;
|
|
14464
14486
|
|
|
14465
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14487
|
+
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
14488
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14467
14489
|
var SlideDots = function (_a) {
|
|
14468
14490
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14471,11 +14493,11 @@ var SlideDots = function (_a) {
|
|
|
14471
14493
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14472
14494
|
: 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
14495
|
};
|
|
14474
|
-
var templateObject_1$
|
|
14496
|
+
var templateObject_1$S;
|
|
14475
14497
|
|
|
14476
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14477
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14478
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14498
|
+
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"])));
|
|
14499
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14500
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14479
14501
|
var SlideNavigation = function (_a) {
|
|
14480
14502
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14481
14503
|
var theme = useTheme();
|
|
@@ -14487,23 +14509,23 @@ var SlideNavigation = function (_a) {
|
|
|
14487
14509
|
onNavigate(selectedIndex + 1);
|
|
14488
14510
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14489
14511
|
};
|
|
14490
|
-
var templateObject_1$
|
|
14512
|
+
var templateObject_1$R, templateObject_2$F, templateObject_3$z;
|
|
14491
14513
|
|
|
14492
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14514
|
+
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
14515
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14494
14516
|
return borderRadiusVariant &&
|
|
14495
14517
|
"\n border-radius: 40px;\n ";
|
|
14496
14518
|
});
|
|
14497
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14498
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14519
|
+
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'); });
|
|
14520
|
+
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
14521
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14500
14522
|
var _b, _c;
|
|
14501
14523
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14502
14524
|
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
14525
|
});
|
|
14504
|
-
var templateObject_1$
|
|
14526
|
+
var templateObject_1$Q, templateObject_2$E, templateObject_3$y;
|
|
14505
14527
|
|
|
14506
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14528
|
+
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
14529
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14508
14530
|
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
14531
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14527,9 +14549,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14527
14549
|
}, [index, images]);
|
|
14528
14550
|
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
14551
|
};
|
|
14530
|
-
var templateObject_1$
|
|
14552
|
+
var templateObject_1$P;
|
|
14531
14553
|
|
|
14532
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
14554
|
+
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
14555
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14534
14556
|
return borderRadiusVariant &&
|
|
14535
14557
|
"\n border-radius: 40px;\n ";
|
|
@@ -14538,11 +14560,11 @@ var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __ma
|
|
|
14538
14560
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14539
14561
|
});
|
|
14540
14562
|
// 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$
|
|
14563
|
+
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'); });
|
|
14564
|
+
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"])));
|
|
14565
|
+
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"])));
|
|
14566
|
+
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"])));
|
|
14567
|
+
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
14568
|
var Text$2 = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14547
14569
|
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
14570
|
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 +14625,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14603
14625
|
} }, 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
14626
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14605
14627
|
};
|
|
14606
|
-
var templateObject_1$
|
|
14628
|
+
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
14629
|
|
|
14608
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
14630
|
+
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
14631
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14610
14632
|
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
14633
|
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
14634
|
};
|
|
14613
|
-
var templateObject_1$
|
|
14635
|
+
var templateObject_1$N;
|
|
14614
14636
|
|
|
14615
14637
|
var __defProp$1 = Object.defineProperty;
|
|
14616
14638
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14743,17 +14765,17 @@ var Portal = function (_a) {
|
|
|
14743
14765
|
var visibleStyle = function (_a) {
|
|
14744
14766
|
var opened = _a.opened;
|
|
14745
14767
|
return opened
|
|
14746
|
-
? css(templateObject_1$
|
|
14768
|
+
? 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
14769
|
};
|
|
14748
14770
|
var transformStyle = function (_a) {
|
|
14749
14771
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14750
14772
|
return opened
|
|
14751
|
-
? css(templateObject_3$
|
|
14773
|
+
? 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
14774
|
};
|
|
14753
|
-
var Container$z = newStyled.div(templateObject_6$
|
|
14775
|
+
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
14776
|
var width = _a.width;
|
|
14755
14777
|
return width
|
|
14756
|
-
? css(templateObject_5$
|
|
14778
|
+
? css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14757
14779
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14758
14780
|
});
|
|
14759
14781
|
}, visibleStyle, transformStyle);
|
|
@@ -14798,9 +14820,9 @@ var useModal = function (id) {
|
|
|
14798
14820
|
close: close,
|
|
14799
14821
|
}); }, [close, open, opened]);
|
|
14800
14822
|
};
|
|
14801
|
-
var templateObject_1$
|
|
14823
|
+
var templateObject_1$M, templateObject_2$C, templateObject_3$w, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$e;
|
|
14802
14824
|
|
|
14803
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14825
|
+
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
14826
|
var height = _a.height;
|
|
14805
14827
|
return height || '0.5rem';
|
|
14806
14828
|
}, function (_a) {
|
|
@@ -14872,19 +14894,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14872
14894
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14873
14895
|
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
14896
|
};
|
|
14875
|
-
var templateObject_1$
|
|
14897
|
+
var templateObject_1$L;
|
|
14876
14898
|
|
|
14877
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14899
|
+
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
14900
|
var theme = _a.theme;
|
|
14879
14901
|
return theme.component.orderBar.backgroundColor;
|
|
14880
14902
|
});
|
|
14881
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14903
|
+
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
14904
|
var OrderBar = function (_a) {
|
|
14883
14905
|
var message = _a.message, color = _a.color;
|
|
14884
14906
|
var theme = useTheme();
|
|
14885
14907
|
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
14908
|
};
|
|
14887
|
-
var templateObject_1$
|
|
14909
|
+
var templateObject_1$K, templateObject_2$B;
|
|
14888
14910
|
|
|
14889
14911
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14890
14912
|
background: props.bgColor,
|
|
@@ -14908,15 +14930,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14908
14930
|
justifyContent: 'center',
|
|
14909
14931
|
gap: '10px',
|
|
14910
14932
|
});
|
|
14911
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14933
|
+
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
14934
|
var bgColor = _a.bgColor;
|
|
14913
14935
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14914
14936
|
}, function (_a) {
|
|
14915
14937
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14916
14938
|
return width;
|
|
14917
14939
|
});
|
|
14918
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14919
|
-
var templateObject_1$
|
|
14940
|
+
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"])));
|
|
14941
|
+
var templateObject_1$J, templateObject_2$A;
|
|
14920
14942
|
|
|
14921
14943
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14922
14944
|
var background = _a.background, width = _a.width;
|
|
@@ -18736,12 +18758,12 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18736
18758
|
HTMLReactParser$1.attributesToProps;
|
|
18737
18759
|
HTMLReactParser$1.Element;
|
|
18738
18760
|
|
|
18739
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18740
|
-
var Card$1 = 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$
|
|
18761
|
+
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"])));
|
|
18762
|
+
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"])));
|
|
18763
|
+
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"])));
|
|
18764
|
+
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"])));
|
|
18765
|
+
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"])));
|
|
18766
|
+
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
18767
|
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
18768
|
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
18769
|
var PackSelector = function (_a) {
|
|
@@ -18773,14 +18795,14 @@ var PackCard = function (_a) {
|
|
|
18773
18795
|
currency: currencyCode || 'USD',
|
|
18774
18796
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18775
18797
|
};
|
|
18776
|
-
var templateObject_1$
|
|
18798
|
+
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
18799
|
|
|
18778
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18779
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18780
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18800
|
+
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"])));
|
|
18801
|
+
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"])));
|
|
18802
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18781
18803
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18782
18804
|
}));
|
|
18783
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18805
|
+
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
18806
|
var bold = _a.bold;
|
|
18785
18807
|
return (bold ? '700' : '500');
|
|
18786
18808
|
}, function (_a) {
|
|
@@ -18797,7 +18819,7 @@ var PageNumber = newStyled.span(templateObject_4$m || (templateObject_4$m = __ma
|
|
|
18797
18819
|
var background = _a.background;
|
|
18798
18820
|
return background || 'unset';
|
|
18799
18821
|
});
|
|
18800
|
-
var templateObject_1$
|
|
18822
|
+
var templateObject_1$H, templateObject_2$y, templateObject_3$u, templateObject_4$n;
|
|
18801
18823
|
|
|
18802
18824
|
var Pagination = function (_a) {
|
|
18803
18825
|
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 +18884,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18862
18884
|
: 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
18885
|
};
|
|
18864
18886
|
|
|
18865
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
18887
|
+
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
18888
|
var width = _a.width;
|
|
18867
18889
|
return width;
|
|
18868
18890
|
}, function (_a) {
|
|
@@ -18880,12 +18902,12 @@ var PaymentMethod = function (_a) {
|
|
|
18880
18902
|
var theme = useTheme();
|
|
18881
18903
|
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
18904
|
};
|
|
18883
|
-
var templateObject_1$
|
|
18905
|
+
var templateObject_1$G;
|
|
18884
18906
|
|
|
18885
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
18907
|
+
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
18908
|
var IMAGE_WIDTH = '63px';
|
|
18887
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18888
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18909
|
+
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);
|
|
18910
|
+
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
18911
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18890
18912
|
}), IMAGE_WIDTH);
|
|
18891
18913
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18908,7 +18930,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18908
18930
|
margin: margin,
|
|
18909
18931
|
});
|
|
18910
18932
|
});
|
|
18911
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18933
|
+
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
18934
|
var withTag = _a.withTag; _a.theme;
|
|
18913
18935
|
return withTag
|
|
18914
18936
|
? mediaQueries({
|
|
@@ -18917,15 +18939,15 @@ var PriceContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = _
|
|
|
18917
18939
|
})
|
|
18918
18940
|
: 'justify-content: end';
|
|
18919
18941
|
});
|
|
18920
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18921
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18942
|
+
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"])));
|
|
18943
|
+
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
18944
|
var SimpleOrderItem = function (_a) {
|
|
18923
18945
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18924
18946
|
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
18947
|
var theme = useTheme();
|
|
18926
18948
|
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
18949
|
};
|
|
18928
|
-
var templateObject_1$
|
|
18950
|
+
var templateObject_1$F, templateObject_2$x, templateObject_3$t, templateObject_4$m, templateObject_5$g, templateObject_6$e;
|
|
18929
18951
|
|
|
18930
18952
|
var P$1 = newStyled.p(function (_a) {
|
|
18931
18953
|
var color = _a.color;
|
|
@@ -18939,7 +18961,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18939
18961
|
margin: '0.938rem 4.188rem',
|
|
18940
18962
|
});
|
|
18941
18963
|
});
|
|
18942
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18964
|
+
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
18965
|
var height = _a.height;
|
|
18944
18966
|
return height || '0.5rem';
|
|
18945
18967
|
}, function (_a) {
|
|
@@ -18984,12 +19006,12 @@ var ProgressBar = function (_a) {
|
|
|
18984
19006
|
var theme = useTheme();
|
|
18985
19007
|
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
19008
|
};
|
|
18987
|
-
var templateObject_1$
|
|
19009
|
+
var templateObject_1$E;
|
|
18988
19010
|
|
|
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$
|
|
19011
|
+
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; });
|
|
19012
|
+
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"])));
|
|
19013
|
+
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"])));
|
|
19014
|
+
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
19015
|
var QuantityPicker = function (_a) {
|
|
18994
19016
|
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
19017
|
var theme = useTheme();
|
|
@@ -19014,7 +19036,7 @@ var QuantityPicker = function (_a) {
|
|
|
19014
19036
|
}, [value, clamp]);
|
|
19015
19037
|
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
19038
|
};
|
|
19017
|
-
var templateObject_1$
|
|
19039
|
+
var templateObject_1$D, templateObject_2$w, templateObject_3$s, templateObject_4$l;
|
|
19018
19040
|
|
|
19019
19041
|
/* base styles & size variants */
|
|
19020
19042
|
var CustomRadioStyles$1 = {
|
|
@@ -19083,9 +19105,9 @@ var ContainerStyles$1 = {
|
|
|
19083
19105
|
},
|
|
19084
19106
|
};
|
|
19085
19107
|
|
|
19086
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19108
|
+
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
19109
|
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$
|
|
19110
|
+
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
19111
|
var disabled = _a.disabled;
|
|
19090
19112
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19091
19113
|
});
|
|
@@ -19093,7 +19115,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19093
19115
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19094
19116
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19095
19117
|
]; });
|
|
19096
|
-
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$
|
|
19118
|
+
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
19119
|
var RadioPrimary = function (_a) {
|
|
19098
19120
|
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
19121
|
var theme = useTheme();
|
|
@@ -19103,7 +19125,7 @@ var RadioPrimary = function (_a) {
|
|
|
19103
19125
|
};
|
|
19104
19126
|
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
19127
|
};
|
|
19106
|
-
var templateObject_1$
|
|
19128
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$r;
|
|
19107
19129
|
|
|
19108
19130
|
var RadioGroupInput = function (_a) {
|
|
19109
19131
|
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 +19204,9 @@ var ContainerStyles = {
|
|
|
19182
19204
|
},
|
|
19183
19205
|
};
|
|
19184
19206
|
|
|
19185
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19207
|
+
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
19208
|
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$
|
|
19209
|
+
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
19210
|
var disabled = _a.disabled;
|
|
19189
19211
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19190
19212
|
});
|
|
@@ -19192,7 +19214,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19192
19214
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19193
19215
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19194
19216
|
]; });
|
|
19195
|
-
var StyledLabel = newStyled(Label$5)(templateObject_3$
|
|
19217
|
+
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
19218
|
var theme = _a.theme;
|
|
19197
19219
|
return theme.component.radio.textSize;
|
|
19198
19220
|
}, function (_a) {
|
|
@@ -19208,7 +19230,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19208
19230
|
};
|
|
19209
19231
|
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
19232
|
};
|
|
19211
|
-
var templateObject_1$
|
|
19233
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$q;
|
|
19212
19234
|
|
|
19213
19235
|
var ClubRadioGroupInput = function (_a) {
|
|
19214
19236
|
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 +19258,12 @@ function formatDate(date, format) {
|
|
|
19236
19258
|
}
|
|
19237
19259
|
}
|
|
19238
19260
|
|
|
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$
|
|
19261
|
+
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"])));
|
|
19262
|
+
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"])));
|
|
19263
|
+
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"])));
|
|
19264
|
+
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"])));
|
|
19265
|
+
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"])));
|
|
19266
|
+
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
19267
|
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
19268
|
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
19269
|
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 +19299,16 @@ var Review$1 = function (_a) {
|
|
|
19277
19299
|
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
19300
|
(!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
19301
|
};
|
|
19280
|
-
var templateObject_1$
|
|
19302
|
+
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
19303
|
|
|
19282
19304
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19283
19305
|
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$
|
|
19306
|
+
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"])));
|
|
19307
|
+
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"])));
|
|
19308
|
+
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"])));
|
|
19309
|
+
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"])));
|
|
19310
|
+
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"])));
|
|
19311
|
+
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
19312
|
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
19313
|
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
19314
|
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 +19355,14 @@ var Review = function (_a) {
|
|
|
19333
19355
|
: description,
|
|
19334
19356
|
} }, 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
19357
|
};
|
|
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$
|
|
19358
|
+
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;
|
|
19359
|
+
|
|
19360
|
+
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"])));
|
|
19361
|
+
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"])));
|
|
19362
|
+
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"])));
|
|
19363
|
+
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"])));
|
|
19364
|
+
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"])));
|
|
19365
|
+
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
19366
|
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
19367
|
var backgroundUrl = _a.backgroundUrl;
|
|
19346
19368
|
return "url(".concat(backgroundUrl, ")");
|
|
@@ -19351,17 +19373,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19351
19373
|
var theme = useTheme();
|
|
19352
19374
|
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
19375
|
};
|
|
19354
|
-
var templateObject_1$
|
|
19376
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$n, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$a;
|
|
19355
19377
|
|
|
19356
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19357
|
-
var Text = newStyled.p(templateObject_2$
|
|
19378
|
+
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"])));
|
|
19379
|
+
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
19380
|
var ScrollToTop = function (_a) {
|
|
19359
19381
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19360
19382
|
var theme = useTheme();
|
|
19361
19383
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19362
19384
|
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
19385
|
};
|
|
19364
|
-
var templateObject_1$
|
|
19386
|
+
var templateObject_1$x, templateObject_2$q;
|
|
19365
19387
|
|
|
19366
19388
|
var Input = newStyled.input(function (props) { return ({
|
|
19367
19389
|
padding: props.theme.component.input.padding,
|
|
@@ -19392,7 +19414,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19392
19414
|
},
|
|
19393
19415
|
}); });
|
|
19394
19416
|
|
|
19395
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19417
|
+
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
19418
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19397
19419
|
}));
|
|
19398
19420
|
var Description = newStyled.div({
|
|
@@ -19411,7 +19433,7 @@ var ProductItem = function (_a) {
|
|
|
19411
19433
|
var theme = useTheme();
|
|
19412
19434
|
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
19435
|
};
|
|
19414
|
-
var templateObject_1$
|
|
19436
|
+
var templateObject_1$w;
|
|
19415
19437
|
|
|
19416
19438
|
var Container$j = newStyled.div({
|
|
19417
19439
|
display: 'flex',
|
|
@@ -19427,7 +19449,7 @@ var Ul = newStyled.ul({
|
|
|
19427
19449
|
margin: '0px',
|
|
19428
19450
|
padding: '0px',
|
|
19429
19451
|
});
|
|
19430
|
-
var Li = newStyled.li(templateObject_1$
|
|
19452
|
+
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
19453
|
padding: [0, '0rem 1rem'],
|
|
19432
19454
|
borderRadius: [0, '0.5rem'],
|
|
19433
19455
|
}));
|
|
@@ -19439,12 +19461,12 @@ var Anchor = newStyled.a({
|
|
|
19439
19461
|
padding: 0,
|
|
19440
19462
|
textDecoration: 'none',
|
|
19441
19463
|
});
|
|
19442
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19464
|
+
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
19465
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19444
19466
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19445
19467
|
borderRadius: ['0', '0.5rem'],
|
|
19446
19468
|
}));
|
|
19447
|
-
var Header = newStyled.div(templateObject_3$
|
|
19469
|
+
var Header = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19448
19470
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19449
19471
|
}));
|
|
19450
19472
|
var ResultsPanel = function (_a) {
|
|
@@ -19452,9 +19474,9 @@ var ResultsPanel = function (_a) {
|
|
|
19452
19474
|
var theme = useTheme();
|
|
19453
19475
|
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
19476
|
};
|
|
19455
|
-
var templateObject_1$
|
|
19477
|
+
var templateObject_1$v, templateObject_2$p, templateObject_3$m;
|
|
19456
19478
|
|
|
19457
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19479
|
+
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
19480
|
right: ['1rem', '7.75rem'],
|
|
19459
19481
|
top: ['0.75rem', '0.75rem'],
|
|
19460
19482
|
}));
|
|
@@ -19463,7 +19485,7 @@ var ClearButton = function (_a) {
|
|
|
19463
19485
|
var theme = useTheme();
|
|
19464
19486
|
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
19487
|
};
|
|
19466
|
-
var templateObject_1$
|
|
19488
|
+
var templateObject_1$u;
|
|
19467
19489
|
|
|
19468
19490
|
var SearchIconContainer = newStyled.div({
|
|
19469
19491
|
display: 'flex',
|
|
@@ -19473,7 +19495,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19473
19495
|
background: 'white',
|
|
19474
19496
|
alignSelf: 'center',
|
|
19475
19497
|
});
|
|
19476
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19498
|
+
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
19499
|
var SearchControl = function (_a) {
|
|
19478
19500
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19479
19501
|
var theme = useTheme();
|
|
@@ -19489,7 +19511,7 @@ var SearchControl = function (_a) {
|
|
|
19489
19511
|
}
|
|
19490
19512
|
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
19513
|
};
|
|
19492
|
-
var templateObject_1$
|
|
19514
|
+
var templateObject_1$t;
|
|
19493
19515
|
|
|
19494
19516
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19495
19517
|
var reducer = function (state, action) {
|
|
@@ -19556,20 +19578,20 @@ var SearchBar = function (_a) {
|
|
|
19556
19578
|
} }, 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
19579
|
};
|
|
19558
19580
|
|
|
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$
|
|
19581
|
+
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"])));
|
|
19582
|
+
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"])));
|
|
19583
|
+
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"])));
|
|
19584
|
+
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"])));
|
|
19585
|
+
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
19586
|
var SearchNavigation = function (_a) {
|
|
19565
19587
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19566
19588
|
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
19589
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, step)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19568
19590
|
}) }, void 0)] }, void 0));
|
|
19569
19591
|
};
|
|
19570
|
-
var templateObject_1$
|
|
19592
|
+
var templateObject_1$s, templateObject_2$o, templateObject_3$l, templateObject_4$h, templateObject_5$c;
|
|
19571
19593
|
|
|
19572
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19594
|
+
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
19595
|
var alignCenter = _a.alignCenter;
|
|
19574
19596
|
return alignCenter &&
|
|
19575
19597
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19579,26 +19601,26 @@ var Container$f = newStyled.div(templateObject_1$q || (templateObject_1$q = __ma
|
|
|
19579
19601
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19580
19602
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19581
19603
|
});
|
|
19582
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19583
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19604
|
+
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"])));
|
|
19605
|
+
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
19606
|
var ShortBanner = function (_a) {
|
|
19585
19607
|
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
19608
|
var theme = useTheme();
|
|
19587
19609
|
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
19610
|
};
|
|
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$
|
|
19611
|
+
var templateObject_1$r, templateObject_2$n, templateObject_3$k;
|
|
19612
|
+
|
|
19613
|
+
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; });
|
|
19614
|
+
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; });
|
|
19615
|
+
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; });
|
|
19616
|
+
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"])));
|
|
19617
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19618
|
+
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
19619
|
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
19620
|
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
19621
|
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
19622
|
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$
|
|
19623
|
+
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
19624
|
|
|
19603
19625
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19604
19626
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19639,16 +19661,16 @@ var SizeChartTable = function (_a) {
|
|
|
19639
19661
|
}, 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
19662
|
};
|
|
19641
19663
|
|
|
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$
|
|
19664
|
+
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; });
|
|
19665
|
+
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; });
|
|
19666
|
+
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; });
|
|
19667
|
+
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
19668
|
var SizeTable = function (_a) {
|
|
19647
19669
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19648
19670
|
var theme = useTheme();
|
|
19649
19671
|
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
19672
|
};
|
|
19651
|
-
var templateObject_1$
|
|
19673
|
+
var templateObject_1$p, templateObject_2$l, templateObject_3$i, templateObject_4$f;
|
|
19652
19674
|
|
|
19653
19675
|
var getStylesBySize$7 = function (size) {
|
|
19654
19676
|
switch (size) {
|
|
@@ -19675,7 +19697,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19675
19697
|
} });
|
|
19676
19698
|
};
|
|
19677
19699
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19678
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19700
|
+
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
19701
|
};
|
|
19680
19702
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19681
19703
|
if (disabled)
|
|
@@ -19691,23 +19713,23 @@ var TextButton = function (_a) {
|
|
|
19691
19713
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19692
19714
|
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
19715
|
};
|
|
19694
|
-
var templateObject_1$
|
|
19716
|
+
var templateObject_1$o;
|
|
19695
19717
|
|
|
19696
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19697
|
-
var P = newStyled.p(templateObject_2$
|
|
19698
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19718
|
+
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"])));
|
|
19719
|
+
var P = newStyled.p(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19720
|
+
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
19721
|
var SizeFitGuide = function (_a) {
|
|
19700
19722
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19701
19723
|
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
19724
|
};
|
|
19703
|
-
var templateObject_1$
|
|
19725
|
+
var templateObject_1$n, templateObject_2$k, templateObject_3$h;
|
|
19704
19726
|
|
|
19705
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19727
|
+
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
19728
|
var inline = _a.inline;
|
|
19707
19729
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19708
19730
|
});
|
|
19709
|
-
var Row = newStyled.div(templateObject_2$
|
|
19710
|
-
var templateObject_1$
|
|
19731
|
+
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"])));
|
|
19732
|
+
var templateObject_1$m, templateObject_2$j;
|
|
19711
19733
|
|
|
19712
19734
|
var SizeSelector = function (_a) {
|
|
19713
19735
|
var _b;
|
|
@@ -19729,7 +19751,7 @@ var SizeSelector = function (_a) {
|
|
|
19729
19751
|
}) }), void 0)] }), void 0));
|
|
19730
19752
|
};
|
|
19731
19753
|
|
|
19732
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19754
|
+
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
19755
|
var titleSize = _a.titleSize;
|
|
19734
19756
|
return titleSize;
|
|
19735
19757
|
}, function (_a) {
|
|
@@ -19746,18 +19768,18 @@ var Tab = function (_a) {
|
|
|
19746
19768
|
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
19769
|
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
19770
|
};
|
|
19749
|
-
var templateObject_1$
|
|
19771
|
+
var templateObject_1$l;
|
|
19750
19772
|
|
|
19751
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19752
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19773
|
+
var Container$c = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19774
|
+
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
19775
|
var backgroundColor = _a.backgroundColor;
|
|
19754
19776
|
return backgroundColor;
|
|
19755
19777
|
}, function (_a) {
|
|
19756
19778
|
var borderColor = _a.borderColor;
|
|
19757
19779
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19758
19780
|
});
|
|
19759
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19760
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19781
|
+
var TabContent = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19782
|
+
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
19783
|
var Tabs = function (_a) {
|
|
19762
19784
|
var _b;
|
|
19763
19785
|
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 +19790,14 @@ var Tabs = function (_a) {
|
|
|
19768
19790
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19769
19791
|
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
19792
|
};
|
|
19771
|
-
var templateObject_1$
|
|
19793
|
+
var templateObject_1$k, templateObject_2$i, templateObject_3$g, templateObject_4$e;
|
|
19772
19794
|
|
|
19773
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19795
|
+
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
19796
|
var Tag = function (_a) {
|
|
19775
19797
|
var text = _a.text, className = _a.className;
|
|
19776
19798
|
return jsxRuntime.jsx(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19777
19799
|
};
|
|
19778
|
-
var templateObject_1$
|
|
19800
|
+
var templateObject_1$j;
|
|
19779
19801
|
|
|
19780
19802
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19781
19803
|
switch (size) {
|
|
@@ -19886,9 +19908,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19886
19908
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19887
19909
|
};
|
|
19888
19910
|
|
|
19889
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19890
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19891
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19911
|
+
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"])));
|
|
19912
|
+
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"])));
|
|
19913
|
+
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
19914
|
var ImageVideo = function (_a) {
|
|
19893
19915
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19894
19916
|
var video = React$2.useRef(null);
|
|
@@ -19908,12 +19930,12 @@ var ImageVideo = function (_a) {
|
|
|
19908
19930
|
height: '100%',
|
|
19909
19931
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19910
19932
|
};
|
|
19911
|
-
var templateObject_1$
|
|
19933
|
+
var templateObject_1$i, templateObject_2$h, templateObject_3$f;
|
|
19912
19934
|
|
|
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$
|
|
19935
|
+
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"])));
|
|
19936
|
+
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"])));
|
|
19937
|
+
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);
|
|
19938
|
+
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
19939
|
var TextWithImage = function (_a) {
|
|
19918
19940
|
var _b, _c, _d, _e;
|
|
19919
19941
|
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 +19965,25 @@ var TextWithImage = function (_a) {
|
|
|
19943
19965
|
},
|
|
19944
19966
|
} }, 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
19967
|
};
|
|
19946
|
-
var templateObject_1$
|
|
19968
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$e, templateObject_4$d;
|
|
19947
19969
|
|
|
19948
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19970
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19949
19971
|
var timerColor = _a.timerColor;
|
|
19950
19972
|
return timerColor || '';
|
|
19951
19973
|
});
|
|
19952
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19974
|
+
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
19975
|
var timerColor = _a.timerColor;
|
|
19954
19976
|
return timerColor || '';
|
|
19955
19977
|
});
|
|
19956
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19978
|
+
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
19979
|
var theme = _a.theme;
|
|
19958
19980
|
return theme.colors.shades.white.color;
|
|
19959
19981
|
}, function (_a) {
|
|
19960
19982
|
var theme = _a.theme;
|
|
19961
19983
|
return theme.colors.shades.white.color;
|
|
19962
19984
|
});
|
|
19963
|
-
var Unit = newStyled.p(templateObject_4$
|
|
19964
|
-
var templateObject_1$
|
|
19985
|
+
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"])));
|
|
19986
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$d, templateObject_4$c;
|
|
19965
19987
|
|
|
19966
19988
|
var HRS = 'HRS';
|
|
19967
19989
|
var MIN = 'MIN';
|
|
@@ -20002,9 +20024,9 @@ var Timer = function (_a) {
|
|
|
20002
20024
|
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
20025
|
};
|
|
20004
20026
|
|
|
20005
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
20006
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
20007
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20027
|
+
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"])));
|
|
20028
|
+
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; });
|
|
20029
|
+
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
20030
|
var theme = _a.theme;
|
|
20009
20031
|
return theme.component.total.basicTotal.currency.color;
|
|
20010
20032
|
}, function (_a) {
|
|
@@ -20017,21 +20039,21 @@ var Currency = newStyled.span(templateObject_3$b || (templateObject_3$b = __make
|
|
|
20017
20039
|
var theme = _a.theme;
|
|
20018
20040
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
20019
20041
|
});
|
|
20020
|
-
var Container$9 = newStyled.div(templateObject_4$
|
|
20042
|
+
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
20043
|
var highlightColor = _a.highlightColor;
|
|
20022
20044
|
return highlightColor;
|
|
20023
20045
|
});
|
|
20024
|
-
var TotalContainer = newStyled(Container$9)(templateObject_5$
|
|
20046
|
+
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
20047
|
var showTotalLabel = _a.showTotalLabel;
|
|
20026
20048
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20027
20049
|
});
|
|
20028
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20050
|
+
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
20051
|
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
20052
|
var theme = _a.theme;
|
|
20031
20053
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20032
20054
|
});
|
|
20033
20055
|
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$
|
|
20056
|
+
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
20057
|
|
|
20036
20058
|
var Total = function (_a) {
|
|
20037
20059
|
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 +20061,19 @@ var Total = function (_a) {
|
|
|
20039
20061
|
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
20062
|
};
|
|
20041
20063
|
|
|
20042
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20064
|
+
var Wrapper = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20043
20065
|
var color = _a.color;
|
|
20044
20066
|
return color;
|
|
20045
20067
|
});
|
|
20046
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20047
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20068
|
+
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"])));
|
|
20069
|
+
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
20070
|
var theme = _a.theme;
|
|
20049
20071
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20050
20072
|
}, function (_a) {
|
|
20051
20073
|
var theme = _a.theme;
|
|
20052
20074
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20053
20075
|
});
|
|
20054
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20076
|
+
var CouponItem = newStyled(Item)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20055
20077
|
var color = _a.color;
|
|
20056
20078
|
return color;
|
|
20057
20079
|
});
|
|
@@ -20064,13 +20086,60 @@ var Subtotal = function (_a) {
|
|
|
20064
20086
|
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
20087
|
})] }), void 0));
|
|
20066
20088
|
};
|
|
20067
|
-
var templateObject_1$
|
|
20089
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$b, templateObject_4$a;
|
|
20068
20090
|
|
|
20069
20091
|
var Totals = {
|
|
20070
20092
|
Total: Total,
|
|
20071
20093
|
Subtotal: Subtotal,
|
|
20072
20094
|
};
|
|
20073
20095
|
|
|
20096
|
+
var slideInAnimation = function (distanceFromTop) {
|
|
20097
|
+
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20098
|
+
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);
|
|
20099
|
+
};
|
|
20100
|
+
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20101
|
+
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20102
|
+
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);
|
|
20103
|
+
};
|
|
20104
|
+
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"])));
|
|
20105
|
+
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) {
|
|
20106
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20107
|
+
return distanceFromTop || '124px';
|
|
20108
|
+
}, function (_a) {
|
|
20109
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20110
|
+
return slideInAnimation(distanceFromTop);
|
|
20111
|
+
}, function (_a) {
|
|
20112
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20113
|
+
return distanceFromTop || '85px';
|
|
20114
|
+
}, function (_a) {
|
|
20115
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20116
|
+
return mobileSlideInAnimation(distanceFromTop);
|
|
20117
|
+
});
|
|
20118
|
+
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) {
|
|
20119
|
+
var severity = _a.severity;
|
|
20120
|
+
return severity === 'error' ? '#C64844' : '#292929';
|
|
20121
|
+
});
|
|
20122
|
+
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"])));
|
|
20123
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$9, templateObject_5$9, templateObject_6$8;
|
|
20124
|
+
|
|
20125
|
+
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20126
|
+
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
20127
|
+
var _c = React$2.useState(false), isVisible = _c[0], setIsVisible = _c[1];
|
|
20128
|
+
React$2.useEffect(function () {
|
|
20129
|
+
if (isVisible) {
|
|
20130
|
+
var timeout_1 = setTimeout(function () {
|
|
20131
|
+
setIsVisible(false);
|
|
20132
|
+
}, life || 3000);
|
|
20133
|
+
return function () { return clearTimeout(timeout_1); };
|
|
20134
|
+
}
|
|
20135
|
+
}, [isVisible, life]);
|
|
20136
|
+
React$2.useImperativeHandle(ref, function () { return ({
|
|
20137
|
+
show: function () { return setIsVisible(true); },
|
|
20138
|
+
}); });
|
|
20139
|
+
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));
|
|
20140
|
+
});
|
|
20141
|
+
Toast.displayName = 'Toast';
|
|
20142
|
+
|
|
20074
20143
|
var Container$8 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20075
20144
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20076
20145
|
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; });
|
|
@@ -20722,17 +20791,20 @@ var SliderThumbnail = newStyled(Slider)(templateObject_7$1 || (templateObject_7$
|
|
|
20722
20791
|
var theme = _a.theme;
|
|
20723
20792
|
return theme.colors.pallete.primary.color;
|
|
20724
20793
|
});
|
|
20725
|
-
var StyledImage = newStyled(Image$3)(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])))
|
|
20794
|
+
var StyledImage = newStyled(Image$3)(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"], ["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20795
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
20796
|
+
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
20797
|
+
});
|
|
20726
20798
|
var SlideItem = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (_a) {
|
|
20727
20799
|
var paddingRight = _a.paddingRight;
|
|
20728
20800
|
return paddingRight || '12px';
|
|
20729
20801
|
});
|
|
20730
|
-
var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n object-fit: cover;\n width: ", ";\n
|
|
20802
|
+
var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n object-fit: cover;\n width: ", ";\n aspect-ratio: ", ";\n border-radius: ", ";\n"], ["\n object-fit: cover;\n width: ", ";\n aspect-ratio: ", ";\n border-radius: ", ";\n"])), function (_a) {
|
|
20731
20803
|
var width = _a.width, theme = _a.theme;
|
|
20732
20804
|
return width || theme.component.gallery.thumbnail.mobile.width;
|
|
20733
20805
|
}, function (_a) {
|
|
20734
|
-
var
|
|
20735
|
-
return
|
|
20806
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
20807
|
+
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
20736
20808
|
}, function (_a) {
|
|
20737
20809
|
var borderRadius = _a.borderRadius;
|
|
20738
20810
|
return borderRadius || '0px';
|
|
@@ -20740,10 +20812,10 @@ var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_1
|
|
|
20740
20812
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1;
|
|
20741
20813
|
|
|
20742
20814
|
var ProductGalleryMobileV4 = function (_a) {
|
|
20743
|
-
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings;
|
|
20815
|
+
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings, _b = _a.isRatioSquare, isRatioSquare = _b === void 0 ? false : _b;
|
|
20744
20816
|
var colors = useTheme$1().colors;
|
|
20745
|
-
var
|
|
20746
|
-
var
|
|
20817
|
+
var _c = React$2.useState(undefined), nav1 = _c[0], setNav1 = _c[1];
|
|
20818
|
+
var _d = React$2.useState(undefined), nav2 = _d[0], setNav2 = _d[1];
|
|
20747
20819
|
var slick = React$2.useRef(null);
|
|
20748
20820
|
var thumbnailRef = React$2.useRef(null);
|
|
20749
20821
|
var sliderWrapper = React$2.useRef(null);
|
|
@@ -20757,10 +20829,10 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20757
20829
|
}, []);
|
|
20758
20830
|
return (jsxRuntime.jsx(Container$1, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxRuntime.jsxs(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsxRuntime.jsx(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
|
|
20759
20831
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20760
|
-
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20832
|
+
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager", isRatioSquare: isRatioSquare }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20761
20833
|
}) }), void 0), jsxRuntime.jsx(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, (thumbnailSettings || THUMBNAIL_SETTINGS), { lazyLoad: "progressive" }, { children: images.map(function (_a) {
|
|
20762
20834
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20763
|
-
return (jsxRuntime.jsx(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsxRuntime.jsx(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig, { loading: "eager" }), void 0) }), key));
|
|
20835
|
+
return (jsxRuntime.jsx(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsxRuntime.jsx(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig, { loading: "eager", isRatioSquare: isRatioSquare }), void 0) }), key));
|
|
20764
20836
|
}) }), void 0)] }), void 0) }), void 0));
|
|
20765
20837
|
};
|
|
20766
20838
|
|
|
@@ -20923,6 +20995,7 @@ exports.TextWithImage = TextWithImage;
|
|
|
20923
20995
|
exports.ThemeProvider = ThemeProvider;
|
|
20924
20996
|
exports.ThemeVariables = ThemeVariables;
|
|
20925
20997
|
exports.Timer = Timer;
|
|
20998
|
+
exports.Toast = Toast;
|
|
20926
20999
|
exports.Tooltip = Tooltip;
|
|
20927
21000
|
exports.Totals = Totals;
|
|
20928
21001
|
exports.TrackingProgress = TrackingProgress;
|