@trafilea/afrodita-components 6.24.0 → 6.25.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +25 -1
- package/build/index.esm.js +643 -539
- package/build/index.esm.js.map +1 -1
- package/build/index.js +644 -538
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as jsx$1, jsxs as jsxs$1, Fragment as Fragment$2 } from 'react/jsx-runtime';
|
|
2
2
|
import * as React$2 from 'react';
|
|
3
|
-
import React__default, { forwardRef, useContext, createElement, createContext, Fragment as Fragment$1, useRef, useLayoutEffect, useMemo, useState, useEffect, useCallback, useReducer, createRef, isValidElement, cloneElement, memo } from 'react';
|
|
3
|
+
import React__default, { forwardRef, useContext, createElement, createContext, Fragment as Fragment$1, useRef, useLayoutEffect, useMemo, useState, useEffect, useCallback, useReducer, createRef, isValidElement, cloneElement, memo, useImperativeHandle } from 'react';
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
5
5
|
|
|
6
6
|
/*! *****************************************************************************
|
|
@@ -2583,6 +2583,20 @@ function css() {
|
|
|
2583
2583
|
return serializeStyles(args);
|
|
2584
2584
|
}
|
|
2585
2585
|
|
|
2586
|
+
var keyframes = function keyframes() {
|
|
2587
|
+
var insertable = css.apply(void 0, arguments);
|
|
2588
|
+
var name = "animation-" + insertable.name; // $FlowFixMe
|
|
2589
|
+
|
|
2590
|
+
return {
|
|
2591
|
+
name: name,
|
|
2592
|
+
styles: "@keyframes " + name + "{" + insertable.styles + "}",
|
|
2593
|
+
anim: 1,
|
|
2594
|
+
toString: function toString() {
|
|
2595
|
+
return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
|
|
2596
|
+
}
|
|
2597
|
+
};
|
|
2598
|
+
};
|
|
2599
|
+
|
|
2586
2600
|
var classnames$2 = function classnames(args) {
|
|
2587
2601
|
var len = args.length;
|
|
2588
2602
|
var i = 0;
|
|
@@ -3127,7 +3141,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3127
3141
|
desktop: 1280,
|
|
3128
3142
|
};
|
|
3129
3143
|
|
|
3130
|
-
var Container$1j = newStyled.div(templateObject_1$
|
|
3144
|
+
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) {
|
|
3131
3145
|
var height = _a.height;
|
|
3132
3146
|
return (height ? height : '1.5em');
|
|
3133
3147
|
}, function (_a) {
|
|
@@ -3154,9 +3168,9 @@ var SkeletonBox = function (_a) {
|
|
|
3154
3168
|
var theme = useTheme();
|
|
3155
3169
|
return jsx$1(Container$1j, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3156
3170
|
};
|
|
3157
|
-
var templateObject_1$
|
|
3171
|
+
var templateObject_1$2a;
|
|
3158
3172
|
|
|
3159
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3173
|
+
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) {
|
|
3160
3174
|
var width = _a.width;
|
|
3161
3175
|
return width;
|
|
3162
3176
|
}, function (_a) {
|
|
@@ -3172,7 +3186,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$26 || (templateObject_1$26
|
|
|
3172
3186
|
var opacity = _a.opacity;
|
|
3173
3187
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3174
3188
|
});
|
|
3175
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3189
|
+
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) {
|
|
3176
3190
|
var width = _a.width;
|
|
3177
3191
|
return width;
|
|
3178
3192
|
}, function (_a) {
|
|
@@ -3185,7 +3199,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1s || (templateObject_2$
|
|
|
3185
3199
|
var opacity = _a.opacity;
|
|
3186
3200
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3187
3201
|
});
|
|
3188
|
-
var templateObject_1$
|
|
3202
|
+
var templateObject_1$29, templateObject_2$1v;
|
|
3189
3203
|
|
|
3190
3204
|
/* eslint-disable no-undef */
|
|
3191
3205
|
var cache = new Map();
|
|
@@ -3361,7 +3375,7 @@ var buildImageUrl = function (_a) {
|
|
|
3361
3375
|
}
|
|
3362
3376
|
};
|
|
3363
3377
|
|
|
3364
|
-
var Img = newStyled.img(templateObject_1$
|
|
3378
|
+
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; });
|
|
3365
3379
|
var Image$3 = function (_a) {
|
|
3366
3380
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3367
3381
|
var config = useTheme().config;
|
|
@@ -3370,7 +3384,7 @@ var Image$3 = function (_a) {
|
|
|
3370
3384
|
: src;
|
|
3371
3385
|
return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3372
3386
|
};
|
|
3373
|
-
var templateObject_1$
|
|
3387
|
+
var templateObject_1$28;
|
|
3374
3388
|
|
|
3375
3389
|
var CardSectionType;
|
|
3376
3390
|
(function (CardSectionType) {
|
|
@@ -3426,7 +3440,7 @@ var getStylesBySize$g = function (size) {
|
|
|
3426
3440
|
};
|
|
3427
3441
|
}
|
|
3428
3442
|
};
|
|
3429
|
-
var Container$1i = newStyled.div(templateObject_1$
|
|
3443
|
+
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) {
|
|
3430
3444
|
var backgroundColor = _a.backgroundColor;
|
|
3431
3445
|
return backgroundColor;
|
|
3432
3446
|
}, function (_a) {
|
|
@@ -3448,7 +3462,7 @@ var Container$1i = newStyled.div(templateObject_1$24 || (templateObject_1$24 = _
|
|
|
3448
3462
|
var size = _a.size;
|
|
3449
3463
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3450
3464
|
});
|
|
3451
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
3465
|
+
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) {
|
|
3452
3466
|
var textColor = _a.textColor;
|
|
3453
3467
|
return textColor;
|
|
3454
3468
|
}, function (_a) {
|
|
@@ -3465,7 +3479,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3465
3479
|
var theme = useTheme();
|
|
3466
3480
|
return (jsx$1(Container$1i, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3467
3481
|
};
|
|
3468
|
-
var templateObject_1$
|
|
3482
|
+
var templateObject_1$27, templateObject_2$1u;
|
|
3469
3483
|
|
|
3470
3484
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3471
3485
|
var _a, _b, _c;
|
|
@@ -3496,7 +3510,7 @@ var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
|
3496
3510
|
};
|
|
3497
3511
|
}
|
|
3498
3512
|
};
|
|
3499
|
-
var Container$1h = newStyled.div(templateObject_1$
|
|
3513
|
+
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) {
|
|
3500
3514
|
var backgroundColor = _a.backgroundColor;
|
|
3501
3515
|
return backgroundColor;
|
|
3502
3516
|
}, function (_a) {
|
|
@@ -3518,7 +3532,7 @@ var Container$1h = newStyled.div(templateObject_1$23 || (templateObject_1$23 = _
|
|
|
3518
3532
|
var size = _a.size;
|
|
3519
3533
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3520
3534
|
});
|
|
3521
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3535
|
+
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) {
|
|
3522
3536
|
var textColor = _a.textColor;
|
|
3523
3537
|
return textColor;
|
|
3524
3538
|
}, function (_a) {
|
|
@@ -3535,7 +3549,7 @@ var DiscountTag$2 = function (_a) {
|
|
|
3535
3549
|
var theme = useTheme();
|
|
3536
3550
|
return (jsx$1(Container$1h, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
3537
3551
|
};
|
|
3538
|
-
var templateObject_1$
|
|
3552
|
+
var templateObject_1$26, templateObject_2$1t;
|
|
3539
3553
|
|
|
3540
3554
|
function getWindowDimensions() {
|
|
3541
3555
|
if (typeof window === 'undefined')
|
|
@@ -3630,8 +3644,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3630
3644
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3631
3645
|
}
|
|
3632
3646
|
};
|
|
3633
|
-
var Container$1g = newStyled.div(templateObject_1$
|
|
3634
|
-
var Price = newStyled.p(templateObject_2$
|
|
3647
|
+
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"])));
|
|
3648
|
+
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) {
|
|
3635
3649
|
var weight = _a.weight;
|
|
3636
3650
|
return (weight ? weight : '400');
|
|
3637
3651
|
}, function (_a) {
|
|
@@ -3655,7 +3669,7 @@ var Price = newStyled.p(templateObject_2$1p || (templateObject_2$1p = __makeTemp
|
|
|
3655
3669
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3656
3670
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
3657
3671
|
});
|
|
3658
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
3672
|
+
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) {
|
|
3659
3673
|
var _b;
|
|
3660
3674
|
var size = _a.size;
|
|
3661
3675
|
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -3688,9 +3702,9 @@ var PriceLabel$1 = function (_a) {
|
|
|
3688
3702
|
};
|
|
3689
3703
|
return (jsxs$1(Container$1g, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3690
3704
|
};
|
|
3691
|
-
var templateObject_1$
|
|
3705
|
+
var templateObject_1$25, templateObject_2$1s, templateObject_3$19;
|
|
3692
3706
|
|
|
3693
|
-
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$
|
|
3707
|
+
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3694
3708
|
var PriceLabelV2$1 = function (_a) {
|
|
3695
3709
|
var _b;
|
|
3696
3710
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -3761,11 +3775,11 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3761
3775
|
lineHeight: '22px',
|
|
3762
3776
|
} }), void 0)) }), void 0))] }), void 0));
|
|
3763
3777
|
};
|
|
3764
|
-
var templateObject_1$
|
|
3778
|
+
var templateObject_1$24;
|
|
3765
3779
|
|
|
3766
|
-
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$
|
|
3767
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3768
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
3780
|
+
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3781
|
+
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"])));
|
|
3782
|
+
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"])));
|
|
3769
3783
|
var PriceLabelV3 = function (_a) {
|
|
3770
3784
|
var _b;
|
|
3771
3785
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -3836,9 +3850,9 @@ var PriceLabelV3 = function (_a) {
|
|
|
3836
3850
|
lineHeight: '22px',
|
|
3837
3851
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3838
3852
|
};
|
|
3839
|
-
var templateObject_1$
|
|
3853
|
+
var templateObject_1$23, templateObject_2$1r, templateObject_3$18;
|
|
3840
3854
|
|
|
3841
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
3855
|
+
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"])));
|
|
3842
3856
|
var PriceLabel = function (_a) {
|
|
3843
3857
|
var _b;
|
|
3844
3858
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
@@ -3872,9 +3886,9 @@ var PriceLabel = function (_a) {
|
|
|
3872
3886
|
marginTop: '-6px',
|
|
3873
3887
|
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3874
3888
|
};
|
|
3875
|
-
var templateObject_1$
|
|
3889
|
+
var templateObject_1$22;
|
|
3876
3890
|
|
|
3877
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
3891
|
+
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"])));
|
|
3878
3892
|
var PriceLabelV2 = function (_a) {
|
|
3879
3893
|
var _b;
|
|
3880
3894
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, rest = __rest(_a, ["finalPrice", "originalPrice", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size"]);
|
|
@@ -3907,7 +3921,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
3907
3921
|
: (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1];
|
|
3908
3922
|
return (jsxs$1(Container$1g, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price'), style: { marginLeft: '-3px' } }, { children: [jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: [currencySymbol, finalPriceString] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0)] }), void 0));
|
|
3909
3923
|
};
|
|
3910
|
-
var templateObject_1$
|
|
3924
|
+
var templateObject_1$21;
|
|
3911
3925
|
|
|
3912
3926
|
var Add = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3913
3927
|
|
|
@@ -4731,12 +4745,12 @@ function jsxs(type, props, key) {
|
|
|
4731
4745
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4732
4746
|
// `variants` styles that are consistent through all themes.
|
|
4733
4747
|
var TAGS = {
|
|
4734
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4735
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4736
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4737
|
-
display1: newStyled.h1(templateObject_4$
|
|
4738
|
-
display2: newStyled.h2(templateObject_5$
|
|
4739
|
-
display3: newStyled.h3(templateObject_6$
|
|
4748
|
+
hero1: newStyled.h1(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject([""], [""]))),
|
|
4749
|
+
hero2: newStyled.h2(templateObject_2$1q || (templateObject_2$1q = __makeTemplateObject([""], [""]))),
|
|
4750
|
+
hero3: newStyled.h3(templateObject_3$17 || (templateObject_3$17 = __makeTemplateObject([""], [""]))),
|
|
4751
|
+
display1: newStyled.h1(templateObject_4$U || (templateObject_4$U = __makeTemplateObject([""], [""]))),
|
|
4752
|
+
display2: newStyled.h2(templateObject_5$F || (templateObject_5$F = __makeTemplateObject([""], [""]))),
|
|
4753
|
+
display3: newStyled.h3(templateObject_6$z || (templateObject_6$z = __makeTemplateObject([""], [""]))),
|
|
4740
4754
|
heading1: newStyled.h1(templateObject_7$p || (templateObject_7$p = __makeTemplateObject([""], [""]))),
|
|
4741
4755
|
heading2: newStyled.h2(templateObject_8$k || (templateObject_8$k = __makeTemplateObject([""], [""]))),
|
|
4742
4756
|
heading3: newStyled.h3(templateObject_9$b || (templateObject_9$b = __makeTemplateObject([""], [""]))),
|
|
@@ -4867,14 +4881,14 @@ var DEFAULTS = {
|
|
|
4867
4881
|
size: 'regular',
|
|
4868
4882
|
},
|
|
4869
4883
|
};
|
|
4870
|
-
var templateObject_1$
|
|
4871
|
-
|
|
4872
|
-
var Container$1f = newStyled.div(templateObject_1$
|
|
4873
|
-
var Card$
|
|
4874
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4875
|
-
var Label$6 = newStyled.div(templateObject_4$
|
|
4876
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4877
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4884
|
+
var templateObject_1$20, templateObject_2$1q, templateObject_3$17, templateObject_4$U, templateObject_5$F, templateObject_6$z, templateObject_7$p, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4885
|
+
|
|
4886
|
+
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"])));
|
|
4887
|
+
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"])));
|
|
4888
|
+
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"])));
|
|
4889
|
+
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"])));
|
|
4890
|
+
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"])));
|
|
4891
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$y || (templateObject_6$y = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4878
4892
|
var PackSelectorV2 = function (_a) {
|
|
4879
4893
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4880
4894
|
return (jsx$1(Container$1f, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4891,7 +4905,7 @@ var PackCard$1 = function (_a) {
|
|
|
4891
4905
|
.then(function (icon) { return setIcon(icon); })
|
|
4892
4906
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4893
4907
|
}, [pack.meta.icon]);
|
|
4894
|
-
return (jsxs$1(Card$
|
|
4908
|
+
return (jsxs$1(Card$4, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$6, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsx$1(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(DiscountContainer$1, { children: [jsx$1(Text$7, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
4895
4909
|
locale: 'en-US',
|
|
4896
4910
|
currency: currencyCode || 'USD',
|
|
4897
4911
|
}) }), void 0), pack.meta.quantity > 1 ? (jsxs$1(Text$7, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
@@ -4899,27 +4913,27 @@ var PackCard$1 = function (_a) {
|
|
|
4899
4913
|
currency: currencyCode || 'USD',
|
|
4900
4914
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4901
4915
|
};
|
|
4902
|
-
var templateObject_1$
|
|
4916
|
+
var templateObject_1$1$, templateObject_2$1p, templateObject_3$16, templateObject_4$T, templateObject_5$E, templateObject_6$y;
|
|
4903
4917
|
|
|
4904
|
-
var Container$1e = newStyled.div(templateObject_1$
|
|
4905
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4918
|
+
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"])));
|
|
4919
|
+
var DropContainer = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4906
4920
|
var DropList = function (_a) {
|
|
4907
4921
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4908
4922
|
return (jsx$1(Container$1e, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4909
4923
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4910
4924
|
}) }, void 0));
|
|
4911
4925
|
};
|
|
4912
|
-
var templateObject_1$
|
|
4926
|
+
var templateObject_1$1_, templateObject_2$1o;
|
|
4913
4927
|
|
|
4914
4928
|
var DROPS_TOTAL = 5;
|
|
4915
|
-
var Container$1d = newStyled.div(templateObject_1$
|
|
4916
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
4917
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4929
|
+
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"])));
|
|
4930
|
+
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"])));
|
|
4931
|
+
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"])));
|
|
4918
4932
|
var AbsorbencyLevel = function (_a) {
|
|
4919
4933
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4920
4934
|
return (jsxs$1(Container$1d, { children: [jsx$1(Title$b, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4921
4935
|
};
|
|
4922
|
-
var templateObject_1$
|
|
4936
|
+
var templateObject_1$1Z, templateObject_2$1n, templateObject_3$15;
|
|
4923
4937
|
|
|
4924
4938
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4925
4939
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -4995,7 +5009,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4995
5009
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4996
5010
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4997
5011
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4998
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
5012
|
+
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"])));
|
|
4999
5013
|
var Accordion$1 = function (_a) {
|
|
5000
5014
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
5001
5015
|
var theme = useTheme();
|
|
@@ -5019,9 +5033,9 @@ var Accordion$1 = function (_a) {
|
|
|
5019
5033
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
5020
5034
|
} }), void 0));
|
|
5021
5035
|
};
|
|
5022
|
-
var templateObject_1$
|
|
5036
|
+
var templateObject_1$1Y;
|
|
5023
5037
|
|
|
5024
|
-
var Container$1c = newStyled.div(templateObject_1$
|
|
5038
|
+
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"])));
|
|
5025
5039
|
var AccordionOptions = function (_a) {
|
|
5026
5040
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
5027
5041
|
var _b = useState({
|
|
@@ -5045,7 +5059,7 @@ var AccordionOptions = function (_a) {
|
|
|
5045
5059
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
5046
5060
|
}) }, void 0));
|
|
5047
5061
|
};
|
|
5048
|
-
var templateObject_1$
|
|
5062
|
+
var templateObject_1$1X;
|
|
5049
5063
|
|
|
5050
5064
|
/**
|
|
5051
5065
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -5181,22 +5195,22 @@ var isValidDate = function (value) {
|
|
|
5181
5195
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
5182
5196
|
};
|
|
5183
5197
|
|
|
5184
|
-
var Bold = newStyled.span(templateObject_1$
|
|
5185
|
-
var FlexContainer$3 = newStyled.div(templateObject_2$
|
|
5186
|
-
var templateObject_1$
|
|
5198
|
+
var Bold = newStyled.span(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5199
|
+
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"])));
|
|
5200
|
+
var templateObject_1$1W, templateObject_2$1m;
|
|
5187
5201
|
|
|
5188
|
-
var Container$1b = newStyled.div(templateObject_1$
|
|
5202
|
+
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) {
|
|
5189
5203
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
5190
5204
|
return width;
|
|
5191
5205
|
}, function (_a) {
|
|
5192
5206
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5193
5207
|
return height;
|
|
5194
5208
|
});
|
|
5195
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5196
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
5197
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
5198
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5199
|
-
var templateObject_1$
|
|
5209
|
+
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"])));
|
|
5210
|
+
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"])));
|
|
5211
|
+
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"])));
|
|
5212
|
+
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"])));
|
|
5213
|
+
var templateObject_1$1V, templateObject_2$1l, templateObject_3$14, templateObject_4$S, templateObject_5$D;
|
|
5200
5214
|
|
|
5201
5215
|
var CouponCard = function (_a) {
|
|
5202
5216
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -5252,14 +5266,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
5252
5266
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
5253
5267
|
};
|
|
5254
5268
|
|
|
5255
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
5256
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5269
|
+
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; });
|
|
5270
|
+
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"])));
|
|
5257
5271
|
var Error$1 = function (_a) {
|
|
5258
5272
|
var error = _a.error;
|
|
5259
5273
|
var theme = useTheme();
|
|
5260
5274
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5261
5275
|
};
|
|
5262
|
-
var templateObject_1$
|
|
5276
|
+
var templateObject_1$1U, templateObject_2$1k;
|
|
5263
5277
|
|
|
5264
5278
|
var BaseSelectButton = function (_a) {
|
|
5265
5279
|
var children = _a.children, as = _a.as;
|
|
@@ -5276,7 +5290,7 @@ function BaseSelectOption(_a) {
|
|
|
5276
5290
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5277
5291
|
}
|
|
5278
5292
|
|
|
5279
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
5293
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5280
5294
|
function BaseSelect(_a) {
|
|
5281
5295
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5282
5296
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5286,7 +5300,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5286
5300
|
Options: BaseSelectOptions,
|
|
5287
5301
|
Option: BaseSelectOption,
|
|
5288
5302
|
});
|
|
5289
|
-
var templateObject_1$
|
|
5303
|
+
var templateObject_1$1T;
|
|
5290
5304
|
|
|
5291
5305
|
var CustomButton = newStyled.button(function (_a) {
|
|
5292
5306
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5325,7 +5339,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5325
5339
|
});
|
|
5326
5340
|
});
|
|
5327
5341
|
// TODO Remove this when we find the real solution
|
|
5328
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
5342
|
+
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) {
|
|
5329
5343
|
var open = _a.open;
|
|
5330
5344
|
return open &&
|
|
5331
5345
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -5345,7 +5359,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
5345
5359
|
} }), void 0));
|
|
5346
5360
|
};
|
|
5347
5361
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
5348
|
-
var templateObject_1$
|
|
5362
|
+
var templateObject_1$1S;
|
|
5349
5363
|
|
|
5350
5364
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
5351
5365
|
var theme = _a.theme;
|
|
@@ -5512,7 +5526,7 @@ var CustomCheckboxStyles = {
|
|
|
5512
5526
|
},
|
|
5513
5527
|
};
|
|
5514
5528
|
|
|
5515
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
5529
|
+
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"])));
|
|
5516
5530
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
5517
5531
|
CustomCheckboxStyles[props.size](props.theme),
|
|
5518
5532
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -5523,7 +5537,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5523
5537
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5524
5538
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5525
5539
|
]; });
|
|
5526
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5540
|
+
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) {
|
|
5527
5541
|
var disabled = _a.disabled;
|
|
5528
5542
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5529
5543
|
});
|
|
@@ -5539,7 +5553,7 @@ var Checkbox = function (_a) {
|
|
|
5539
5553
|
};
|
|
5540
5554
|
return (jsxs$1(Container$1a, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$5, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5541
5555
|
};
|
|
5542
|
-
var templateObject_1$
|
|
5556
|
+
var templateObject_1$1R, templateObject_2$1j;
|
|
5543
5557
|
|
|
5544
5558
|
var CustomOption = newStyled.li(function (_a) {
|
|
5545
5559
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5588,9 +5602,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5588
5602
|
Option: BaseDropdownOption,
|
|
5589
5603
|
});
|
|
5590
5604
|
|
|
5591
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
5592
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5593
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5605
|
+
var Container$19 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject([""], [""])));
|
|
5606
|
+
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"])));
|
|
5607
|
+
var SelectedOption = newStyled.span(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5594
5608
|
var fontWeight = _a.fontWeight;
|
|
5595
5609
|
return fontWeight || '';
|
|
5596
5610
|
});
|
|
@@ -5625,7 +5639,7 @@ function SimpleDropdown(_a) {
|
|
|
5625
5639
|
var DropdownContainer = showRequiredPlaceholder ? Container$19 : Fragment$1;
|
|
5626
5640
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5627
5641
|
}
|
|
5628
|
-
var templateObject_1$
|
|
5642
|
+
var templateObject_1$1Q, templateObject_2$1i, templateObject_3$13;
|
|
5629
5643
|
|
|
5630
5644
|
/* base styles & size variants */
|
|
5631
5645
|
var CustomRadioStyles$2 = {
|
|
@@ -5690,9 +5704,9 @@ var ContainerStyles$2 = {
|
|
|
5690
5704
|
},
|
|
5691
5705
|
};
|
|
5692
5706
|
|
|
5693
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5707
|
+
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"])));
|
|
5694
5708
|
var Container$18 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5695
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5709
|
+
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) {
|
|
5696
5710
|
var disabled = _a.disabled;
|
|
5697
5711
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5698
5712
|
});
|
|
@@ -5700,14 +5714,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5700
5714
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5701
5715
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5702
5716
|
]; });
|
|
5703
|
-
var StyledLabel$3 = newStyled(Label$5)(templateObject_3
|
|
5717
|
+
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) {
|
|
5704
5718
|
var theme = _a.theme;
|
|
5705
5719
|
return theme.component.radio.textSize;
|
|
5706
5720
|
}, function (_a) {
|
|
5707
5721
|
var theme = _a.theme;
|
|
5708
5722
|
return theme.component.radio.lineHeight;
|
|
5709
5723
|
});
|
|
5710
|
-
var StyledLabelV2 = newStyled(Label$5)(templateObject_4$
|
|
5724
|
+
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) {
|
|
5711
5725
|
var theme = _a.theme;
|
|
5712
5726
|
return theme.component.radio.textSize;
|
|
5713
5727
|
}, function (_a) {
|
|
@@ -5723,7 +5737,7 @@ var RadioInput = function (_a) {
|
|
|
5723
5737
|
};
|
|
5724
5738
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$18, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: label }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5725
5739
|
};
|
|
5726
|
-
var templateObject_1$
|
|
5740
|
+
var templateObject_1$1P, templateObject_2$1h, templateObject_3$12, templateObject_4$R;
|
|
5727
5741
|
|
|
5728
5742
|
var useOnClickOutside = function (ref, handler) {
|
|
5729
5743
|
useEffect(function () {
|
|
@@ -5816,7 +5830,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5816
5830
|
}
|
|
5817
5831
|
};
|
|
5818
5832
|
|
|
5819
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5833
|
+
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) {
|
|
5820
5834
|
var position = _a.position;
|
|
5821
5835
|
return getWrapperFlexDirection(position);
|
|
5822
5836
|
}, function (_a) {
|
|
@@ -5826,7 +5840,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __ma
|
|
|
5826
5840
|
var disableHover = _a.disableHover;
|
|
5827
5841
|
return (disableHover ? 0 : 1);
|
|
5828
5842
|
});
|
|
5829
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5843
|
+
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) {
|
|
5830
5844
|
var position = _a.position;
|
|
5831
5845
|
return getContainerFlexDirection(position);
|
|
5832
5846
|
}, function (_a) {
|
|
@@ -5854,14 +5868,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1d || (templateObject_2$1d
|
|
|
5854
5868
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5855
5869
|
return actual === expected ? margin : '0';
|
|
5856
5870
|
};
|
|
5857
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5871
|
+
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) {
|
|
5858
5872
|
var borderColor = _a.borderColor;
|
|
5859
5873
|
return borderColor;
|
|
5860
5874
|
}, function (_a) {
|
|
5861
5875
|
var backgroundColor = _a.backgroundColor;
|
|
5862
5876
|
return backgroundColor;
|
|
5863
5877
|
});
|
|
5864
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5878
|
+
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) {
|
|
5865
5879
|
var theme = _a.theme;
|
|
5866
5880
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5867
5881
|
}, function (_a) {
|
|
@@ -5871,8 +5885,8 @@ var TooltipText = newStyled.div(templateObject_4$O || (templateObject_4$O = __ma
|
|
|
5871
5885
|
var color = _a.color;
|
|
5872
5886
|
return color;
|
|
5873
5887
|
});
|
|
5874
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5875
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
5888
|
+
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"])));
|
|
5889
|
+
var Title$a = newStyled.h1(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5876
5890
|
var color = _a.color;
|
|
5877
5891
|
return color;
|
|
5878
5892
|
});
|
|
@@ -5881,7 +5895,7 @@ var CloseToolTip = newStyled.button(templateObject_8$j || (templateObject_8$j =
|
|
|
5881
5895
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5882
5896
|
return right;
|
|
5883
5897
|
});
|
|
5884
|
-
var templateObject_1$
|
|
5898
|
+
var templateObject_1$1O, templateObject_2$1g, templateObject_3$11, templateObject_4$Q, templateObject_5$C, templateObject_6$x, templateObject_7$o, templateObject_8$j;
|
|
5885
5899
|
|
|
5886
5900
|
var Tooltip = function (_a) {
|
|
5887
5901
|
var _b;
|
|
@@ -5924,8 +5938,8 @@ var benefitsColorMapper = function (_a) {
|
|
|
5924
5938
|
};
|
|
5925
5939
|
};
|
|
5926
5940
|
|
|
5927
|
-
var FlexContainer$2 = newStyled.div(templateObject_1$
|
|
5928
|
-
var ContainerBase$2 = newStyled.div(templateObject_2$
|
|
5941
|
+
var FlexContainer$2 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5942
|
+
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) {
|
|
5929
5943
|
var selected = _a.selected, theme = _a.theme;
|
|
5930
5944
|
return selected
|
|
5931
5945
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5939,19 +5953,19 @@ var ContainerBase$2 = newStyled.div(templateObject_2$1c || (templateObject_2$1c
|
|
|
5939
5953
|
var theme = _a.theme;
|
|
5940
5954
|
return theme.colors.pallete.primary.color;
|
|
5941
5955
|
});
|
|
5942
|
-
var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_3$
|
|
5956
|
+
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) {
|
|
5943
5957
|
var onClick = _a.onClick;
|
|
5944
5958
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5945
5959
|
});
|
|
5946
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$
|
|
5947
|
-
var SubscriptionHeader$2 = newStyled.div(templateObject_5$
|
|
5960
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5961
|
+
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) {
|
|
5948
5962
|
var theme = _a.theme;
|
|
5949
5963
|
return theme.colors.shades[200].color;
|
|
5950
5964
|
}, function (_a) {
|
|
5951
5965
|
var theme = _a.theme;
|
|
5952
5966
|
return theme.colors.pallete.primary.color;
|
|
5953
5967
|
});
|
|
5954
|
-
var BenefitsContainer$2 = newStyled.div(templateObject_6$
|
|
5968
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_6$w || (templateObject_6$w = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5955
5969
|
var Benefit$2 = newStyled.div(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
5956
5970
|
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"])));
|
|
5957
5971
|
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"])));
|
|
@@ -5962,7 +5976,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
5962
5976
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5963
5977
|
});
|
|
5964
5978
|
var Container$17 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5965
|
-
var templateObject_1$
|
|
5979
|
+
var templateObject_1$1N, templateObject_2$1f, templateObject_3$10, templateObject_4$P, templateObject_5$B, templateObject_6$w, templateObject_7$n, templateObject_8$i, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$3;
|
|
5966
5980
|
|
|
5967
5981
|
var radioIds$2 = {
|
|
5968
5982
|
oneTime: {
|
|
@@ -6017,12 +6031,12 @@ var Autoship = function (_a) {
|
|
|
6017
6031
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$2, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$2.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$2, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$2, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
6018
6032
|
};
|
|
6019
6033
|
|
|
6020
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
6034
|
+
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) {
|
|
6021
6035
|
var theme = _a.theme;
|
|
6022
6036
|
return theme.name === 'TheSpaDr' &&
|
|
6023
6037
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
6024
6038
|
});
|
|
6025
|
-
var DiscountTag$1 = newStyled.div(templateObject_2$
|
|
6039
|
+
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) {
|
|
6026
6040
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6027
6041
|
return isSelected
|
|
6028
6042
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6038,7 +6052,7 @@ var getSelectedBorder = function (_a) {
|
|
|
6038
6052
|
}
|
|
6039
6053
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6040
6054
|
};
|
|
6041
|
-
var ContainerBase$1 = newStyled.div(templateObject_3
|
|
6055
|
+
var ContainerBase$1 = newStyled.div(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6042
6056
|
var selected = _a.selected, theme = _a.theme;
|
|
6043
6057
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6044
6058
|
}, function (_a) {
|
|
@@ -6050,12 +6064,12 @@ var ContainerBase$1 = newStyled.div(templateObject_3$Y || (templateObject_3$Y =
|
|
|
6050
6064
|
var theme = _a.theme;
|
|
6051
6065
|
return theme.colors.pallete.primary.color;
|
|
6052
6066
|
});
|
|
6053
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
6067
|
+
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) {
|
|
6054
6068
|
var onClick = _a.onClick;
|
|
6055
6069
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6056
6070
|
});
|
|
6057
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
6058
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_6$
|
|
6071
|
+
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"])));
|
|
6072
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6059
6073
|
var theme = _a.theme;
|
|
6060
6074
|
return theme.colors.shades[200].color;
|
|
6061
6075
|
}, function (_a) {
|
|
@@ -6075,7 +6089,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6075
6089
|
var theme = _a.theme;
|
|
6076
6090
|
return theme.component.autoship.tooltip.margin;
|
|
6077
6091
|
});
|
|
6078
|
-
var templateObject_1$
|
|
6092
|
+
var templateObject_1$1M, templateObject_2$1e, templateObject_3$$, templateObject_4$O, templateObject_5$A, templateObject_6$v, templateObject_7$m, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$2, templateObject_13$2;
|
|
6079
6093
|
|
|
6080
6094
|
var radioIds$1 = {
|
|
6081
6095
|
oneTime: {
|
|
@@ -6153,13 +6167,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6153
6167
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6154
6168
|
_a$2);
|
|
6155
6169
|
|
|
6156
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6157
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6158
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6159
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6160
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6161
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6162
|
-
var templateObject_1$
|
|
6170
|
+
var CustomerDetails = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject([""], [""])));
|
|
6171
|
+
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"])));
|
|
6172
|
+
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"])));
|
|
6173
|
+
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"])));
|
|
6174
|
+
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"])));
|
|
6175
|
+
var ReviewDays = newStyled.span(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6176
|
+
var templateObject_1$1L, templateObject_2$1d, templateObject_3$_, templateObject_4$N, templateObject_5$z, templateObject_6$u;
|
|
6163
6177
|
|
|
6164
6178
|
var NameWithStars = function (_a) {
|
|
6165
6179
|
var name = _a.name, size = _a.size;
|
|
@@ -6177,10 +6191,10 @@ var ResultFeedback = function (_a) {
|
|
|
6177
6191
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6178
6192
|
};
|
|
6179
6193
|
|
|
6180
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
6181
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6182
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6183
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6194
|
+
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; });
|
|
6195
|
+
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"])));
|
|
6196
|
+
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; });
|
|
6197
|
+
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) {
|
|
6184
6198
|
var theme = _a.theme;
|
|
6185
6199
|
return theme.colors.pallete.secondary.color;
|
|
6186
6200
|
}, function (_a) {
|
|
@@ -6190,7 +6204,7 @@ var UserInfoText = newStyled.div(templateObject_4$K || (templateObject_4$K = __m
|
|
|
6190
6204
|
var theme = _a.theme, size = _a.size;
|
|
6191
6205
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6192
6206
|
});
|
|
6193
|
-
var templateObject_1$
|
|
6207
|
+
var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$M;
|
|
6194
6208
|
|
|
6195
6209
|
/* base styles & size variants */
|
|
6196
6210
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6268,7 +6282,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6268
6282
|
return (jsxs$1(Container$15, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$7, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6269
6283
|
};
|
|
6270
6284
|
|
|
6271
|
-
var Section = newStyled.div(templateObject_1$
|
|
6285
|
+
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) {
|
|
6272
6286
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6273
6287
|
});
|
|
6274
6288
|
var CardHeader = function (_a) {
|
|
@@ -6279,16 +6293,16 @@ var CardFooter = function (_a) {
|
|
|
6279
6293
|
var children = _a.children;
|
|
6280
6294
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6281
6295
|
};
|
|
6282
|
-
var templateObject_1$
|
|
6296
|
+
var templateObject_1$1J;
|
|
6283
6297
|
|
|
6284
|
-
var Body = newStyled.div(templateObject_1$
|
|
6285
|
-
var CardBody = function (_a) {
|
|
6298
|
+
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"])));
|
|
6299
|
+
var CardBody$1 = function (_a) {
|
|
6286
6300
|
var children = _a.children;
|
|
6287
6301
|
return jsx$1(Body, { children: children }, void 0);
|
|
6288
6302
|
};
|
|
6289
|
-
var templateObject_1$
|
|
6303
|
+
var templateObject_1$1I;
|
|
6290
6304
|
|
|
6291
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
6305
|
+
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) {
|
|
6292
6306
|
var flex = _a.flex;
|
|
6293
6307
|
return flex &&
|
|
6294
6308
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6300,55 +6314,55 @@ var Container$14 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = _
|
|
|
6300
6314
|
}, function (props) { return props.theme.component.card.borderRadius; }, function (props) {
|
|
6301
6315
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
6302
6316
|
});
|
|
6303
|
-
var Card$
|
|
6317
|
+
var Card$2 = function (_a) {
|
|
6304
6318
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
6305
6319
|
var theme = useTheme();
|
|
6306
6320
|
return (jsx$1(Container$14, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6307
6321
|
};
|
|
6308
|
-
var Card$
|
|
6322
|
+
var Card$3 = Object.assign(Card$2, {
|
|
6309
6323
|
Header: CardHeader,
|
|
6310
6324
|
Footer: CardFooter,
|
|
6311
|
-
Body: CardBody,
|
|
6325
|
+
Body: CardBody$1,
|
|
6312
6326
|
});
|
|
6313
|
-
var templateObject_1$
|
|
6327
|
+
var templateObject_1$1H;
|
|
6314
6328
|
|
|
6315
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6316
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6317
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6329
|
+
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"])));
|
|
6330
|
+
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"])));
|
|
6331
|
+
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) {
|
|
6318
6332
|
var color = _a.color;
|
|
6319
6333
|
return color;
|
|
6320
6334
|
});
|
|
6321
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6322
|
-
var templateObject_1$
|
|
6335
|
+
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"])));
|
|
6336
|
+
var templateObject_1$1G, templateObject_2$1b, templateObject_3$Y, templateObject_4$L;
|
|
6323
6337
|
|
|
6324
6338
|
var Minimalistic = function (_a) {
|
|
6325
6339
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
6326
6340
|
var theme = useTheme();
|
|
6327
|
-
return (jsx$1(Card$
|
|
6341
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel$1, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6328
6342
|
};
|
|
6329
6343
|
|
|
6330
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
6331
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6332
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6333
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6344
|
+
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"])));
|
|
6345
|
+
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; });
|
|
6346
|
+
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; });
|
|
6347
|
+
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"])));
|
|
6334
6348
|
var Simple = function (_a) {
|
|
6335
6349
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
6336
6350
|
var theme = useTheme();
|
|
6337
|
-
return (jsx$1(Card$
|
|
6351
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$13, { children: [jsx$1(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6338
6352
|
};
|
|
6339
|
-
var templateObject_1$
|
|
6353
|
+
var templateObject_1$1F, templateObject_2$1a, templateObject_3$X, templateObject_4$K;
|
|
6340
6354
|
|
|
6341
6355
|
var Bundle = {
|
|
6342
6356
|
Minimalistic: Minimalistic,
|
|
6343
6357
|
Simple: Simple,
|
|
6344
6358
|
};
|
|
6345
6359
|
|
|
6346
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
6360
|
+
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) {
|
|
6347
6361
|
var displayBNPL = _a.displayBNPL;
|
|
6348
6362
|
return (displayBNPL ? 'flex' : 'none');
|
|
6349
6363
|
});
|
|
6350
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6351
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6364
|
+
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"])));
|
|
6365
|
+
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"])));
|
|
6352
6366
|
var BuyNowPayLater = function (_a) {
|
|
6353
6367
|
var _b;
|
|
6354
6368
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -6360,41 +6374,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6360
6374
|
}
|
|
6361
6375
|
return (jsx$1(Container$12, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6362
6376
|
};
|
|
6363
|
-
var templateObject_1$
|
|
6377
|
+
var templateObject_1$1E, templateObject_2$19, templateObject_3$W;
|
|
6364
6378
|
|
|
6365
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6379
|
+
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; });
|
|
6366
6380
|
var Title$8 = function (_a) {
|
|
6367
6381
|
var title = _a.title;
|
|
6368
6382
|
var theme = useTheme();
|
|
6369
6383
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6370
6384
|
};
|
|
6371
|
-
var templateObject_1$
|
|
6385
|
+
var templateObject_1$1D;
|
|
6372
6386
|
|
|
6373
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6387
|
+
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; });
|
|
6374
6388
|
var Promo = function (_a) {
|
|
6375
6389
|
var text = _a.text;
|
|
6376
6390
|
var theme = useTheme();
|
|
6377
6391
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6378
6392
|
};
|
|
6379
|
-
var templateObject_1$
|
|
6393
|
+
var templateObject_1$1C;
|
|
6380
6394
|
|
|
6381
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6395
|
+
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; });
|
|
6382
6396
|
var Description$1 = function (_a) {
|
|
6383
6397
|
var text = _a.text;
|
|
6384
6398
|
var theme = useTheme();
|
|
6385
6399
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6386
6400
|
};
|
|
6387
|
-
var templateObject_1$
|
|
6401
|
+
var templateObject_1$1B;
|
|
6388
6402
|
|
|
6389
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
6403
|
+
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"); });
|
|
6390
6404
|
var CloseButton$1 = function (_a) {
|
|
6391
6405
|
var onClick = _a.onClick, size = _a.size;
|
|
6392
6406
|
var theme = useTheme();
|
|
6393
6407
|
return (jsx$1(Container$11, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6394
6408
|
};
|
|
6395
|
-
var templateObject_1$
|
|
6409
|
+
var templateObject_1$1A;
|
|
6396
6410
|
|
|
6397
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6411
|
+
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) {
|
|
6398
6412
|
var backgroundColor = _a.backgroundColor;
|
|
6399
6413
|
return backgroundColor;
|
|
6400
6414
|
}, function (_a) {
|
|
@@ -6409,7 +6423,7 @@ var OfferBanner = function (_a) {
|
|
|
6409
6423
|
var theme = useTheme();
|
|
6410
6424
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6411
6425
|
};
|
|
6412
|
-
var templateObject_1$
|
|
6426
|
+
var templateObject_1$1z;
|
|
6413
6427
|
|
|
6414
6428
|
var CartProductItem = {
|
|
6415
6429
|
Title: Title$8,
|
|
@@ -6419,12 +6433,12 @@ var CartProductItem = {
|
|
|
6419
6433
|
CloseButton: CloseButton$1,
|
|
6420
6434
|
};
|
|
6421
6435
|
|
|
6422
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
6423
|
-
var MobileContainer = newStyled(Container$10)(templateObject_2$
|
|
6424
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6425
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6426
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6427
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6436
|
+
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"])));
|
|
6437
|
+
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"])));
|
|
6438
|
+
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"])));
|
|
6439
|
+
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"])));
|
|
6440
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6441
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6428
6442
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6429
6443
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6430
6444
|
var ClubPriceLabel = function (_a) {
|
|
@@ -6432,7 +6446,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6432
6446
|
var isMobile = useWindowDimensions().isMobile;
|
|
6433
6447
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$10, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6434
6448
|
};
|
|
6435
|
-
var templateObject_1$
|
|
6449
|
+
var templateObject_1$1y, templateObject_2$18, templateObject_3$V, templateObject_4$J, templateObject_5$y, templateObject_6$t, templateObject_7$l, templateObject_8$g;
|
|
6436
6450
|
|
|
6437
6451
|
var Spacing = function (_a) {
|
|
6438
6452
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6440,10 +6454,10 @@ var Spacing = function (_a) {
|
|
|
6440
6454
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6441
6455
|
};
|
|
6442
6456
|
|
|
6443
|
-
var Container$$ = newStyled('div')(templateObject_1$
|
|
6444
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6445
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6446
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6457
|
+
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"])));
|
|
6458
|
+
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"])));
|
|
6459
|
+
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"])));
|
|
6460
|
+
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) {
|
|
6447
6461
|
var index = _a.index;
|
|
6448
6462
|
return "".concat(6 + 3 * index, "px");
|
|
6449
6463
|
}, function (_a) {
|
|
@@ -6454,13 +6468,13 @@ var StrengthBars = function (_a) {
|
|
|
6454
6468
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6455
6469
|
return (jsxs$1(Container$$, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6456
6470
|
};
|
|
6457
|
-
var templateObject_1$
|
|
6471
|
+
var templateObject_1$1x, templateObject_2$17, templateObject_3$U, templateObject_4$I;
|
|
6458
6472
|
|
|
6459
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6460
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6461
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6462
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6463
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6473
|
+
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"])));
|
|
6474
|
+
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"])));
|
|
6475
|
+
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"])));
|
|
6476
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6477
|
+
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"])));
|
|
6464
6478
|
var RegularPriceTag = function () {
|
|
6465
6479
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6466
6480
|
};
|
|
@@ -6513,12 +6527,12 @@ var PriceLabelV4 = function (_a) {
|
|
|
6513
6527
|
? finalPriceArray[0]
|
|
6514
6528
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$2, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6515
6529
|
};
|
|
6516
|
-
var templateObject_1$
|
|
6530
|
+
var templateObject_1$1w, templateObject_2$16, templateObject_3$T, templateObject_4$H, templateObject_5$x;
|
|
6517
6531
|
|
|
6518
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
6519
|
-
var templateObject_1$
|
|
6532
|
+
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"])));
|
|
6533
|
+
var templateObject_1$1v;
|
|
6520
6534
|
|
|
6521
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6535
|
+
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) {
|
|
6522
6536
|
var marginRight = _a.marginRight;
|
|
6523
6537
|
return marginRight;
|
|
6524
6538
|
});
|
|
@@ -6534,7 +6548,7 @@ var StarList = function (_a) {
|
|
|
6534
6548
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6535
6549
|
}) }, void 0));
|
|
6536
6550
|
};
|
|
6537
|
-
var templateObject_1$
|
|
6551
|
+
var templateObject_1$1u;
|
|
6538
6552
|
|
|
6539
6553
|
/* base styles & size variants */
|
|
6540
6554
|
var LabelStyles = {
|
|
@@ -6575,8 +6589,8 @@ var LabelStyles = {
|
|
|
6575
6589
|
});
|
|
6576
6590
|
},
|
|
6577
6591
|
};
|
|
6578
|
-
var Container$Z = newStyled.a(templateObject_1$
|
|
6579
|
-
var templateObject_1$
|
|
6592
|
+
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"])));
|
|
6593
|
+
var templateObject_1$1t;
|
|
6580
6594
|
|
|
6581
6595
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6582
6596
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6596,7 +6610,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6596
6610
|
}),
|
|
6597
6611
|
];
|
|
6598
6612
|
});
|
|
6599
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6613
|
+
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; });
|
|
6600
6614
|
var starsNumber = 5;
|
|
6601
6615
|
var Rating = function (_a) {
|
|
6602
6616
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6619,7 +6633,7 @@ var Rating = function (_a) {
|
|
|
6619
6633
|
: {};
|
|
6620
6634
|
return (jsxs$1(Container$Z, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6621
6635
|
};
|
|
6622
|
-
var templateObject_1$
|
|
6636
|
+
var templateObject_1$1s;
|
|
6623
6637
|
|
|
6624
6638
|
var ImageContainer$6 = newStyled.div(function (_a) {
|
|
6625
6639
|
var width = _a.width, height = _a.height;
|
|
@@ -6629,10 +6643,10 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6629
6643
|
height: height,
|
|
6630
6644
|
});
|
|
6631
6645
|
});
|
|
6632
|
-
var ImageHoverContainer$3 = newStyled.img(templateObject_1$
|
|
6633
|
-
var Container$Y = newStyled.a(templateObject_2$
|
|
6634
|
-
var ProdCardContainer$4 = newStyled.div(templateObject_3$
|
|
6635
|
-
var Title$7 = newStyled.p(templateObject_4$
|
|
6646
|
+
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"])));
|
|
6647
|
+
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"])));
|
|
6648
|
+
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"])));
|
|
6649
|
+
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; });
|
|
6636
6650
|
var getStylesBySize$c = function (size) {
|
|
6637
6651
|
switch (size) {
|
|
6638
6652
|
case ComponentSize.Medium:
|
|
@@ -6658,11 +6672,11 @@ var getStylesBySize$c = function (size) {
|
|
|
6658
6672
|
};
|
|
6659
6673
|
}
|
|
6660
6674
|
};
|
|
6661
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
6675
|
+
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) {
|
|
6662
6676
|
var style = _a.style;
|
|
6663
6677
|
return style.width;
|
|
6664
6678
|
});
|
|
6665
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_6$
|
|
6679
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6666
6680
|
var style = _a.style;
|
|
6667
6681
|
return style.width;
|
|
6668
6682
|
});
|
|
@@ -6727,7 +6741,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6727
6741
|
letterSpacing: '-0.05rem',
|
|
6728
6742
|
} }), void 0)) }), void 0)), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6729
6743
|
};
|
|
6730
|
-
var templateObject_1$
|
|
6744
|
+
var templateObject_1$1r, templateObject_2$15, templateObject_3$S, templateObject_4$G, templateObject_5$w, templateObject_6$s, templateObject_7$k;
|
|
6731
6745
|
|
|
6732
6746
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6733
6747
|
var width = _a.width, height = _a.height;
|
|
@@ -6737,10 +6751,10 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
6737
6751
|
height: height,
|
|
6738
6752
|
});
|
|
6739
6753
|
});
|
|
6740
|
-
var ImageHoverContainer$2 = newStyled.img(templateObject_1$
|
|
6741
|
-
var Container$X = newStyled.a(templateObject_2$
|
|
6742
|
-
var ProdCardContainer$3 = newStyled.div(templateObject_3$
|
|
6743
|
-
var Title$6 = newStyled.p(templateObject_4$
|
|
6754
|
+
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; });
|
|
6755
|
+
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"])));
|
|
6756
|
+
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"])));
|
|
6757
|
+
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; });
|
|
6744
6758
|
var getStylesBySize$b = function (size) {
|
|
6745
6759
|
switch (size) {
|
|
6746
6760
|
case ComponentSize.Medium:
|
|
@@ -6766,11 +6780,11 @@ var getStylesBySize$b = function (size) {
|
|
|
6766
6780
|
};
|
|
6767
6781
|
}
|
|
6768
6782
|
};
|
|
6769
|
-
var TopTagContainer$7 = newStyled.div(templateObject_5$
|
|
6783
|
+
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) {
|
|
6770
6784
|
var style = _a.style;
|
|
6771
6785
|
return style.width;
|
|
6772
6786
|
});
|
|
6773
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6787
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6774
6788
|
var BottomTagContainer$7 = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6775
6789
|
var style = _a.style;
|
|
6776
6790
|
return style.width;
|
|
@@ -6826,9 +6840,9 @@ var ProductItemTK = function (_a) {
|
|
|
6826
6840
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6827
6841
|
} }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6828
6842
|
};
|
|
6829
|
-
var templateObject_1$
|
|
6843
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$F, templateObject_5$v, templateObject_6$r, templateObject_7$j, templateObject_8$f;
|
|
6830
6844
|
|
|
6831
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
6845
|
+
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"])));
|
|
6832
6846
|
function withProductGrid(ProductItemComponent, data) {
|
|
6833
6847
|
function WithProductGrid(props) {
|
|
6834
6848
|
return (jsx$1(Container$W, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6838,7 +6852,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6838
6852
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6839
6853
|
return WithProductGrid;
|
|
6840
6854
|
}
|
|
6841
|
-
var templateObject_1$
|
|
6855
|
+
var templateObject_1$1p;
|
|
6842
6856
|
|
|
6843
6857
|
var Collection = {
|
|
6844
6858
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6885,11 +6899,11 @@ var OutOfStock = function (_a) {
|
|
|
6885
6899
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6886
6900
|
};
|
|
6887
6901
|
|
|
6888
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6889
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6890
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6891
|
-
var Span = newStyled.span(templateObject_4$
|
|
6892
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6902
|
+
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"])));
|
|
6903
|
+
newStyled(lt.Label)(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6904
|
+
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"])));
|
|
6905
|
+
var Span = newStyled.span(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6906
|
+
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"])));
|
|
6893
6907
|
var Label$4 = function (_a) {
|
|
6894
6908
|
var label = _a.label, values = _a.values;
|
|
6895
6909
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -6907,23 +6921,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6907
6921
|
Option: Option,
|
|
6908
6922
|
OptionsContainer: OptionsContainer,
|
|
6909
6923
|
});
|
|
6910
|
-
var templateObject_1$
|
|
6924
|
+
var templateObject_1$1o, templateObject_2$13, templateObject_3$Q, templateObject_4$E, templateObject_5$u;
|
|
6911
6925
|
|
|
6912
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6926
|
+
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) {
|
|
6913
6927
|
var borderColor = _a.borderColor;
|
|
6914
6928
|
return borderColor;
|
|
6915
6929
|
}, function (_a) {
|
|
6916
6930
|
var noStock = _a.noStock;
|
|
6917
6931
|
return (noStock ? '0.4' : '1');
|
|
6918
6932
|
});
|
|
6919
|
-
var Image$2 = newStyled.img(templateObject_2
|
|
6933
|
+
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"])));
|
|
6920
6934
|
var PatternSelector = function (_a) {
|
|
6921
6935
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6922
6936
|
var theme = useTheme();
|
|
6923
6937
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6924
6938
|
return (jsx$1(Container$V, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6925
6939
|
};
|
|
6926
|
-
var templateObject_1$
|
|
6940
|
+
var templateObject_1$1n, templateObject_2$12;
|
|
6927
6941
|
|
|
6928
6942
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6929
6943
|
if (options == null || options.length === 0) {
|
|
@@ -6982,21 +6996,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6982
6996
|
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
|
|
6983
6997
|
};
|
|
6984
6998
|
|
|
6985
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6986
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6987
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6999
|
+
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'); });
|
|
7000
|
+
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"])));
|
|
7001
|
+
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) {
|
|
6988
7002
|
return props.rightToLeft &&
|
|
6989
7003
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6990
7004
|
});
|
|
6991
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6992
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6993
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
7005
|
+
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; });
|
|
7006
|
+
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; });
|
|
7007
|
+
var FreeShipping = newStyled.span(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6994
7008
|
var CrossSellCheckbox = function (_a) {
|
|
6995
7009
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6996
7010
|
var theme = useTheme();
|
|
6997
7011
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6998
7012
|
};
|
|
6999
|
-
var templateObject_1$
|
|
7013
|
+
var templateObject_1$1m, templateObject_2$11, templateObject_3$P, templateObject_4$D, templateObject_5$t, templateObject_6$q;
|
|
7000
7014
|
|
|
7001
7015
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7002
7016
|
__proto__: null,
|
|
@@ -7024,7 +7038,7 @@ var sizeMapper = (_a = {},
|
|
|
7024
7038
|
_a[ComponentSize.Large] = 'large',
|
|
7025
7039
|
_a[ComponentSize.XSmall] = 'small',
|
|
7026
7040
|
_a);
|
|
7027
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
7041
|
+
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) {
|
|
7028
7042
|
var wide = _a.wide;
|
|
7029
7043
|
return (wide ? '100%' : 'fit-content');
|
|
7030
7044
|
}, function (_a) {
|
|
@@ -7046,11 +7060,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1i || (templateObj
|
|
|
7046
7060
|
var theme = _a.theme;
|
|
7047
7061
|
return theme.colors.text.disabled;
|
|
7048
7062
|
});
|
|
7049
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
7063
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
7050
7064
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
7051
7065
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
7052
7066
|
});
|
|
7053
|
-
var templateObject_1$
|
|
7067
|
+
var templateObject_1$1l, templateObject_2$10;
|
|
7054
7068
|
|
|
7055
7069
|
var BaseCTA = function (_a) {
|
|
7056
7070
|
var _b, _c, _d;
|
|
@@ -7137,38 +7151,38 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7137
7151
|
} }), void 0));
|
|
7138
7152
|
};
|
|
7139
7153
|
|
|
7140
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
7141
|
-
var IconContainer$4 = newStyled.div(templateObject_2
|
|
7142
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7143
|
-
var Details = newStyled.span(templateObject_4$
|
|
7154
|
+
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; });
|
|
7155
|
+
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"])));
|
|
7156
|
+
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; });
|
|
7157
|
+
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; });
|
|
7144
7158
|
var Note = function (_a) {
|
|
7145
7159
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7146
7160
|
var theme = useTheme();
|
|
7147
7161
|
return (jsxs$1(Container$U, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7148
7162
|
};
|
|
7149
|
-
var templateObject_1$
|
|
7163
|
+
var templateObject_1$1k, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
7150
7164
|
|
|
7151
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
7165
|
+
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) {
|
|
7152
7166
|
var theme = _a.theme;
|
|
7153
7167
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
7154
7168
|
});
|
|
7155
|
-
var Line = newStyled.div(templateObject_2$
|
|
7156
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7169
|
+
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; });
|
|
7170
|
+
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({
|
|
7157
7171
|
flexDirection: ['column', 'row'],
|
|
7158
7172
|
}));
|
|
7159
|
-
var Col = newStyled.div(templateObject_4$
|
|
7173
|
+
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({
|
|
7160
7174
|
margin: ['0', '0 1.25rem'],
|
|
7161
7175
|
marginBottom: ['1.875rem', '0'],
|
|
7162
7176
|
alignItems: ['center', 'flex-start'],
|
|
7163
7177
|
textAlign: ['center', 'inherit'],
|
|
7164
7178
|
width: ['100%', 'inherit'],
|
|
7165
7179
|
}));
|
|
7166
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
7180
|
+
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({
|
|
7167
7181
|
marginRight: ['0', '0.438rem'],
|
|
7168
7182
|
marginBottom: ['10px', '0'],
|
|
7169
7183
|
width: ['auto', '1.5rem'],
|
|
7170
7184
|
}));
|
|
7171
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7185
|
+
var SectionTitle = newStyled.h1(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7172
7186
|
display: ['block', 'flex'],
|
|
7173
7187
|
}), function (_a) {
|
|
7174
7188
|
var theme = _a.theme;
|
|
@@ -7191,16 +7205,16 @@ var DeliveryDetails = function (_a) {
|
|
|
7191
7205
|
var theme = useTheme();
|
|
7192
7206
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
7193
7207
|
};
|
|
7194
|
-
var templateObject_1$
|
|
7208
|
+
var templateObject_1$1j, templateObject_2$_, templateObject_3$N, templateObject_4$B, templateObject_5$s, templateObject_6$p, templateObject_7$i, templateObject_8$e;
|
|
7195
7209
|
|
|
7196
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7210
|
+
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) {
|
|
7197
7211
|
var top = _a.top;
|
|
7198
7212
|
return top;
|
|
7199
7213
|
}, function (_a) {
|
|
7200
7214
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7201
7215
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7202
7216
|
});
|
|
7203
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7217
|
+
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) {
|
|
7204
7218
|
var height = _a.height;
|
|
7205
7219
|
return height;
|
|
7206
7220
|
}, function (_a) {
|
|
@@ -7247,20 +7261,20 @@ var Drawer = function (_a) {
|
|
|
7247
7261
|
}, [isOpen, onClose, onOpen]);
|
|
7248
7262
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7249
7263
|
};
|
|
7250
|
-
var templateObject_1$
|
|
7264
|
+
var templateObject_1$1i, templateObject_2$Z;
|
|
7251
7265
|
|
|
7252
7266
|
var TooltipArrow = function (_a) {
|
|
7253
7267
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7254
7268
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7255
7269
|
};
|
|
7256
7270
|
|
|
7257
|
-
var List = newStyled.ul(templateObject_1$
|
|
7258
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7259
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7260
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7261
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7262
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7263
|
-
var templateObject_1$
|
|
7271
|
+
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"])));
|
|
7272
|
+
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"])));
|
|
7273
|
+
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"])));
|
|
7274
|
+
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"])));
|
|
7275
|
+
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; });
|
|
7276
|
+
var DropdownItem = newStyled.li(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
7277
|
+
var templateObject_1$1h, templateObject_2$Y, templateObject_3$M, templateObject_4$A, templateObject_5$r, templateObject_6$o;
|
|
7264
7278
|
|
|
7265
7279
|
var DropdownListIcons = function (_a) {
|
|
7266
7280
|
var items = _a.items;
|
|
@@ -7273,13 +7287,13 @@ var Dropdown = function (_a) {
|
|
|
7273
7287
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
7274
7288
|
};
|
|
7275
7289
|
|
|
7276
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7277
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7278
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7279
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7280
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7281
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7282
|
-
var templateObject_1$
|
|
7290
|
+
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"])));
|
|
7291
|
+
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"])));
|
|
7292
|
+
var SizeLabel = newStyled.span(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7293
|
+
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"])));
|
|
7294
|
+
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"])));
|
|
7295
|
+
var DropdownOption = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
7296
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$z, templateObject_5$q, templateObject_6$n;
|
|
7283
7297
|
|
|
7284
7298
|
var SizeDropdown = function (_a) {
|
|
7285
7299
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7302,10 +7316,10 @@ var SizeDropdown = function (_a) {
|
|
|
7302
7316
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7303
7317
|
};
|
|
7304
7318
|
|
|
7305
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7306
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7307
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7308
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7319
|
+
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; });
|
|
7320
|
+
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; });
|
|
7321
|
+
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"])));
|
|
7322
|
+
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"])));
|
|
7309
7323
|
var DropdownDialog = function (_a) {
|
|
7310
7324
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7311
7325
|
var theme = useTheme$1();
|
|
@@ -7314,7 +7328,7 @@ var DropdownDialog = function (_a) {
|
|
|
7314
7328
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7315
7329
|
}) }), void 0) }), void 0));
|
|
7316
7330
|
};
|
|
7317
|
-
var templateObject_1$
|
|
7331
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$K, templateObject_4$y;
|
|
7318
7332
|
|
|
7319
7333
|
function FilteringDropdown(_a) {
|
|
7320
7334
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -7347,29 +7361,29 @@ function FilteringDropdown(_a) {
|
|
|
7347
7361
|
}) }, void 0)] }), void 0));
|
|
7348
7362
|
}
|
|
7349
7363
|
|
|
7350
|
-
var Title$4 = newStyled.div(templateObject_1$
|
|
7351
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7352
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7353
|
-
var Container$T = newStyled.div(templateObject_4$
|
|
7364
|
+
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; });
|
|
7365
|
+
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; });
|
|
7366
|
+
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"])));
|
|
7367
|
+
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'); });
|
|
7354
7368
|
var Accordion = function (_a) {
|
|
7355
7369
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
7356
7370
|
var theme = useTheme();
|
|
7357
7371
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7358
7372
|
return (jsxs$1(Container$T, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$4, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7359
7373
|
};
|
|
7360
|
-
var templateObject_1$
|
|
7361
|
-
|
|
7362
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7363
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7364
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7365
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7366
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7367
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7374
|
+
var templateObject_1$1e, templateObject_2$V, templateObject_3$J, templateObject_4$x;
|
|
7375
|
+
|
|
7376
|
+
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; });
|
|
7377
|
+
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"])));
|
|
7378
|
+
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"])));
|
|
7379
|
+
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"])));
|
|
7380
|
+
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; });
|
|
7381
|
+
var FilterLink = newStyled.a(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
7368
7382
|
var OptionContainer = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
7369
7383
|
var ClearAll = newStyled.span(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
7370
7384
|
var MobileFooter = newStyled.div(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7371
7385
|
var MobileClearContainer = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
7372
|
-
var templateObject_1$
|
|
7386
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$w, templateObject_5$p, templateObject_6$m, templateObject_7$h, templateObject_8$d, templateObject_9$8, templateObject_10$7;
|
|
7373
7387
|
|
|
7374
7388
|
var getStylesBySize$a = function (size, theme) {
|
|
7375
7389
|
switch (size) {
|
|
@@ -7434,9 +7448,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7434
7448
|
} }), id: id }, void 0));
|
|
7435
7449
|
};
|
|
7436
7450
|
|
|
7437
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7438
|
-
var LI = newStyled.li(templateObject_2$
|
|
7439
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7451
|
+
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"])));
|
|
7452
|
+
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; });
|
|
7453
|
+
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"])));
|
|
7440
7454
|
var Tags = function (_a) {
|
|
7441
7455
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7442
7456
|
var theme = useTheme();
|
|
@@ -7444,7 +7458,7 @@ var Tags = function (_a) {
|
|
|
7444
7458
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7445
7459
|
}) }), void 0));
|
|
7446
7460
|
};
|
|
7447
|
-
var templateObject_1$
|
|
7461
|
+
var templateObject_1$1c, templateObject_2$T, templateObject_3$H;
|
|
7448
7462
|
|
|
7449
7463
|
var Filters = function (_a) {
|
|
7450
7464
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -7580,8 +7594,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7580
7594
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7581
7595
|
};
|
|
7582
7596
|
|
|
7583
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7584
|
-
var Container$S = newStyled.div(templateObject_2$
|
|
7597
|
+
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"])));
|
|
7598
|
+
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"])));
|
|
7585
7599
|
var FitGuarantee = function (_a) {
|
|
7586
7600
|
var _b;
|
|
7587
7601
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -7592,17 +7606,17 @@ var FitGuarantee = function (_a) {
|
|
|
7592
7606
|
console.error('Icon', iconName, 'not found');
|
|
7593
7607
|
return null;
|
|
7594
7608
|
}
|
|
7595
|
-
return (jsx$1(Card$
|
|
7609
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$S, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$S, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7596
7610
|
margin: '0.1rem 0',
|
|
7597
7611
|
width: '100%',
|
|
7598
7612
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7599
7613
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7600
7614
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7601
7615
|
};
|
|
7602
|
-
var templateObject_1$
|
|
7616
|
+
var templateObject_1$1b, templateObject_2$S;
|
|
7603
7617
|
|
|
7604
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
7605
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7618
|
+
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"])));
|
|
7619
|
+
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; });
|
|
7606
7620
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7607
7621
|
border: 'none',
|
|
7608
7622
|
background: 'transparent',
|
|
@@ -7617,7 +7631,7 @@ var FitPredictor = function (_a) {
|
|
|
7617
7631
|
var theme = useTheme();
|
|
7618
7632
|
return (jsxs(Container$R, __assign$1({ theme: theme }, { children: [jsx(Container$R, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7619
7633
|
};
|
|
7620
|
-
var templateObject_1$
|
|
7634
|
+
var templateObject_1$1a, templateObject_2$R;
|
|
7621
7635
|
|
|
7622
7636
|
var Button$7 = newStyled.button(function () { return ({
|
|
7623
7637
|
background: 'transparent',
|
|
@@ -11861,14 +11875,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11861
11875
|
return Slider;
|
|
11862
11876
|
}(React__default.Component);
|
|
11863
11877
|
|
|
11864
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11878
|
+
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) {
|
|
11865
11879
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11866
11880
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11867
11881
|
}, function (_a) {
|
|
11868
11882
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11869
11883
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11870
11884
|
});
|
|
11871
|
-
var templateObject_1$
|
|
11885
|
+
var templateObject_1$19;
|
|
11872
11886
|
|
|
11873
11887
|
var getStylesBySize$9 = function (size) {
|
|
11874
11888
|
// rem units
|
|
@@ -11927,7 +11941,7 @@ var SliderNavigation = function (_a) {
|
|
|
11927
11941
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
11928
11942
|
};
|
|
11929
11943
|
|
|
11930
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11944
|
+
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) {
|
|
11931
11945
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11932
11946
|
return borderRadiusVariant &&
|
|
11933
11947
|
"\n border-radius: 20px;\n ";
|
|
@@ -11945,7 +11959,7 @@ var Image$1 = newStyled.img(templateObject_1$15 || (templateObject_1$15 = __make
|
|
|
11945
11959
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11946
11960
|
: 'inherit';
|
|
11947
11961
|
});
|
|
11948
|
-
var templateObject_1$
|
|
11962
|
+
var templateObject_1$18;
|
|
11949
11963
|
|
|
11950
11964
|
var ImageSmallPreview = function (_a) {
|
|
11951
11965
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, isRatioSquare = _a.isRatioSquare;
|
|
@@ -11953,9 +11967,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11953
11967
|
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: "eager", width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height, isRatioSquare: isRatioSquare }, void 0));
|
|
11954
11968
|
};
|
|
11955
11969
|
|
|
11956
|
-
var horizontalStyles = css(templateObject_1$
|
|
11957
|
-
var verticalStyles = css(templateObject_2$
|
|
11958
|
-
var Container$Q = newStyled.div(templateObject_3$
|
|
11970
|
+
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"])));
|
|
11971
|
+
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"])));
|
|
11972
|
+
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) {
|
|
11959
11973
|
var position = _a.position;
|
|
11960
11974
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11961
11975
|
}, function (_a) {
|
|
@@ -11963,12 +11977,12 @@ var Container$Q = newStyled.div(templateObject_3$D || (templateObject_3$D = __ma
|
|
|
11963
11977
|
return hasOverflowArrows &&
|
|
11964
11978
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11965
11979
|
});
|
|
11966
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
11967
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11968
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11980
|
+
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"])));
|
|
11981
|
+
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"])));
|
|
11982
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
11969
11983
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
11970
11984
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
11971
|
-
var templateObject_1$
|
|
11985
|
+
var templateObject_1$17, templateObject_2$Q, templateObject_3$G, templateObject_4$v, templateObject_5$o, templateObject_6$l, templateObject_7$g, templateObject_8$c;
|
|
11972
11986
|
|
|
11973
11987
|
var ImagePreviewList = function (_a) {
|
|
11974
11988
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare;
|
|
@@ -13578,22 +13592,22 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13578
13592
|
afterZoomOut: PropTypes.func
|
|
13579
13593
|
} : {};
|
|
13580
13594
|
|
|
13581
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13582
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13583
|
-
var templateObject_1$
|
|
13595
|
+
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); });
|
|
13596
|
+
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; });
|
|
13597
|
+
var templateObject_1$16, templateObject_2$P;
|
|
13584
13598
|
|
|
13585
13599
|
var ProgressBar$1 = function (_a) {
|
|
13586
13600
|
var progress = _a.progress, hide = _a.hide;
|
|
13587
13601
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13588
13602
|
};
|
|
13589
13603
|
|
|
13590
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
13591
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13592
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13593
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
13594
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
13595
|
-
var MuteButton = newStyled.button(templateObject_6$
|
|
13596
|
-
var templateObject_1$
|
|
13604
|
+
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"])));
|
|
13605
|
+
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; });
|
|
13606
|
+
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"])));
|
|
13607
|
+
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"])));
|
|
13608
|
+
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"])));
|
|
13609
|
+
var MuteButton = newStyled.button(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
13610
|
+
var templateObject_1$15, templateObject_2$O, templateObject_3$F, templateObject_4$u, templateObject_5$n, templateObject_6$k;
|
|
13597
13611
|
|
|
13598
13612
|
var Video$1 = function (_a) {
|
|
13599
13613
|
var _b, _c, _d, _e;
|
|
@@ -13642,24 +13656,24 @@ var Video$1 = function (_a) {
|
|
|
13642
13656
|
return (jsxs$1(Container$P, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: true, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13643
13657
|
};
|
|
13644
13658
|
|
|
13645
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
13659
|
+
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) {
|
|
13646
13660
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13647
13661
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13648
13662
|
});
|
|
13649
|
-
var TopTagContainer$6 = newStyled.div(templateObject_2$
|
|
13663
|
+
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) {
|
|
13650
13664
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13651
13665
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13652
13666
|
}, function (_a) {
|
|
13653
13667
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13654
13668
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13655
13669
|
});
|
|
13656
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_3$
|
|
13670
|
+
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) {
|
|
13657
13671
|
var isCTAHidden = _a.isCTAHidden;
|
|
13658
13672
|
return (isCTAHidden ? '60px' : '120px');
|
|
13659
13673
|
});
|
|
13660
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13661
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13662
|
-
var templateObject_1$
|
|
13674
|
+
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"])));
|
|
13675
|
+
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"])));
|
|
13676
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$t, templateObject_5$m;
|
|
13663
13677
|
|
|
13664
13678
|
var ImageProductSlide$1 = function (_a) {
|
|
13665
13679
|
var _b;
|
|
@@ -13672,8 +13686,8 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13672
13686
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsx$1(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager" }, void 0)), jsx$1(TopTagContainer$6, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$6, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13673
13687
|
};
|
|
13674
13688
|
|
|
13675
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
13676
|
-
var templateObject_1$
|
|
13689
|
+
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"])));
|
|
13690
|
+
var templateObject_1$13;
|
|
13677
13691
|
|
|
13678
13692
|
var getInitialIndex = function (images, selectedValue) {
|
|
13679
13693
|
if (selectedValue) {
|
|
@@ -13721,7 +13735,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13721
13735
|
};
|
|
13722
13736
|
}
|
|
13723
13737
|
};
|
|
13724
|
-
var Container$M = newStyled.div(templateObject_1
|
|
13738
|
+
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) {
|
|
13725
13739
|
var backgroundColor = _a.backgroundColor;
|
|
13726
13740
|
return backgroundColor;
|
|
13727
13741
|
}, function (_a) {
|
|
@@ -13751,9 +13765,9 @@ var IconButton = function (_a) {
|
|
|
13751
13765
|
var theme = useTheme();
|
|
13752
13766
|
return (jsx$1(Container$M, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13753
13767
|
};
|
|
13754
|
-
var templateObject_1
|
|
13768
|
+
var templateObject_1$12;
|
|
13755
13769
|
|
|
13756
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13770
|
+
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; });
|
|
13757
13771
|
var AmazonButton = function (_a) {
|
|
13758
13772
|
var onClick = _a.onClick;
|
|
13759
13773
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13762,7 +13776,7 @@ var PaypalButton = function (_a) {
|
|
|
13762
13776
|
var onClick = _a.onClick;
|
|
13763
13777
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13764
13778
|
};
|
|
13765
|
-
var templateObject_1$
|
|
13779
|
+
var templateObject_1$11;
|
|
13766
13780
|
|
|
13767
13781
|
var Container$L = newStyled.div(function (props) { return ({
|
|
13768
13782
|
height: 'auto',
|
|
@@ -13817,9 +13831,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13817
13831
|
return (jsx$1(Fragment$2, { children: jsxs$1(Container$L, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13818
13832
|
};
|
|
13819
13833
|
|
|
13820
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
13821
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13822
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13834
|
+
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'); });
|
|
13835
|
+
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'); });
|
|
13836
|
+
var StyledTitle = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13823
13837
|
var titlePosition = _a.titlePosition;
|
|
13824
13838
|
return titlePosition == 'center' &&
|
|
13825
13839
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13829,13 +13843,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13829
13843
|
var isMobile = useWindowDimensions().isMobile;
|
|
13830
13844
|
return (jsxs$1(Container$K, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$4, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13831
13845
|
};
|
|
13832
|
-
var templateObject_1$
|
|
13846
|
+
var templateObject_1$10, templateObject_2$M, templateObject_3$D;
|
|
13833
13847
|
|
|
13834
|
-
var Label$3 = newStyled.span(templateObject_1
|
|
13848
|
+
var Label$3 = newStyled.span(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
13835
13849
|
var color = _a.color;
|
|
13836
13850
|
return color;
|
|
13837
13851
|
});
|
|
13838
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13852
|
+
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) {
|
|
13839
13853
|
var color = _a.color;
|
|
13840
13854
|
return color;
|
|
13841
13855
|
});
|
|
@@ -13844,7 +13858,7 @@ var InputLabel = function (_a) {
|
|
|
13844
13858
|
var theme = useTheme();
|
|
13845
13859
|
return (jsxs$1(Label$3, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13846
13860
|
};
|
|
13847
|
-
var templateObject_1
|
|
13861
|
+
var templateObject_1$$, templateObject_2$L;
|
|
13848
13862
|
|
|
13849
13863
|
var containerByStatus = function (theme, status) {
|
|
13850
13864
|
if (status === InputValidationType.Valid)
|
|
@@ -13853,12 +13867,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13853
13867
|
return theme.colors.semantic.urgent.color;
|
|
13854
13868
|
return '';
|
|
13855
13869
|
};
|
|
13856
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13870
|
+
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) {
|
|
13857
13871
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13858
13872
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13859
13873
|
});
|
|
13860
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13861
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13874
|
+
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"])));
|
|
13875
|
+
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) {
|
|
13862
13876
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13863
13877
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13864
13878
|
}, function (_a) {
|
|
@@ -13913,11 +13927,11 @@ var StyledInput = newStyled.input(templateObject_3$z || (templateObject_3$z = __
|
|
|
13913
13927
|
return hasValue &&
|
|
13914
13928
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13915
13929
|
});
|
|
13916
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13930
|
+
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) {
|
|
13917
13931
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13918
13932
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13919
13933
|
});
|
|
13920
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13934
|
+
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) {
|
|
13921
13935
|
var theme = _a.theme;
|
|
13922
13936
|
return theme.component.input.placeholderColor;
|
|
13923
13937
|
}, function (_a) {
|
|
@@ -13930,8 +13944,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$j || (templateObject_5
|
|
|
13930
13944
|
var theme = _a.theme;
|
|
13931
13945
|
return theme.component.input.lineHeight;
|
|
13932
13946
|
});
|
|
13933
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13934
|
-
var templateObject_1$
|
|
13947
|
+
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"])));
|
|
13948
|
+
var templateObject_1$_, templateObject_2$K, templateObject_3$C, templateObject_4$s, templateObject_5$l, templateObject_6$j;
|
|
13935
13949
|
|
|
13936
13950
|
var BaseInput = function (_a) {
|
|
13937
13951
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -13954,7 +13968,7 @@ var BaseInput = function (_a) {
|
|
|
13954
13968
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13955
13969
|
}, [status]);
|
|
13956
13970
|
var hasValue = Boolean(value);
|
|
13957
|
-
return (jsxs$1(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13971
|
+
return (jsxs$1(Container$J, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper$1, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13958
13972
|
onChange(event.target.value, event);
|
|
13959
13973
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
13960
13974
|
onChange('', { target: { value: '' } });
|
|
@@ -13975,11 +13989,11 @@ var Button$5 = function (_a) {
|
|
|
13975
13989
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13976
13990
|
};
|
|
13977
13991
|
|
|
13978
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
13992
|
+
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) {
|
|
13979
13993
|
var theme = _a.theme;
|
|
13980
13994
|
return theme.component.inputCustom.input.borderRadius;
|
|
13981
13995
|
});
|
|
13982
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13996
|
+
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) {
|
|
13983
13997
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13984
13998
|
return defaultRounded
|
|
13985
13999
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13996,21 +14010,21 @@ var Custom = function (_a) {
|
|
|
13996
14010
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13997
14011
|
return (jsx$1(Container$I, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13998
14012
|
};
|
|
13999
|
-
var templateObject_1$
|
|
14013
|
+
var templateObject_1$Z, templateObject_2$J;
|
|
14000
14014
|
|
|
14001
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14015
|
+
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) {
|
|
14002
14016
|
var size = _a.size;
|
|
14003
14017
|
return (size === 'small' ? '36px' : '');
|
|
14004
14018
|
});
|
|
14005
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14006
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14019
|
+
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"])));
|
|
14020
|
+
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"])));
|
|
14007
14021
|
var Success = function (_a) {
|
|
14008
14022
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14009
14023
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
14010
14024
|
};
|
|
14011
|
-
var templateObject_1$
|
|
14025
|
+
var templateObject_1$Y, templateObject_2$I, templateObject_3$B;
|
|
14012
14026
|
|
|
14013
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14027
|
+
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) {
|
|
14014
14028
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14015
14029
|
return status === InputValidationType.Empty &&
|
|
14016
14030
|
type === 'primary' &&
|
|
@@ -14027,16 +14041,16 @@ var BasePlusButton = function (_a) {
|
|
|
14027
14041
|
}
|
|
14028
14042
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
14029
14043
|
};
|
|
14030
|
-
var templateObject_1$
|
|
14044
|
+
var templateObject_1$X;
|
|
14031
14045
|
|
|
14032
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14033
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14046
|
+
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"])));
|
|
14047
|
+
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"])));
|
|
14034
14048
|
var BasePlusIcon = function (_a) {
|
|
14035
14049
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14036
14050
|
var theme = useTheme();
|
|
14037
14051
|
return (jsx$1(Container$H, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
14038
14052
|
};
|
|
14039
|
-
var templateObject_1$
|
|
14053
|
+
var templateObject_1$W, templateObject_2$H;
|
|
14040
14054
|
|
|
14041
14055
|
var Input$3 = {
|
|
14042
14056
|
Simple: BaseInput,
|
|
@@ -14081,7 +14095,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14081
14095
|
}, [preventTouch, ref, touchStart]);
|
|
14082
14096
|
}
|
|
14083
14097
|
|
|
14084
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14098
|
+
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) {
|
|
14085
14099
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14086
14100
|
return borderRadiusVariant &&
|
|
14087
14101
|
"\n border-radius: 40px;\n ";
|
|
@@ -14090,11 +14104,11 @@ var Container$G = newStyled.div(templateObject_1$S || (templateObject_1$S = __ma
|
|
|
14090
14104
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14091
14105
|
});
|
|
14092
14106
|
// max-height: 31.875rem;
|
|
14093
|
-
var TopTagContainer$5 = newStyled.div(templateObject_2$
|
|
14094
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
14095
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_4$
|
|
14096
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
14097
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
14107
|
+
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'); });
|
|
14108
|
+
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"])));
|
|
14109
|
+
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"])));
|
|
14110
|
+
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"])));
|
|
14111
|
+
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"])));
|
|
14098
14112
|
var settings$1 = {
|
|
14099
14113
|
dots: true,
|
|
14100
14114
|
infinite: false,
|
|
@@ -14153,16 +14167,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14153
14167
|
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$5, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$5, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14154
14168
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14155
14169
|
};
|
|
14156
|
-
var templateObject_1$
|
|
14170
|
+
var templateObject_1$V, templateObject_2$G, templateObject_3$A, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
14157
14171
|
|
|
14158
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14172
|
+
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"])));
|
|
14159
14173
|
var ProductGalleryMobile = function (_a) {
|
|
14160
14174
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c;
|
|
14161
14175
|
var _d = useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14162
14176
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14163
14177
|
return (jsx$1(Container$F, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); } }, void 0) }), void 0));
|
|
14164
14178
|
};
|
|
14165
|
-
var templateObject_1$
|
|
14179
|
+
var templateObject_1$U;
|
|
14166
14180
|
|
|
14167
14181
|
function _extends() {
|
|
14168
14182
|
_extends = Object.assign || function (target) {
|
|
@@ -14429,14 +14443,14 @@ function useSwipeable(options) {
|
|
|
14429
14443
|
return handlers;
|
|
14430
14444
|
}
|
|
14431
14445
|
|
|
14432
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14446
|
+
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"])));
|
|
14433
14447
|
var ArrowButton = function (_a) {
|
|
14434
14448
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14435
14449
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14436
14450
|
};
|
|
14437
|
-
var templateObject_1$
|
|
14451
|
+
var templateObject_1$T;
|
|
14438
14452
|
|
|
14439
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14453
|
+
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"])));
|
|
14440
14454
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14441
14455
|
var SlideDots = function (_a) {
|
|
14442
14456
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14445,11 +14459,11 @@ var SlideDots = function (_a) {
|
|
|
14445
14459
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14446
14460
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
14447
14461
|
};
|
|
14448
|
-
var templateObject_1$
|
|
14462
|
+
var templateObject_1$S;
|
|
14449
14463
|
|
|
14450
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14451
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14452
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14464
|
+
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"])));
|
|
14465
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14466
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14453
14467
|
var SlideNavigation = function (_a) {
|
|
14454
14468
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14455
14469
|
var theme = useTheme();
|
|
@@ -14461,23 +14475,23 @@ var SlideNavigation = function (_a) {
|
|
|
14461
14475
|
onNavigate(selectedIndex + 1);
|
|
14462
14476
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14463
14477
|
};
|
|
14464
|
-
var templateObject_1$
|
|
14478
|
+
var templateObject_1$R, templateObject_2$F, templateObject_3$z;
|
|
14465
14479
|
|
|
14466
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14480
|
+
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) {
|
|
14467
14481
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14468
14482
|
return borderRadiusVariant &&
|
|
14469
14483
|
"\n border-radius: 40px;\n ";
|
|
14470
14484
|
});
|
|
14471
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14472
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14485
|
+
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'); });
|
|
14486
|
+
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"])));
|
|
14473
14487
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14474
14488
|
var _b, _c;
|
|
14475
14489
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14476
14490
|
return (jsxs$1(Container$D, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14477
14491
|
});
|
|
14478
|
-
var templateObject_1$
|
|
14492
|
+
var templateObject_1$Q, templateObject_2$E, templateObject_3$y;
|
|
14479
14493
|
|
|
14480
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14494
|
+
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"])));
|
|
14481
14495
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14482
14496
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
14483
14497
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14501,9 +14515,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14501
14515
|
}, [index, images]);
|
|
14502
14516
|
return (jsxs$1(Container$C, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14503
14517
|
};
|
|
14504
|
-
var templateObject_1$
|
|
14518
|
+
var templateObject_1$P;
|
|
14505
14519
|
|
|
14506
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
14520
|
+
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) {
|
|
14507
14521
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14508
14522
|
return borderRadiusVariant &&
|
|
14509
14523
|
"\n border-radius: 40px;\n ";
|
|
@@ -14512,11 +14526,11 @@ var Container$B = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
14512
14526
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14513
14527
|
});
|
|
14514
14528
|
// max-height: 31.875rem;
|
|
14515
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
14516
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
14517
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14518
|
-
var Video = newStyled.div(templateObject_5$
|
|
14519
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14529
|
+
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'); });
|
|
14530
|
+
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"])));
|
|
14531
|
+
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"])));
|
|
14532
|
+
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"])));
|
|
14533
|
+
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"])));
|
|
14520
14534
|
var Text$2 = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14521
14535
|
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"])));
|
|
14522
14536
|
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"])));
|
|
@@ -14577,14 +14591,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14577
14591
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14578
14592
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14579
14593
|
};
|
|
14580
|
-
var templateObject_1$
|
|
14594
|
+
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;
|
|
14581
14595
|
|
|
14582
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
14596
|
+
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"])));
|
|
14583
14597
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14584
14598
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14585
14599
|
return (jsx$1(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14586
14600
|
};
|
|
14587
|
-
var templateObject_1$
|
|
14601
|
+
var templateObject_1$N;
|
|
14588
14602
|
|
|
14589
14603
|
var __defProp$1 = Object.defineProperty;
|
|
14590
14604
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14717,17 +14731,17 @@ var Portal = function (_a) {
|
|
|
14717
14731
|
var visibleStyle = function (_a) {
|
|
14718
14732
|
var opened = _a.opened;
|
|
14719
14733
|
return opened
|
|
14720
|
-
? css(templateObject_1$
|
|
14734
|
+
? 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 "])));
|
|
14721
14735
|
};
|
|
14722
14736
|
var transformStyle = function (_a) {
|
|
14723
14737
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14724
14738
|
return opened
|
|
14725
|
-
? css(templateObject_3$
|
|
14739
|
+
? 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%)');
|
|
14726
14740
|
};
|
|
14727
|
-
var Container$z = newStyled.div(templateObject_6$
|
|
14741
|
+
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) {
|
|
14728
14742
|
var width = _a.width;
|
|
14729
14743
|
return width
|
|
14730
|
-
? css(templateObject_5$
|
|
14744
|
+
? css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14731
14745
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14732
14746
|
});
|
|
14733
14747
|
}, visibleStyle, transformStyle);
|
|
@@ -14772,9 +14786,9 @@ var useModal = function (id) {
|
|
|
14772
14786
|
close: close,
|
|
14773
14787
|
}); }, [close, open, opened]);
|
|
14774
14788
|
};
|
|
14775
|
-
var templateObject_1$
|
|
14789
|
+
var templateObject_1$M, templateObject_2$C, templateObject_3$w, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$e;
|
|
14776
14790
|
|
|
14777
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14791
|
+
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) {
|
|
14778
14792
|
var height = _a.height;
|
|
14779
14793
|
return height || '0.5rem';
|
|
14780
14794
|
}, function (_a) {
|
|
@@ -14846,19 +14860,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14846
14860
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14847
14861
|
return (jsxs$1(Container$y, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14848
14862
|
};
|
|
14849
|
-
var templateObject_1$
|
|
14863
|
+
var templateObject_1$L;
|
|
14850
14864
|
|
|
14851
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14865
|
+
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) {
|
|
14852
14866
|
var theme = _a.theme;
|
|
14853
14867
|
return theme.component.orderBar.backgroundColor;
|
|
14854
14868
|
});
|
|
14855
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14869
|
+
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; });
|
|
14856
14870
|
var OrderBar = function (_a) {
|
|
14857
14871
|
var message = _a.message, color = _a.color;
|
|
14858
14872
|
var theme = useTheme();
|
|
14859
14873
|
return (jsxs$1(Container$x, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14860
14874
|
};
|
|
14861
|
-
var templateObject_1$
|
|
14875
|
+
var templateObject_1$K, templateObject_2$B;
|
|
14862
14876
|
|
|
14863
14877
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14864
14878
|
background: props.bgColor,
|
|
@@ -14882,15 +14896,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14882
14896
|
justifyContent: 'center',
|
|
14883
14897
|
gap: '10px',
|
|
14884
14898
|
});
|
|
14885
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14899
|
+
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) {
|
|
14886
14900
|
var bgColor = _a.bgColor;
|
|
14887
14901
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14888
14902
|
}, function (_a) {
|
|
14889
14903
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14890
14904
|
return width;
|
|
14891
14905
|
});
|
|
14892
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14893
|
-
var templateObject_1$
|
|
14906
|
+
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"])));
|
|
14907
|
+
var templateObject_1$J, templateObject_2$A;
|
|
14894
14908
|
|
|
14895
14909
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14896
14910
|
var background = _a.background, width = _a.width;
|
|
@@ -18710,12 +18724,12 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18710
18724
|
HTMLReactParser$1.attributesToProps;
|
|
18711
18725
|
HTMLReactParser$1.Element;
|
|
18712
18726
|
|
|
18713
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18714
|
-
var Card = newStyled.div(templateObject_2$
|
|
18715
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18716
|
-
var Label$2 = newStyled.div(templateObject_4$
|
|
18717
|
-
var Check = newStyled.div(templateObject_5$
|
|
18718
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18727
|
+
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"])));
|
|
18728
|
+
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"])));
|
|
18729
|
+
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"])));
|
|
18730
|
+
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"])));
|
|
18731
|
+
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"])));
|
|
18732
|
+
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"])));
|
|
18719
18733
|
var IconPlaceholder = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18720
18734
|
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"])));
|
|
18721
18735
|
var PackSelector = function (_a) {
|
|
@@ -18734,7 +18748,7 @@ var PackCard = function (_a) {
|
|
|
18734
18748
|
.then(function (icon) { return setIcon(icon); })
|
|
18735
18749
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
18736
18750
|
}, [pack.meta.icon]);
|
|
18737
|
-
return (jsxs$1(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$2, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18751
|
+
return (jsxs$1(Card$1, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$2, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18738
18752
|
color: 'var(--colors-semantic-urgent-color)',
|
|
18739
18753
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer, { children: [jsx$1(Text$7, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
18740
18754
|
locale: 'en-US',
|
|
@@ -18747,14 +18761,14 @@ var PackCard = function (_a) {
|
|
|
18747
18761
|
currency: currencyCode || 'USD',
|
|
18748
18762
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18749
18763
|
};
|
|
18750
|
-
var templateObject_1$
|
|
18764
|
+
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;
|
|
18751
18765
|
|
|
18752
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18753
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18754
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18766
|
+
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"])));
|
|
18767
|
+
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"])));
|
|
18768
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18755
18769
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18756
18770
|
}));
|
|
18757
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18771
|
+
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) {
|
|
18758
18772
|
var bold = _a.bold;
|
|
18759
18773
|
return (bold ? '700' : '500');
|
|
18760
18774
|
}, function (_a) {
|
|
@@ -18771,7 +18785,7 @@ var PageNumber = newStyled.span(templateObject_4$l || (templateObject_4$l = __ma
|
|
|
18771
18785
|
var background = _a.background;
|
|
18772
18786
|
return background || 'unset';
|
|
18773
18787
|
});
|
|
18774
|
-
var templateObject_1$
|
|
18788
|
+
var templateObject_1$H, templateObject_2$y, templateObject_3$u, templateObject_4$n;
|
|
18775
18789
|
|
|
18776
18790
|
var Pagination = function (_a) {
|
|
18777
18791
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18836,7 +18850,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18836
18850
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18837
18851
|
};
|
|
18838
18852
|
|
|
18839
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
18853
|
+
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) {
|
|
18840
18854
|
var width = _a.width;
|
|
18841
18855
|
return width;
|
|
18842
18856
|
}, function (_a) {
|
|
@@ -18854,12 +18868,12 @@ var PaymentMethod = function (_a) {
|
|
|
18854
18868
|
var theme = useTheme();
|
|
18855
18869
|
return (jsx$1(Container$u, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
18856
18870
|
};
|
|
18857
|
-
var templateObject_1$
|
|
18871
|
+
var templateObject_1$G;
|
|
18858
18872
|
|
|
18859
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
18873
|
+
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"])));
|
|
18860
18874
|
var IMAGE_WIDTH = '63px';
|
|
18861
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18862
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18875
|
+
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);
|
|
18876
|
+
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({
|
|
18863
18877
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18864
18878
|
}), IMAGE_WIDTH);
|
|
18865
18879
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18882,7 +18896,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18882
18896
|
margin: margin,
|
|
18883
18897
|
});
|
|
18884
18898
|
});
|
|
18885
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18899
|
+
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) {
|
|
18886
18900
|
var withTag = _a.withTag; _a.theme;
|
|
18887
18901
|
return withTag
|
|
18888
18902
|
? mediaQueries({
|
|
@@ -18891,15 +18905,15 @@ var PriceContainer = newStyled.div(templateObject_4$k || (templateObject_4$k = _
|
|
|
18891
18905
|
})
|
|
18892
18906
|
: 'justify-content: end';
|
|
18893
18907
|
});
|
|
18894
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18895
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18908
|
+
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"])));
|
|
18909
|
+
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"])));
|
|
18896
18910
|
var SimpleOrderItem = function (_a) {
|
|
18897
18911
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18898
18912
|
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;
|
|
18899
18913
|
var theme = useTheme();
|
|
18900
18914
|
return (jsxs$1(Container$t, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title" }, { children: subtitle }), void 0), midElement, jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18901
18915
|
};
|
|
18902
|
-
var templateObject_1$
|
|
18916
|
+
var templateObject_1$F, templateObject_2$x, templateObject_3$t, templateObject_4$m, templateObject_5$g, templateObject_6$e;
|
|
18903
18917
|
|
|
18904
18918
|
var P$1 = newStyled.p(function (_a) {
|
|
18905
18919
|
var color = _a.color;
|
|
@@ -18913,7 +18927,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18913
18927
|
margin: '0.938rem 4.188rem',
|
|
18914
18928
|
});
|
|
18915
18929
|
});
|
|
18916
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18930
|
+
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) {
|
|
18917
18931
|
var height = _a.height;
|
|
18918
18932
|
return height || '0.5rem';
|
|
18919
18933
|
}, function (_a) {
|
|
@@ -18958,12 +18972,12 @@ var ProgressBar = function (_a) {
|
|
|
18958
18972
|
var theme = useTheme();
|
|
18959
18973
|
return (jsxs$1(Container$s, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18960
18974
|
};
|
|
18961
|
-
var templateObject_1$
|
|
18975
|
+
var templateObject_1$E;
|
|
18962
18976
|
|
|
18963
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
18964
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18965
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18966
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18977
|
+
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; });
|
|
18978
|
+
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"])));
|
|
18979
|
+
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"])));
|
|
18980
|
+
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)'; });
|
|
18967
18981
|
var QuantityPicker = function (_a) {
|
|
18968
18982
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
18969
18983
|
var theme = useTheme();
|
|
@@ -18988,7 +19002,7 @@ var QuantityPicker = function (_a) {
|
|
|
18988
19002
|
}, [value, clamp]);
|
|
18989
19003
|
return (jsxs$1(Container$r, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18990
19004
|
};
|
|
18991
|
-
var templateObject_1$
|
|
19005
|
+
var templateObject_1$D, templateObject_2$w, templateObject_3$s, templateObject_4$l;
|
|
18992
19006
|
|
|
18993
19007
|
/* base styles & size variants */
|
|
18994
19008
|
var CustomRadioStyles$1 = {
|
|
@@ -19057,9 +19071,9 @@ var ContainerStyles$1 = {
|
|
|
19057
19071
|
},
|
|
19058
19072
|
};
|
|
19059
19073
|
|
|
19060
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19074
|
+
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"])));
|
|
19061
19075
|
var Container$q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
19062
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
19076
|
+
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) {
|
|
19063
19077
|
var disabled = _a.disabled;
|
|
19064
19078
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19065
19079
|
});
|
|
@@ -19067,7 +19081,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19067
19081
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19068
19082
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19069
19083
|
]; });
|
|
19070
|
-
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$
|
|
19084
|
+
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"])));
|
|
19071
19085
|
var RadioPrimary = function (_a) {
|
|
19072
19086
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
19073
19087
|
var theme = useTheme();
|
|
@@ -19077,7 +19091,7 @@ var RadioPrimary = function (_a) {
|
|
|
19077
19091
|
};
|
|
19078
19092
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$q, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
19079
19093
|
};
|
|
19080
|
-
var templateObject_1$
|
|
19094
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$r;
|
|
19081
19095
|
|
|
19082
19096
|
var RadioGroupInput = function (_a) {
|
|
19083
19097
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19156,9 +19170,9 @@ var ContainerStyles = {
|
|
|
19156
19170
|
},
|
|
19157
19171
|
};
|
|
19158
19172
|
|
|
19159
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19173
|
+
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"])));
|
|
19160
19174
|
var Container$p = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19161
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19175
|
+
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) {
|
|
19162
19176
|
var disabled = _a.disabled;
|
|
19163
19177
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19164
19178
|
});
|
|
@@ -19166,7 +19180,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19166
19180
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19167
19181
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19168
19182
|
]; });
|
|
19169
|
-
var StyledLabel = newStyled(Label$5)(templateObject_3$
|
|
19183
|
+
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) {
|
|
19170
19184
|
var theme = _a.theme;
|
|
19171
19185
|
return theme.component.radio.textSize;
|
|
19172
19186
|
}, function (_a) {
|
|
@@ -19182,7 +19196,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19182
19196
|
};
|
|
19183
19197
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$p, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19184
19198
|
};
|
|
19185
|
-
var templateObject_1$
|
|
19199
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$q;
|
|
19186
19200
|
|
|
19187
19201
|
var ClubRadioGroupInput = function (_a) {
|
|
19188
19202
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -19210,12 +19224,12 @@ function formatDate(date, format) {
|
|
|
19210
19224
|
}
|
|
19211
19225
|
}
|
|
19212
19226
|
|
|
19213
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
19214
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19215
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19216
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19217
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19218
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19227
|
+
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"])));
|
|
19228
|
+
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"])));
|
|
19229
|
+
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"])));
|
|
19230
|
+
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"])));
|
|
19231
|
+
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"])));
|
|
19232
|
+
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"])));
|
|
19219
19233
|
var VerifiedText = newStyled.h1(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
19220
19234
|
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"])));
|
|
19221
19235
|
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"])));
|
|
@@ -19251,16 +19265,16 @@ var Review$1 = function (_a) {
|
|
|
19251
19265
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$o, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19252
19266
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19253
19267
|
};
|
|
19254
|
-
var templateObject_1$
|
|
19268
|
+
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;
|
|
19255
19269
|
|
|
19256
19270
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19257
19271
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19258
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
19259
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19260
|
-
var Content = newStyled.div(templateObject_3$
|
|
19261
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19262
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19263
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19272
|
+
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"])));
|
|
19273
|
+
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"])));
|
|
19274
|
+
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"])));
|
|
19275
|
+
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"])));
|
|
19276
|
+
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"])));
|
|
19277
|
+
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"])));
|
|
19264
19278
|
var ReviewerName = newStyled.h2(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
19265
19279
|
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"])));
|
|
19266
19280
|
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"])));
|
|
@@ -19307,14 +19321,14 @@ var Review = function (_a) {
|
|
|
19307
19321
|
: description,
|
|
19308
19322
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19309
19323
|
};
|
|
19310
|
-
var templateObject_1$
|
|
19311
|
-
|
|
19312
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
19313
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19314
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19315
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19316
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19317
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19324
|
+
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;
|
|
19325
|
+
|
|
19326
|
+
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"])));
|
|
19327
|
+
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"])));
|
|
19328
|
+
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"])));
|
|
19329
|
+
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"])));
|
|
19330
|
+
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"])));
|
|
19331
|
+
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"])));
|
|
19318
19332
|
var SummaryItem = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
19319
19333
|
var backgroundUrl = _a.backgroundUrl;
|
|
19320
19334
|
return "url(".concat(backgroundUrl, ")");
|
|
@@ -19325,17 +19339,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19325
19339
|
var theme = useTheme();
|
|
19326
19340
|
return (jsxs$1(Container$m, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19327
19341
|
};
|
|
19328
|
-
var templateObject_1$
|
|
19342
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$n, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$a;
|
|
19329
19343
|
|
|
19330
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19331
|
-
var Text = newStyled.p(templateObject_2$
|
|
19344
|
+
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"])));
|
|
19345
|
+
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; });
|
|
19332
19346
|
var ScrollToTop = function (_a) {
|
|
19333
19347
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19334
19348
|
var theme = useTheme();
|
|
19335
19349
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19336
19350
|
return (jsxs$1(Container$l, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19337
19351
|
};
|
|
19338
|
-
var templateObject_1$
|
|
19352
|
+
var templateObject_1$x, templateObject_2$q;
|
|
19339
19353
|
|
|
19340
19354
|
var Input = newStyled.input(function (props) { return ({
|
|
19341
19355
|
padding: props.theme.component.input.padding,
|
|
@@ -19366,7 +19380,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19366
19380
|
},
|
|
19367
19381
|
}); });
|
|
19368
19382
|
|
|
19369
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19383
|
+
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({
|
|
19370
19384
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19371
19385
|
}));
|
|
19372
19386
|
var Description = newStyled.div({
|
|
@@ -19385,7 +19399,7 @@ var ProductItem = function (_a) {
|
|
|
19385
19399
|
var theme = useTheme();
|
|
19386
19400
|
return (jsxs$1(Container$k, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel$1, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19387
19401
|
};
|
|
19388
|
-
var templateObject_1$
|
|
19402
|
+
var templateObject_1$w;
|
|
19389
19403
|
|
|
19390
19404
|
var Container$j = newStyled.div({
|
|
19391
19405
|
display: 'flex',
|
|
@@ -19401,7 +19415,7 @@ var Ul = newStyled.ul({
|
|
|
19401
19415
|
margin: '0px',
|
|
19402
19416
|
padding: '0px',
|
|
19403
19417
|
});
|
|
19404
|
-
var Li = newStyled.li(templateObject_1$
|
|
19418
|
+
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({
|
|
19405
19419
|
padding: [0, '0rem 1rem'],
|
|
19406
19420
|
borderRadius: [0, '0.5rem'],
|
|
19407
19421
|
}));
|
|
@@ -19413,12 +19427,12 @@ var Anchor = newStyled.a({
|
|
|
19413
19427
|
padding: 0,
|
|
19414
19428
|
textDecoration: 'none',
|
|
19415
19429
|
});
|
|
19416
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19430
|
+
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({
|
|
19417
19431
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19418
19432
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19419
19433
|
borderRadius: ['0', '0.5rem'],
|
|
19420
19434
|
}));
|
|
19421
|
-
var Header = newStyled.div(templateObject_3$
|
|
19435
|
+
var Header = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19422
19436
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19423
19437
|
}));
|
|
19424
19438
|
var ResultsPanel = function (_a) {
|
|
@@ -19426,9 +19440,9 @@ var ResultsPanel = function (_a) {
|
|
|
19426
19440
|
var theme = useTheme();
|
|
19427
19441
|
return (jsxs$1(Container$i, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19428
19442
|
};
|
|
19429
|
-
var templateObject_1$
|
|
19443
|
+
var templateObject_1$v, templateObject_2$p, templateObject_3$m;
|
|
19430
19444
|
|
|
19431
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19445
|
+
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({
|
|
19432
19446
|
right: ['1rem', '7.75rem'],
|
|
19433
19447
|
top: ['0.75rem', '0.75rem'],
|
|
19434
19448
|
}));
|
|
@@ -19437,7 +19451,7 @@ var ClearButton = function (_a) {
|
|
|
19437
19451
|
var theme = useTheme();
|
|
19438
19452
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19439
19453
|
};
|
|
19440
|
-
var templateObject_1$
|
|
19454
|
+
var templateObject_1$u;
|
|
19441
19455
|
|
|
19442
19456
|
var SearchIconContainer = newStyled.div({
|
|
19443
19457
|
display: 'flex',
|
|
@@ -19447,7 +19461,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19447
19461
|
background: 'white',
|
|
19448
19462
|
alignSelf: 'center',
|
|
19449
19463
|
});
|
|
19450
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19464
|
+
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"])));
|
|
19451
19465
|
var SearchControl = function (_a) {
|
|
19452
19466
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19453
19467
|
var theme = useTheme();
|
|
@@ -19463,7 +19477,7 @@ var SearchControl = function (_a) {
|
|
|
19463
19477
|
}
|
|
19464
19478
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19465
19479
|
};
|
|
19466
|
-
var templateObject_1$
|
|
19480
|
+
var templateObject_1$t;
|
|
19467
19481
|
|
|
19468
19482
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19469
19483
|
var reducer = function (state, action) {
|
|
@@ -19530,20 +19544,20 @@ var SearchBar = function (_a) {
|
|
|
19530
19544
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19531
19545
|
};
|
|
19532
19546
|
|
|
19533
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
19534
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19535
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19536
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19537
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19547
|
+
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"])));
|
|
19548
|
+
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"])));
|
|
19549
|
+
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"])));
|
|
19550
|
+
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"])));
|
|
19551
|
+
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"])));
|
|
19538
19552
|
var SearchNavigation = function (_a) {
|
|
19539
19553
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19540
19554
|
return (jsxs$1(Container$g, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19541
19555
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19542
19556
|
}) }, void 0)] }, void 0));
|
|
19543
19557
|
};
|
|
19544
|
-
var templateObject_1$
|
|
19558
|
+
var templateObject_1$s, templateObject_2$o, templateObject_3$l, templateObject_4$h, templateObject_5$c;
|
|
19545
19559
|
|
|
19546
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19560
|
+
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) {
|
|
19547
19561
|
var alignCenter = _a.alignCenter;
|
|
19548
19562
|
return alignCenter &&
|
|
19549
19563
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19553,26 +19567,26 @@ var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __ma
|
|
|
19553
19567
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19554
19568
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19555
19569
|
});
|
|
19556
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19557
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19570
|
+
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"])));
|
|
19571
|
+
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"])));
|
|
19558
19572
|
var ShortBanner = function (_a) {
|
|
19559
19573
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19560
19574
|
var theme = useTheme();
|
|
19561
19575
|
return (jsxs$1(Container$f, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19562
19576
|
};
|
|
19563
|
-
var templateObject_1$
|
|
19564
|
-
|
|
19565
|
-
var TableElement$2 = newStyled.table(templateObject_1$
|
|
19566
|
-
var TableCell$2 = newStyled.td(templateObject_2$
|
|
19567
|
-
var TableHead$2 = newStyled.th(templateObject_3$
|
|
19568
|
-
var Label$1 = newStyled('div')(templateObject_4$
|
|
19569
|
-
var TopLabel$1 = newStyled(Label$1)(templateObject_5$
|
|
19570
|
-
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$
|
|
19577
|
+
var templateObject_1$r, templateObject_2$n, templateObject_3$k;
|
|
19578
|
+
|
|
19579
|
+
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; });
|
|
19580
|
+
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; });
|
|
19581
|
+
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; });
|
|
19582
|
+
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"])));
|
|
19583
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19584
|
+
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"])));
|
|
19571
19585
|
var Container$e = newStyled('div')(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19572
19586
|
var LabelText$1 = newStyled('span')(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19573
19587
|
var Column$1 = newStyled('div')(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19574
19588
|
var TableRow$2 = newStyled.tr(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19575
|
-
var templateObject_1$
|
|
19589
|
+
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;
|
|
19576
19590
|
|
|
19577
19591
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19578
19592
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19613,16 +19627,16 @@ var SizeChartTable = function (_a) {
|
|
|
19613
19627
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19614
19628
|
};
|
|
19615
19629
|
|
|
19616
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19617
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19618
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19619
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
19630
|
+
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; });
|
|
19631
|
+
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; });
|
|
19632
|
+
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; });
|
|
19633
|
+
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; });
|
|
19620
19634
|
var SizeTable = function (_a) {
|
|
19621
19635
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19622
19636
|
var theme = useTheme();
|
|
19623
19637
|
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19624
19638
|
};
|
|
19625
|
-
var templateObject_1$
|
|
19639
|
+
var templateObject_1$p, templateObject_2$l, templateObject_3$i, templateObject_4$f;
|
|
19626
19640
|
|
|
19627
19641
|
var getStylesBySize$7 = function (size) {
|
|
19628
19642
|
switch (size) {
|
|
@@ -19649,7 +19663,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19649
19663
|
} });
|
|
19650
19664
|
};
|
|
19651
19665
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19652
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19666
|
+
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));
|
|
19653
19667
|
};
|
|
19654
19668
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19655
19669
|
if (disabled)
|
|
@@ -19665,23 +19679,23 @@ var TextButton = function (_a) {
|
|
|
19665
19679
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19666
19680
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
19667
19681
|
};
|
|
19668
|
-
var templateObject_1$
|
|
19682
|
+
var templateObject_1$o;
|
|
19669
19683
|
|
|
19670
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19671
|
-
var P = newStyled.p(templateObject_2$
|
|
19672
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19684
|
+
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"])));
|
|
19685
|
+
var P = newStyled.p(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19686
|
+
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"])));
|
|
19673
19687
|
var SizeFitGuide = function (_a) {
|
|
19674
19688
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19675
19689
|
return (jsxs$1(Container$d, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19676
19690
|
};
|
|
19677
|
-
var templateObject_1$
|
|
19691
|
+
var templateObject_1$n, templateObject_2$k, templateObject_3$h;
|
|
19678
19692
|
|
|
19679
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19693
|
+
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) {
|
|
19680
19694
|
var inline = _a.inline;
|
|
19681
19695
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19682
19696
|
});
|
|
19683
|
-
var Row = newStyled.div(templateObject_2$
|
|
19684
|
-
var templateObject_1$
|
|
19697
|
+
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"])));
|
|
19698
|
+
var templateObject_1$m, templateObject_2$j;
|
|
19685
19699
|
|
|
19686
19700
|
var SizeSelector = function (_a) {
|
|
19687
19701
|
var _b;
|
|
@@ -19703,7 +19717,7 @@ var SizeSelector = function (_a) {
|
|
|
19703
19717
|
}) }), void 0)] }), void 0));
|
|
19704
19718
|
};
|
|
19705
19719
|
|
|
19706
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19720
|
+
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) {
|
|
19707
19721
|
var titleSize = _a.titleSize;
|
|
19708
19722
|
return titleSize;
|
|
19709
19723
|
}, function (_a) {
|
|
@@ -19720,18 +19734,18 @@ var Tab = function (_a) {
|
|
|
19720
19734
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19721
19735
|
return (jsx$1(Fragment$2, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19722
19736
|
};
|
|
19723
|
-
var templateObject_1$
|
|
19737
|
+
var templateObject_1$l;
|
|
19724
19738
|
|
|
19725
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19726
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19739
|
+
var Container$c = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19740
|
+
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) {
|
|
19727
19741
|
var backgroundColor = _a.backgroundColor;
|
|
19728
19742
|
return backgroundColor;
|
|
19729
19743
|
}, function (_a) {
|
|
19730
19744
|
var borderColor = _a.borderColor;
|
|
19731
19745
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19732
19746
|
});
|
|
19733
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19734
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19747
|
+
var TabContent = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19748
|
+
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"])));
|
|
19735
19749
|
var Tabs = function (_a) {
|
|
19736
19750
|
var _b;
|
|
19737
19751
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -19742,14 +19756,14 @@ var Tabs = function (_a) {
|
|
|
19742
19756
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19743
19757
|
return (jsxs$1(Container$c, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19744
19758
|
};
|
|
19745
|
-
var templateObject_1$
|
|
19759
|
+
var templateObject_1$k, templateObject_2$i, templateObject_3$g, templateObject_4$e;
|
|
19746
19760
|
|
|
19747
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19761
|
+
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"])));
|
|
19748
19762
|
var Tag = function (_a) {
|
|
19749
19763
|
var text = _a.text, className = _a.className;
|
|
19750
19764
|
return jsx$1(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19751
19765
|
};
|
|
19752
|
-
var templateObject_1$
|
|
19766
|
+
var templateObject_1$j;
|
|
19753
19767
|
|
|
19754
19768
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19755
19769
|
switch (size) {
|
|
@@ -19860,9 +19874,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19860
19874
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19861
19875
|
};
|
|
19862
19876
|
|
|
19863
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19864
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19865
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19877
|
+
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"])));
|
|
19878
|
+
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"])));
|
|
19879
|
+
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"])));
|
|
19866
19880
|
var ImageVideo = function (_a) {
|
|
19867
19881
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19868
19882
|
var video = useRef(null);
|
|
@@ -19882,12 +19896,12 @@ var ImageVideo = function (_a) {
|
|
|
19882
19896
|
height: '100%',
|
|
19883
19897
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19884
19898
|
};
|
|
19885
|
-
var templateObject_1$
|
|
19899
|
+
var templateObject_1$i, templateObject_2$h, templateObject_3$f;
|
|
19886
19900
|
|
|
19887
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19888
|
-
var ContainerMobile = css(templateObject_2$
|
|
19889
|
-
var Container$a = newStyled.div(templateObject_3$
|
|
19890
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19901
|
+
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"])));
|
|
19902
|
+
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"])));
|
|
19903
|
+
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);
|
|
19904
|
+
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"])));
|
|
19891
19905
|
var TextWithImage = function (_a) {
|
|
19892
19906
|
var _b, _c, _d, _e;
|
|
19893
19907
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -19917,25 +19931,25 @@ var TextWithImage = function (_a) {
|
|
|
19917
19931
|
},
|
|
19918
19932
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19919
19933
|
};
|
|
19920
|
-
var templateObject_1$
|
|
19934
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$e, templateObject_4$d;
|
|
19921
19935
|
|
|
19922
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19936
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19923
19937
|
var timerColor = _a.timerColor;
|
|
19924
19938
|
return timerColor || '';
|
|
19925
19939
|
});
|
|
19926
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19940
|
+
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) {
|
|
19927
19941
|
var timerColor = _a.timerColor;
|
|
19928
19942
|
return timerColor || '';
|
|
19929
19943
|
});
|
|
19930
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19944
|
+
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) {
|
|
19931
19945
|
var theme = _a.theme;
|
|
19932
19946
|
return theme.colors.shades.white.color;
|
|
19933
19947
|
}, function (_a) {
|
|
19934
19948
|
var theme = _a.theme;
|
|
19935
19949
|
return theme.colors.shades.white.color;
|
|
19936
19950
|
});
|
|
19937
|
-
var Unit = newStyled.p(templateObject_4$
|
|
19938
|
-
var templateObject_1$
|
|
19951
|
+
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"])));
|
|
19952
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$d, templateObject_4$c;
|
|
19939
19953
|
|
|
19940
19954
|
var HRS = 'HRS';
|
|
19941
19955
|
var MIN = 'MIN';
|
|
@@ -19976,9 +19990,9 @@ var Timer = function (_a) {
|
|
|
19976
19990
|
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19977
19991
|
};
|
|
19978
19992
|
|
|
19979
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19980
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19981
|
-
var Currency = newStyled.span(templateObject_3$
|
|
19993
|
+
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"])));
|
|
19994
|
+
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; });
|
|
19995
|
+
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) {
|
|
19982
19996
|
var theme = _a.theme;
|
|
19983
19997
|
return theme.component.total.basicTotal.currency.color;
|
|
19984
19998
|
}, function (_a) {
|
|
@@ -19991,21 +20005,21 @@ var Currency = newStyled.span(templateObject_3$9 || (templateObject_3$9 = __make
|
|
|
19991
20005
|
var theme = _a.theme;
|
|
19992
20006
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19993
20007
|
});
|
|
19994
|
-
var Container$9 = newStyled.div(templateObject_4$
|
|
20008
|
+
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) {
|
|
19995
20009
|
var highlightColor = _a.highlightColor;
|
|
19996
20010
|
return highlightColor;
|
|
19997
20011
|
});
|
|
19998
|
-
var TotalContainer = newStyled(Container$9)(templateObject_5$
|
|
20012
|
+
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) {
|
|
19999
20013
|
var showTotalLabel = _a.showTotalLabel;
|
|
20000
20014
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20001
20015
|
});
|
|
20002
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20016
|
+
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"])));
|
|
20003
20017
|
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) {
|
|
20004
20018
|
var theme = _a.theme;
|
|
20005
20019
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20006
20020
|
});
|
|
20007
20021
|
var TotalLabel = newStyled(Text$7)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20008
|
-
var templateObject_1$
|
|
20022
|
+
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;
|
|
20009
20023
|
|
|
20010
20024
|
var Total = function (_a) {
|
|
20011
20025
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
@@ -20013,19 +20027,19 @@ var Total = function (_a) {
|
|
|
20013
20027
|
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$9, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
20014
20028
|
};
|
|
20015
20029
|
|
|
20016
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20030
|
+
var Wrapper = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20017
20031
|
var color = _a.color;
|
|
20018
20032
|
return color;
|
|
20019
20033
|
});
|
|
20020
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20021
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20034
|
+
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"])));
|
|
20035
|
+
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) {
|
|
20022
20036
|
var theme = _a.theme;
|
|
20023
20037
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20024
20038
|
}, function (_a) {
|
|
20025
20039
|
var theme = _a.theme;
|
|
20026
20040
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20027
20041
|
});
|
|
20028
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20042
|
+
var CouponItem = newStyled(Item)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20029
20043
|
var color = _a.color;
|
|
20030
20044
|
return color;
|
|
20031
20045
|
});
|
|
@@ -20038,18 +20052,65 @@ var Subtotal = function (_a) {
|
|
|
20038
20052
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
20039
20053
|
})] }), void 0));
|
|
20040
20054
|
};
|
|
20041
|
-
var templateObject_1$
|
|
20055
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$b, templateObject_4$a;
|
|
20042
20056
|
|
|
20043
20057
|
var Totals = {
|
|
20044
20058
|
Total: Total,
|
|
20045
20059
|
Subtotal: Subtotal,
|
|
20046
20060
|
};
|
|
20047
20061
|
|
|
20048
|
-
var
|
|
20049
|
-
|
|
20050
|
-
|
|
20051
|
-
|
|
20052
|
-
var
|
|
20062
|
+
var slideInAnimation = function (distanceFromTop) {
|
|
20063
|
+
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20064
|
+
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);
|
|
20065
|
+
};
|
|
20066
|
+
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20067
|
+
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20068
|
+
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);
|
|
20069
|
+
};
|
|
20070
|
+
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"])));
|
|
20071
|
+
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) {
|
|
20072
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20073
|
+
return distanceFromTop || '124px';
|
|
20074
|
+
}, function (_a) {
|
|
20075
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20076
|
+
return slideInAnimation(distanceFromTop);
|
|
20077
|
+
}, function (_a) {
|
|
20078
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20079
|
+
return distanceFromTop || '85px';
|
|
20080
|
+
}, function (_a) {
|
|
20081
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20082
|
+
return mobileSlideInAnimation(distanceFromTop);
|
|
20083
|
+
});
|
|
20084
|
+
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) {
|
|
20085
|
+
var severity = _a.severity;
|
|
20086
|
+
return severity === 'error' ? '#C64844' : '#292929';
|
|
20087
|
+
});
|
|
20088
|
+
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"])));
|
|
20089
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$9, templateObject_5$9, templateObject_6$8;
|
|
20090
|
+
|
|
20091
|
+
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20092
|
+
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
20093
|
+
var _c = useState(false), isVisible = _c[0], setIsVisible = _c[1];
|
|
20094
|
+
useEffect(function () {
|
|
20095
|
+
if (isVisible) {
|
|
20096
|
+
var timeout_1 = setTimeout(function () {
|
|
20097
|
+
setIsVisible(false);
|
|
20098
|
+
}, life || 3000);
|
|
20099
|
+
return function () { return clearTimeout(timeout_1); };
|
|
20100
|
+
}
|
|
20101
|
+
}, [isVisible, life]);
|
|
20102
|
+
useImperativeHandle(ref, function () { return ({
|
|
20103
|
+
show: function () { return setIsVisible(true); },
|
|
20104
|
+
}); });
|
|
20105
|
+
return (jsx$1(ToastContainer, __assign$1({ "data-testid": "toast-container" }, { children: isVisible && (jsxs$1(ToastContent, __assign$1({ "data-testid": "toast-content", distanceFromTop: distanceFromTop }, { children: [severity === 'success' && (jsx$1(Icon.Actions.CircleSolidCheck, { height: "1.5rem", width: "1.5rem", fill: "#4CBEA4" }, void 0)), severity === 'error' && (jsx$1(Icon.Actions.CircleSolidWarning, { height: "1.5rem", width: "1.5rem", fill: "#C64844" }, void 0)), jsx$1(ToastText, __assign$1({ severity: severity }, { children: summary }), void 0), withCloseIcon && (jsx$1(CloseIcon, __assign$1({ role: "button", onClick: function () { return setIsVisible(false); }, "data-testid": "close-icon" }, { children: jsx$1(Icon.Actions.Close, { height: "1.1rem", width: "1.1rem", fill: "#5A5A5A" }, void 0) }), void 0))] }), void 0)) }), void 0));
|
|
20106
|
+
});
|
|
20107
|
+
Toast.displayName = 'Toast';
|
|
20108
|
+
|
|
20109
|
+
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"])));
|
|
20110
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20111
|
+
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; });
|
|
20112
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20113
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
20053
20114
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
20054
20115
|
return props.finishedTrack
|
|
20055
20116
|
? props.finishedTrackColor
|
|
@@ -20097,13 +20158,13 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20097
20158
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20098
20159
|
})] }), void 0));
|
|
20099
20160
|
};
|
|
20100
|
-
var templateObject_1$
|
|
20161
|
+
var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$8, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$5, templateObject_9$3, templateObject_10$3, templateObject_11$2;
|
|
20101
20162
|
|
|
20102
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
20103
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
20104
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
20105
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
20106
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20163
|
+
var Container$7 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20164
|
+
var CheckpointContainer = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20165
|
+
var CheckpointDate = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
20166
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
20167
|
+
var CheckpointStatus = newStyled.p(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
20107
20168
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20108
20169
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20109
20170
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20137,9 +20198,9 @@ var TrackingProgress = function (_a) {
|
|
|
20137
20198
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20138
20199
|
})] }), void 0));
|
|
20139
20200
|
};
|
|
20140
|
-
var templateObject_1$
|
|
20201
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$8, templateObject_4$7, templateObject_5$7, templateObject_6$6, templateObject_7$6, templateObject_8$4;
|
|
20141
20202
|
|
|
20142
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20203
|
+
var TimerContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
20143
20204
|
var textPosition = _a.textPosition;
|
|
20144
20205
|
return textPosition;
|
|
20145
20206
|
}, function (_a) {
|
|
@@ -20152,7 +20213,7 @@ var TimerContainer = newStyled.div(templateObject_1$8 || (templateObject_1$8 = _
|
|
|
20152
20213
|
var borderRadius = _a.borderRadius;
|
|
20153
20214
|
return borderRadius || '8px';
|
|
20154
20215
|
});
|
|
20155
|
-
var templateObject_1$
|
|
20216
|
+
var templateObject_1$a;
|
|
20156
20217
|
|
|
20157
20218
|
var getDefaultCountdown = function () {
|
|
20158
20219
|
var tomorrowDate = new Date();
|
|
@@ -20168,7 +20229,7 @@ var HurryUp = function (_a) {
|
|
|
20168
20229
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: (!isFullVersion && theme.component.hurryUp.borderRadius) || '0', "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi", color: hurryUpTextColor }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && (jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps, { isCardsVersion: isFullVersion }), void 0))] }), void 0));
|
|
20169
20230
|
};
|
|
20170
20231
|
|
|
20171
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
20232
|
+
var Container$6 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
20172
20233
|
var size = _a.size;
|
|
20173
20234
|
return (size ? size : '100%');
|
|
20174
20235
|
}, function (_a) {
|
|
@@ -20182,7 +20243,7 @@ var borderSize = {
|
|
|
20182
20243
|
large: '3px',
|
|
20183
20244
|
};
|
|
20184
20245
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20185
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20246
|
+
var StyledSpinner = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
20186
20247
|
var size = _a.size;
|
|
20187
20248
|
return borderSize[size];
|
|
20188
20249
|
}, function (_a) {
|
|
@@ -20195,7 +20256,7 @@ var StyledSpinner = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __
|
|
|
20195
20256
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20196
20257
|
return duration;
|
|
20197
20258
|
});
|
|
20198
|
-
var templateObject_1$
|
|
20259
|
+
var templateObject_1$9, templateObject_2$9;
|
|
20199
20260
|
|
|
20200
20261
|
var Spinner = function (_a) {
|
|
20201
20262
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
@@ -20216,9 +20277,9 @@ var Shades200Color = '#bbbbbb';
|
|
|
20216
20277
|
var Shades700Color = '#292929';
|
|
20217
20278
|
var PrimaryColor = '#f7a08b';
|
|
20218
20279
|
var ClubBorderColor = '#882a2b';
|
|
20219
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
20220
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
20221
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
20280
|
+
var FlexContainer = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20281
|
+
var DiscountTag = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: 6px 6px 0 0;\n"])), ClubGradient);
|
|
20282
|
+
var ContainerBase = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
20222
20283
|
var selected = _a.selected;
|
|
20223
20284
|
return selected ? "1.5px solid ".concat(ClubBorderColor) : "1px solid ".concat(Shades200Color);
|
|
20224
20285
|
}, function (_a) {
|
|
@@ -20227,14 +20288,14 @@ var ContainerBase = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __
|
|
|
20227
20288
|
? "& label {\n font-weight: 700;\n }"
|
|
20228
20289
|
: '';
|
|
20229
20290
|
}, PrimaryColor);
|
|
20230
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$
|
|
20291
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n border-color: ", ";\n ", "\n"])), function (_a) {
|
|
20231
20292
|
var isNoMember = _a.isNoMember, selected = _a.selected;
|
|
20232
20293
|
return (isNoMember && selected ? Shades700Color : '');
|
|
20233
20294
|
}, function (_a) {
|
|
20234
20295
|
var onClick = _a.onClick;
|
|
20235
20296
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20236
20297
|
});
|
|
20237
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
20298
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
20238
20299
|
var SubscriptionHeader = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
20239
20300
|
var isSelected = _a.isSelected;
|
|
20240
20301
|
return (isSelected ? "1px solid ".concat(Shades200Color) : "none");
|
|
@@ -20259,7 +20320,7 @@ var StyledPrice = newStyled(PriceLabelV2$1)(templateObject_10$2 || (templateObje
|
|
|
20259
20320
|
: Shades200Color;
|
|
20260
20321
|
});
|
|
20261
20322
|
var Container$5 = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20262
|
-
var templateObject_1$
|
|
20323
|
+
var templateObject_1$8, templateObject_2$8, templateObject_3$7, templateObject_4$6, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$1;
|
|
20263
20324
|
|
|
20264
20325
|
var ClubOfferSelector = function (_a) {
|
|
20265
20326
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20305,6 +20366,49 @@ var ClubOfferSelector = function (_a) {
|
|
|
20305
20366
|
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsx$1(Benefit, { children: jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ isNoMember: true, "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice, { isNoMember: true, testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20306
20367
|
};
|
|
20307
20368
|
|
|
20369
|
+
var LabelWrapper = newStyled.label(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"])));
|
|
20370
|
+
var SwitchWrapper = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
20371
|
+
var InputWrapper = newStyled.input(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: #882a2b;\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])));
|
|
20372
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$6;
|
|
20373
|
+
|
|
20374
|
+
var ToggleComponent = function (_a) {
|
|
20375
|
+
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
20376
|
+
var _c = useState(isChecked), checked = _c[0], setChecked = _c[1];
|
|
20377
|
+
var handleChange = function (e) {
|
|
20378
|
+
setChecked(function (value) { return !value; });
|
|
20379
|
+
onToggle(e.target.checked);
|
|
20380
|
+
};
|
|
20381
|
+
return (jsxs$1(LabelWrapper, { children: [jsx$1(InputWrapper, { checked: checked, type: "checkbox", onChange: handleChange, value: "".concat(checked) }, void 0), jsx$1(SwitchWrapper, {}, void 0)] }, void 0));
|
|
20382
|
+
};
|
|
20383
|
+
|
|
20384
|
+
var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: white;\n max-width: 360px;\n gap: 8px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: white;\n max-width: 360px;\n gap: 8px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
20385
|
+
var $checked = _a.$checked;
|
|
20386
|
+
return ($checked ? '#FFF3E3' : '#FAFAFA');
|
|
20387
|
+
}, function (_a) {
|
|
20388
|
+
var $checked = _a.$checked;
|
|
20389
|
+
return ($checked ? '#FFE1B8' : '#E5E5E5');
|
|
20390
|
+
});
|
|
20391
|
+
var CardHeaderWrapper = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
20392
|
+
var CardBody = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n font-family: Avenir Next;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: column;\n font-family: Avenir Next;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20393
|
+
var ClubCopyWrapper = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n"])));
|
|
20394
|
+
var ClubCopyTextWrapper = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-family: Avenir Next;\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-family: Avenir Next;\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20395
|
+
var templateObject_1$6, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$5;
|
|
20396
|
+
|
|
20397
|
+
function Card(_a) {
|
|
20398
|
+
var children = _a.children, link = _a.link, srcImage = _a.srcImage, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20399
|
+
return (jsxs$1(ContainerWrapper, __assign$1({ "$checked": isChecked }, { children: [jsxs$1(CardHeaderWrapper, { children: [jsxs$1(ClubCopyWrapper, { children: [jsx$1("div", { children: jsx$1("img", { src: srcImage, alt: "" }, void 0) }, void 0), jsx$1(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsx$1("div", { children: children }, void 0)] }, void 0), jsxs$1(CardBody, { children: [bodyCopy, ' ', jsx$1("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }, void 0)] }), void 0));
|
|
20400
|
+
}
|
|
20401
|
+
|
|
20402
|
+
function JoinClubCard(_a) {
|
|
20403
|
+
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, srcImage = _a.srcImage, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy;
|
|
20404
|
+
var _b = useState(isChecked), checked = _b[0], setChecked = _b[1];
|
|
20405
|
+
var handleToggleValue = function (value) {
|
|
20406
|
+
setChecked(value);
|
|
20407
|
+
onCheckToggle(value);
|
|
20408
|
+
};
|
|
20409
|
+
return (jsx$1(Card, __assign$1({ link: link, srcImage: srcImage, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy }, { children: jsx$1(ToggleComponent, { onToggle: handleToggleValue, isChecked: isChecked }, void 0) }), void 0));
|
|
20410
|
+
}
|
|
20411
|
+
|
|
20308
20412
|
var ImageContainer$1 = newStyled.div(function (_a) {
|
|
20309
20413
|
var width = _a.width, height = _a.height;
|
|
20310
20414
|
return ({
|
|
@@ -20747,5 +20851,5 @@ var SizeChartTableV2 = function (_a) {
|
|
|
20747
20851
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: getIsOdd(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0) }, void 0)] }, void 0)] }, void 0));
|
|
20748
20852
|
};
|
|
20749
20853
|
|
|
20750
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CancellationFlowAccordionContentPerPartner, Card$
|
|
20854
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$2 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Toast, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
20751
20855
|
//# sourceMappingURL=index.esm.js.map
|