@trafilea/afrodita-components 6.25.0 → 6.25.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +16 -2
- package/build/index.esm.js +655 -583
- package/build/index.esm.js.map +1 -1
- package/build/index.js +654 -581
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.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$28 || (templateObject_1$28
|
|
|
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$1u || (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$26 || (templateObject_1$26 = _
|
|
|
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$25 || (templateObject_1$25 = _
|
|
|
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$1r || (templateObject_2$1r = __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,13 +4745,13 @@ 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$
|
|
4740
|
-
heading1: newStyled.h1(templateObject_7$
|
|
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$A || (templateObject_6$A = __makeTemplateObject([""], [""]))),
|
|
4754
|
+
heading1: newStyled.h1(templateObject_7$q || (templateObject_7$q = __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([""], [""]))),
|
|
4743
4757
|
heading4: newStyled.h4(templateObject_10$a || (templateObject_10$a = __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$4 = newStyled.div(templateObject_2$
|
|
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$A, templateObject_7$q, templateObject_8$k, templateObject_9$b, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
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$z || (templateObject_6$z = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
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) {
|
|
@@ -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$z;
|
|
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$1N || (templateObject_1$1N = __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$1f || (templateObject_2$1f
|
|
|
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,17 +5885,17 @@ var TooltipText = newStyled.div(templateObject_4$P || (templateObject_4$P = __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$y || (templateObject_6$y = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5876
5890
|
var color = _a.color;
|
|
5877
5891
|
return color;
|
|
5878
5892
|
});
|
|
5879
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5893
|
+
var IconContainer$5 = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5880
5894
|
var CloseToolTip = newStyled.button(templateObject_8$j || (templateObject_8$j = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
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$y, templateObject_7$p, 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,20 +5953,20 @@ var ContainerBase$2 = newStyled.div(templateObject_2$1e || (templateObject_2$1e
|
|
|
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$
|
|
5955
|
-
var Benefit$2 = newStyled.div(templateObject_7$
|
|
5968
|
+
var BenefitsContainer$2 = newStyled.div(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5969
|
+
var Benefit$2 = newStyled.div(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
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"])));
|
|
5958
5972
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
@@ -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$x, templateObject_7$o, 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,19 +6064,19 @@ var ContainerBase$1 = newStyled.div(templateObject_3$_ || (templateObject_3$_ =
|
|
|
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$w || (templateObject_6$w = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6059
6073
|
var theme = _a.theme;
|
|
6060
6074
|
return theme.colors.shades[200].color;
|
|
6061
6075
|
}, function (_a) {
|
|
6062
6076
|
var theme = _a.theme;
|
|
6063
6077
|
return theme.colors.pallete.primary.color;
|
|
6064
6078
|
});
|
|
6065
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_7$
|
|
6079
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6066
6080
|
var Benefit$1 = newStyled.div(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6067
6081
|
var BenefitText$1 = newStyled(Text$7)(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6068
6082
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
@@ -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$w, templateObject_7$n, 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$v || (templateObject_6$v = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6176
|
+
var templateObject_1$1L, templateObject_2$1d, templateObject_3$_, templateObject_4$N, templateObject_5$z, templateObject_6$v;
|
|
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$L || (templateObject_4$L = __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$
|
|
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"])));
|
|
6285
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;";
|
|
@@ -6310,16 +6324,16 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6310
6324
|
Footer: CardFooter,
|
|
6311
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;
|
|
@@ -6327,28 +6341,28 @@ var Minimalistic = function (_a) {
|
|
|
6327
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
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,20 +6433,20 @@ 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$
|
|
6428
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
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$u || (templateObject_6$u = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6442
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$m || (templateObject_7$m = __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) {
|
|
6431
6445
|
var clubPrice = _a.clubPrice;
|
|
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$u, templateObject_7$m, 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,15 +6672,15 @@ 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$t || (templateObject_6$t = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6666
6680
|
var style = _a.style;
|
|
6667
6681
|
return style.width;
|
|
6668
6682
|
});
|
|
6669
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6683
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6670
6684
|
var ProductItemMobile = function (_a) {
|
|
6671
6685
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
6672
6686
|
display: false,
|
|
@@ -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$t, templateObject_7$l;
|
|
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,12 +6780,12 @@ 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$
|
|
6774
|
-
var BottomTagContainer$7 = newStyled.div(templateObject_7$
|
|
6787
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6788
|
+
var BottomTagContainer$7 = newStyled.div(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6775
6789
|
var style = _a.style;
|
|
6776
6790
|
return style.width;
|
|
6777
6791
|
});
|
|
@@ -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$s, templateObject_7$k, 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$r || (templateObject_6$r = __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$r;
|
|
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$1k || (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,44 +7151,44 @@ 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$q || (templateObject_6$q = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7172
7186
|
display: ['block', 'flex'],
|
|
7173
7187
|
}), function (_a) {
|
|
7174
7188
|
var theme = _a.theme;
|
|
7175
7189
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7176
7190
|
});
|
|
7177
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7191
|
+
var SectionDetails = newStyled.p(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7178
7192
|
var theme = _a.theme;
|
|
7179
7193
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7180
7194
|
}, function (_a) {
|
|
@@ -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$q, templateObject_7$j, 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$p || (templateObject_6$p = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
7277
|
+
var templateObject_1$1h, templateObject_2$Y, templateObject_3$M, templateObject_4$A, templateObject_5$r, templateObject_6$p;
|
|
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$o || (templateObject_6$o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
7296
|
+
var templateObject_1$1g, templateObject_2$X, templateObject_3$L, templateObject_4$z, templateObject_5$q, templateObject_6$o;
|
|
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$
|
|
7368
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
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$n || (templateObject_6$n = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
7382
|
+
var OptionContainer = newStyled.div(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
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$n, templateObject_7$i, 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;
|
|
@@ -7599,10 +7613,10 @@ var FitGuarantee = function (_a) {
|
|
|
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$17 || (templateObject_1$17 = __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$F || (templateObject_3$F = __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$
|
|
11969
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
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$m || (templateObject_6$m = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
11983
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
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$m, templateObject_7$h, 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;
|
|
@@ -11987,6 +12001,70 @@ var ImagePreviewList = function (_a) {
|
|
|
11987
12001
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(index); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, isRatioSquare: isRatioSquare }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
|
|
11988
12002
|
};
|
|
11989
12003
|
|
|
12004
|
+
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); });
|
|
12005
|
+
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; });
|
|
12006
|
+
var templateObject_1$16, templateObject_2$P;
|
|
12007
|
+
|
|
12008
|
+
var ProgressBar$1 = function (_a) {
|
|
12009
|
+
var progress = _a.progress, hide = _a.hide;
|
|
12010
|
+
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
12011
|
+
};
|
|
12012
|
+
|
|
12013
|
+
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"])));
|
|
12014
|
+
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; });
|
|
12015
|
+
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"])));
|
|
12016
|
+
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"])));
|
|
12017
|
+
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"])));
|
|
12018
|
+
var MuteButton = newStyled.button(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
12019
|
+
var templateObject_1$15, templateObject_2$O, templateObject_3$F, templateObject_4$u, templateObject_5$n, templateObject_6$l;
|
|
12020
|
+
|
|
12021
|
+
var Video$1 = function (_a) {
|
|
12022
|
+
var _b, _c, _d, _e;
|
|
12023
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _f = _a.withProgressBar, withProgressBar = _f === void 0 ? true : _f, hasAudioControl = _a.hasAudioControl, muted = _a.muted, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl", "muted"]);
|
|
12024
|
+
var videoRef = useRef(null);
|
|
12025
|
+
var _g = useState(true), isLoading = _g[0], setIsLoading = _g[1];
|
|
12026
|
+
var _h = useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
|
|
12027
|
+
var _j = useState(muted), isMuted = _j[0], setIsMuted = _j[1];
|
|
12028
|
+
var _k = useState(0), videoProgress = _k[0], setVideoProgress = _k[1];
|
|
12029
|
+
var _l = useState(false), debouncePlay = _l[0], setDebouncePlay = _l[1];
|
|
12030
|
+
var isStarted = videoProgress > 0;
|
|
12031
|
+
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
12032
|
+
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
12033
|
+
var handlePlayClick = function () {
|
|
12034
|
+
if (videoRef.current && !debouncePlay) {
|
|
12035
|
+
setDebouncePlay(true);
|
|
12036
|
+
videoRef.current
|
|
12037
|
+
.play()
|
|
12038
|
+
.then(function () {
|
|
12039
|
+
setIsPlaying(true);
|
|
12040
|
+
setDebouncePlay(false);
|
|
12041
|
+
})
|
|
12042
|
+
.catch(function (error) {
|
|
12043
|
+
console.error('Error playing video:', error);
|
|
12044
|
+
setDebouncePlay(false);
|
|
12045
|
+
});
|
|
12046
|
+
}
|
|
12047
|
+
};
|
|
12048
|
+
var handlePauseClick = function () {
|
|
12049
|
+
if (videoRef.current && isPlaying) {
|
|
12050
|
+
videoRef.current.pause();
|
|
12051
|
+
setIsPlaying(false);
|
|
12052
|
+
}
|
|
12053
|
+
};
|
|
12054
|
+
var handleMuteToggle = function () {
|
|
12055
|
+
if (videoRef.current) {
|
|
12056
|
+
videoRef.current.muted = !videoRef.current.muted;
|
|
12057
|
+
setIsMuted(function (prevState) { return !prevState; });
|
|
12058
|
+
}
|
|
12059
|
+
};
|
|
12060
|
+
var onTimeUpdate = function () {
|
|
12061
|
+
if (videoRef.current) {
|
|
12062
|
+
setVideoProgress(videoRef.current.currentTime);
|
|
12063
|
+
}
|
|
12064
|
+
};
|
|
12065
|
+
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));
|
|
12066
|
+
};
|
|
12067
|
+
|
|
11990
12068
|
var propTypes = {exports: {}};
|
|
11991
12069
|
|
|
11992
12070
|
var reactIs = {exports: {}};
|
|
@@ -13578,102 +13656,46 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13578
13656
|
afterZoomOut: PropTypes.func
|
|
13579
13657
|
} : {};
|
|
13580
13658
|
|
|
13581
|
-
var
|
|
13582
|
-
var ProgressFiller = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
13583
|
-
var templateObject_1$15, templateObject_2$O;
|
|
13584
|
-
|
|
13585
|
-
var ProgressBar$1 = function (_a) {
|
|
13586
|
-
var progress = _a.progress, hide = _a.hide;
|
|
13587
|
-
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13588
|
-
};
|
|
13589
|
-
|
|
13590
|
-
var Container$P = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13591
|
-
var HTMLVideo = newStyled.video(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
13592
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
13593
|
-
var PlayContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13594
|
-
var PauseContainer = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
13595
|
-
var MuteButton = newStyled.button(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
13596
|
-
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$j;
|
|
13597
|
-
|
|
13598
|
-
var Video$1 = function (_a) {
|
|
13599
|
-
var _b, _c, _d, _e;
|
|
13600
|
-
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _f = _a.withProgressBar, withProgressBar = _f === void 0 ? true : _f, hasAudioControl = _a.hasAudioControl, muted = _a.muted, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl", "muted"]);
|
|
13601
|
-
var videoRef = useRef(null);
|
|
13602
|
-
var _g = useState(true), isLoading = _g[0], setIsLoading = _g[1];
|
|
13603
|
-
var _h = useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
|
|
13604
|
-
var _j = useState(muted), isMuted = _j[0], setIsMuted = _j[1];
|
|
13605
|
-
var _k = useState(0), videoProgress = _k[0], setVideoProgress = _k[1];
|
|
13606
|
-
var _l = useState(false), debouncePlay = _l[0], setDebouncePlay = _l[1];
|
|
13607
|
-
var isStarted = videoProgress > 0;
|
|
13608
|
-
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
13609
|
-
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
13610
|
-
var handlePlayClick = function () {
|
|
13611
|
-
if (videoRef.current && !debouncePlay) {
|
|
13612
|
-
setDebouncePlay(true);
|
|
13613
|
-
videoRef.current
|
|
13614
|
-
.play()
|
|
13615
|
-
.then(function () {
|
|
13616
|
-
setIsPlaying(true);
|
|
13617
|
-
setDebouncePlay(false);
|
|
13618
|
-
})
|
|
13619
|
-
.catch(function (error) {
|
|
13620
|
-
console.error('Error playing video:', error);
|
|
13621
|
-
setDebouncePlay(false);
|
|
13622
|
-
});
|
|
13623
|
-
}
|
|
13624
|
-
};
|
|
13625
|
-
var handlePauseClick = function () {
|
|
13626
|
-
if (videoRef.current && isPlaying) {
|
|
13627
|
-
videoRef.current.pause();
|
|
13628
|
-
setIsPlaying(false);
|
|
13629
|
-
}
|
|
13630
|
-
};
|
|
13631
|
-
var handleMuteToggle = function () {
|
|
13632
|
-
if (videoRef.current) {
|
|
13633
|
-
videoRef.current.muted = !videoRef.current.muted;
|
|
13634
|
-
setIsMuted(function (prevState) { return !prevState; });
|
|
13635
|
-
}
|
|
13636
|
-
};
|
|
13637
|
-
var onTimeUpdate = function () {
|
|
13638
|
-
if (videoRef.current) {
|
|
13639
|
-
setVideoProgress(videoRef.current.currentTime);
|
|
13640
|
-
}
|
|
13641
|
-
};
|
|
13642
|
-
return (jsxs$1(Container$P, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { muted: true, "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13643
|
-
};
|
|
13644
|
-
|
|
13645
|
-
var Container$O = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
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
|
|
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 ImageStyled = newStyled(Image$3)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13677
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13678
|
+
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13679
|
+
});
|
|
13680
|
+
var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
13681
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
13682
|
+
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
13683
|
+
});
|
|
13684
|
+
var templateObject_1$14, templateObject_2$N, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$g;
|
|
13663
13685
|
|
|
13664
13686
|
var ImageProductSlide$1 = function (_a) {
|
|
13665
13687
|
var _b;
|
|
13666
|
-
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom;
|
|
13688
|
+
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom, isRatioSquare = _a.isRatioSquare;
|
|
13667
13689
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13668
13690
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13669
|
-
return (jsxs$1(Container$O, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(
|
|
13691
|
+
return (jsxs$1(Container$O, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoomStyled, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13670
13692
|
alt: content.alt,
|
|
13671
13693
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13672
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsx$1(
|
|
13694
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true, isRatioSquare: isRatioSquare }, void 0)) : (jsx$1(ImageStyled, { width: position == 'horizontal' ? '360px' : '530px', height: "auto", src: source, alt: content.alt, objectFit: "cover", loading: "eager", isRatioSquare: isRatioSquare }, 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
13695
|
};
|
|
13674
13696
|
|
|
13675
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
13676
|
-
var templateObject_1$
|
|
13697
|
+
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"])));
|
|
13698
|
+
var templateObject_1$13;
|
|
13677
13699
|
|
|
13678
13700
|
var getInitialIndex = function (images, selectedValue) {
|
|
13679
13701
|
if (selectedValue) {
|
|
@@ -13699,7 +13721,7 @@ var ProductGallery = function (_a) {
|
|
|
13699
13721
|
setActiveIndex(index);
|
|
13700
13722
|
};
|
|
13701
13723
|
var selectedImage = images[activeIndex];
|
|
13702
|
-
return (jsxs$1(Container$N, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
|
|
13724
|
+
return (jsxs$1(Container$N, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom, isRatioSquare: isRatioSquare }, void 0)] }, void 0));
|
|
13703
13725
|
};
|
|
13704
13726
|
|
|
13705
13727
|
var getStylesBySize$8 = function (size) {
|
|
@@ -13721,7 +13743,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
13721
13743
|
};
|
|
13722
13744
|
}
|
|
13723
13745
|
};
|
|
13724
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
13746
|
+
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
13747
|
var backgroundColor = _a.backgroundColor;
|
|
13726
13748
|
return backgroundColor;
|
|
13727
13749
|
}, function (_a) {
|
|
@@ -13751,9 +13773,9 @@ var IconButton = function (_a) {
|
|
|
13751
13773
|
var theme = useTheme();
|
|
13752
13774
|
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
13775
|
};
|
|
13754
|
-
var templateObject_1$
|
|
13776
|
+
var templateObject_1$12;
|
|
13755
13777
|
|
|
13756
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13778
|
+
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
13779
|
var AmazonButton = function (_a) {
|
|
13758
13780
|
var onClick = _a.onClick;
|
|
13759
13781
|
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 +13784,7 @@ var PaypalButton = function (_a) {
|
|
|
13762
13784
|
var onClick = _a.onClick;
|
|
13763
13785
|
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
13786
|
};
|
|
13765
|
-
var templateObject_1$
|
|
13787
|
+
var templateObject_1$11;
|
|
13766
13788
|
|
|
13767
13789
|
var Container$L = newStyled.div(function (props) { return ({
|
|
13768
13790
|
height: 'auto',
|
|
@@ -13817,9 +13839,9 @@ var IconsWithTitle = function (_a) {
|
|
|
13817
13839
|
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
13840
|
};
|
|
13819
13841
|
|
|
13820
|
-
var Container$K = newStyled.div(templateObject_1
|
|
13821
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13822
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13842
|
+
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'); });
|
|
13843
|
+
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'); });
|
|
13844
|
+
var StyledTitle = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13823
13845
|
var titlePosition = _a.titlePosition;
|
|
13824
13846
|
return titlePosition == 'center' &&
|
|
13825
13847
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13829,13 +13851,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13829
13851
|
var isMobile = useWindowDimensions().isMobile;
|
|
13830
13852
|
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
13853
|
};
|
|
13832
|
-
var templateObject_1
|
|
13854
|
+
var templateObject_1$10, templateObject_2$M, templateObject_3$D;
|
|
13833
13855
|
|
|
13834
|
-
var Label$3 = newStyled.span(templateObject_1
|
|
13856
|
+
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
13857
|
var color = _a.color;
|
|
13836
13858
|
return color;
|
|
13837
13859
|
});
|
|
13838
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13860
|
+
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
13861
|
var color = _a.color;
|
|
13840
13862
|
return color;
|
|
13841
13863
|
});
|
|
@@ -13844,7 +13866,7 @@ var InputLabel = function (_a) {
|
|
|
13844
13866
|
var theme = useTheme();
|
|
13845
13867
|
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
13868
|
};
|
|
13847
|
-
var templateObject_1
|
|
13869
|
+
var templateObject_1$$, templateObject_2$L;
|
|
13848
13870
|
|
|
13849
13871
|
var containerByStatus = function (theme, status) {
|
|
13850
13872
|
if (status === InputValidationType.Valid)
|
|
@@ -13853,12 +13875,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13853
13875
|
return theme.colors.semantic.urgent.color;
|
|
13854
13876
|
return '';
|
|
13855
13877
|
};
|
|
13856
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13878
|
+
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
13879
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13858
13880
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13859
13881
|
});
|
|
13860
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13861
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13882
|
+
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"])));
|
|
13883
|
+
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
13884
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13863
13885
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13864
13886
|
}, function (_a) {
|
|
@@ -13913,11 +13935,11 @@ var StyledInput = newStyled.input(templateObject_3$B || (templateObject_3$B = __
|
|
|
13913
13935
|
return hasValue &&
|
|
13914
13936
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13915
13937
|
});
|
|
13916
|
-
var InputWrapper$1 = newStyled.div(templateObject_4$
|
|
13938
|
+
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
13939
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13918
13940
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13919
13941
|
});
|
|
13920
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13942
|
+
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
13943
|
var theme = _a.theme;
|
|
13922
13944
|
return theme.component.input.placeholderColor;
|
|
13923
13945
|
}, function (_a) {
|
|
@@ -13930,8 +13952,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$k || (templateObject_5
|
|
|
13930
13952
|
var theme = _a.theme;
|
|
13931
13953
|
return theme.component.input.lineHeight;
|
|
13932
13954
|
});
|
|
13933
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13934
|
-
var templateObject_1$
|
|
13955
|
+
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"])));
|
|
13956
|
+
var templateObject_1$_, templateObject_2$K, templateObject_3$C, templateObject_4$s, templateObject_5$l, templateObject_6$j;
|
|
13935
13957
|
|
|
13936
13958
|
var BaseInput = function (_a) {
|
|
13937
13959
|
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"]);
|
|
@@ -13975,11 +13997,11 @@ var Button$5 = function (_a) {
|
|
|
13975
13997
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13976
13998
|
};
|
|
13977
13999
|
|
|
13978
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
14000
|
+
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
14001
|
var theme = _a.theme;
|
|
13980
14002
|
return theme.component.inputCustom.input.borderRadius;
|
|
13981
14003
|
});
|
|
13982
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
14004
|
+
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
14005
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13984
14006
|
return defaultRounded
|
|
13985
14007
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13996,21 +14018,21 @@ var Custom = function (_a) {
|
|
|
13996
14018
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13997
14019
|
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
14020
|
};
|
|
13999
|
-
var templateObject_1$
|
|
14021
|
+
var templateObject_1$Z, templateObject_2$J;
|
|
14000
14022
|
|
|
14001
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
14023
|
+
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
14024
|
var size = _a.size;
|
|
14003
14025
|
return (size === 'small' ? '36px' : '');
|
|
14004
14026
|
});
|
|
14005
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
14006
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
14027
|
+
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"])));
|
|
14028
|
+
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
14029
|
var Success = function (_a) {
|
|
14008
14030
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
14009
14031
|
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
14032
|
};
|
|
14011
|
-
var templateObject_1$
|
|
14033
|
+
var templateObject_1$Y, templateObject_2$I, templateObject_3$B;
|
|
14012
14034
|
|
|
14013
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
14035
|
+
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
14036
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
14015
14037
|
return status === InputValidationType.Empty &&
|
|
14016
14038
|
type === 'primary' &&
|
|
@@ -14027,16 +14049,16 @@ var BasePlusButton = function (_a) {
|
|
|
14027
14049
|
}
|
|
14028
14050
|
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
14051
|
};
|
|
14030
|
-
var templateObject_1$
|
|
14052
|
+
var templateObject_1$X;
|
|
14031
14053
|
|
|
14032
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
14033
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
14054
|
+
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"])));
|
|
14055
|
+
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
14056
|
var BasePlusIcon = function (_a) {
|
|
14035
14057
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
14036
14058
|
var theme = useTheme();
|
|
14037
14059
|
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
14060
|
};
|
|
14039
|
-
var templateObject_1$
|
|
14061
|
+
var templateObject_1$W, templateObject_2$H;
|
|
14040
14062
|
|
|
14041
14063
|
var Input$3 = {
|
|
14042
14064
|
Simple: BaseInput,
|
|
@@ -14081,7 +14103,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14081
14103
|
}, [preventTouch, ref, touchStart]);
|
|
14082
14104
|
}
|
|
14083
14105
|
|
|
14084
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
14106
|
+
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
14107
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14086
14108
|
return borderRadiusVariant &&
|
|
14087
14109
|
"\n border-radius: 40px;\n ";
|
|
@@ -14090,11 +14112,11 @@ var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __ma
|
|
|
14090
14112
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14091
14113
|
});
|
|
14092
14114
|
// 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$
|
|
14115
|
+
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'); });
|
|
14116
|
+
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"])));
|
|
14117
|
+
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"])));
|
|
14118
|
+
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"])));
|
|
14119
|
+
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
14120
|
var settings$1 = {
|
|
14099
14121
|
dots: true,
|
|
14100
14122
|
infinite: false,
|
|
@@ -14153,16 +14175,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14153
14175
|
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
14176
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14155
14177
|
};
|
|
14156
|
-
var templateObject_1$
|
|
14178
|
+
var templateObject_1$V, templateObject_2$G, templateObject_3$A, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
14157
14179
|
|
|
14158
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
14180
|
+
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
14181
|
var ProductGalleryMobile = function (_a) {
|
|
14160
14182
|
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
14183
|
var _d = useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14162
14184
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14163
14185
|
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
14186
|
};
|
|
14165
|
-
var templateObject_1$
|
|
14187
|
+
var templateObject_1$U;
|
|
14166
14188
|
|
|
14167
14189
|
function _extends() {
|
|
14168
14190
|
_extends = Object.assign || function (target) {
|
|
@@ -14429,14 +14451,14 @@ function useSwipeable(options) {
|
|
|
14429
14451
|
return handlers;
|
|
14430
14452
|
}
|
|
14431
14453
|
|
|
14432
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14454
|
+
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
14455
|
var ArrowButton = function (_a) {
|
|
14434
14456
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14435
14457
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14436
14458
|
};
|
|
14437
|
-
var templateObject_1$
|
|
14459
|
+
var templateObject_1$T;
|
|
14438
14460
|
|
|
14439
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
14461
|
+
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
14462
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14441
14463
|
var SlideDots = function (_a) {
|
|
14442
14464
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14445,11 +14467,11 @@ var SlideDots = function (_a) {
|
|
|
14445
14467
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14446
14468
|
: 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
14469
|
};
|
|
14448
|
-
var templateObject_1$
|
|
14470
|
+
var templateObject_1$S;
|
|
14449
14471
|
|
|
14450
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14451
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14452
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14472
|
+
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"])));
|
|
14473
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14474
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14453
14475
|
var SlideNavigation = function (_a) {
|
|
14454
14476
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14455
14477
|
var theme = useTheme();
|
|
@@ -14461,23 +14483,23 @@ var SlideNavigation = function (_a) {
|
|
|
14461
14483
|
onNavigate(selectedIndex + 1);
|
|
14462
14484
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14463
14485
|
};
|
|
14464
|
-
var templateObject_1$
|
|
14486
|
+
var templateObject_1$R, templateObject_2$F, templateObject_3$z;
|
|
14465
14487
|
|
|
14466
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
14488
|
+
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
14489
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14468
14490
|
return borderRadiusVariant &&
|
|
14469
14491
|
"\n border-radius: 40px;\n ";
|
|
14470
14492
|
});
|
|
14471
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
14472
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
14493
|
+
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'); });
|
|
14494
|
+
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
14495
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14474
14496
|
var _b, _c;
|
|
14475
14497
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14476
14498
|
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
14499
|
});
|
|
14478
|
-
var templateObject_1$
|
|
14500
|
+
var templateObject_1$Q, templateObject_2$E, templateObject_3$y;
|
|
14479
14501
|
|
|
14480
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
14502
|
+
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
14503
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14482
14504
|
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
14505
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14501,9 +14523,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14501
14523
|
}, [index, images]);
|
|
14502
14524
|
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
14525
|
};
|
|
14504
|
-
var templateObject_1$
|
|
14526
|
+
var templateObject_1$P;
|
|
14505
14527
|
|
|
14506
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
14528
|
+
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
14529
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14508
14530
|
return borderRadiusVariant &&
|
|
14509
14531
|
"\n border-radius: 40px;\n ";
|
|
@@ -14512,11 +14534,11 @@ var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __ma
|
|
|
14512
14534
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14513
14535
|
});
|
|
14514
14536
|
// 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$
|
|
14537
|
+
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'); });
|
|
14538
|
+
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"])));
|
|
14539
|
+
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"])));
|
|
14540
|
+
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"])));
|
|
14541
|
+
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
14542
|
var Text$2 = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14521
14543
|
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
14544
|
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 +14599,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14577
14599
|
} }, 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
14600
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14579
14601
|
};
|
|
14580
|
-
var templateObject_1$
|
|
14602
|
+
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
14603
|
|
|
14582
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
14604
|
+
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
14605
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14584
14606
|
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
14607
|
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
14608
|
};
|
|
14587
|
-
var templateObject_1$
|
|
14609
|
+
var templateObject_1$N;
|
|
14588
14610
|
|
|
14589
14611
|
var __defProp$1 = Object.defineProperty;
|
|
14590
14612
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14717,17 +14739,17 @@ var Portal = function (_a) {
|
|
|
14717
14739
|
var visibleStyle = function (_a) {
|
|
14718
14740
|
var opened = _a.opened;
|
|
14719
14741
|
return opened
|
|
14720
|
-
? css(templateObject_1$
|
|
14742
|
+
? 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
14743
|
};
|
|
14722
14744
|
var transformStyle = function (_a) {
|
|
14723
14745
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14724
14746
|
return opened
|
|
14725
|
-
? css(templateObject_3$
|
|
14747
|
+
? 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
14748
|
};
|
|
14727
|
-
var Container$z = newStyled.div(templateObject_6$
|
|
14749
|
+
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
14750
|
var width = _a.width;
|
|
14729
14751
|
return width
|
|
14730
|
-
? css(templateObject_5$
|
|
14752
|
+
? css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14731
14753
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14732
14754
|
});
|
|
14733
14755
|
}, visibleStyle, transformStyle);
|
|
@@ -14772,9 +14794,9 @@ var useModal = function (id) {
|
|
|
14772
14794
|
close: close,
|
|
14773
14795
|
}); }, [close, open, opened]);
|
|
14774
14796
|
};
|
|
14775
|
-
var templateObject_1$
|
|
14797
|
+
var templateObject_1$M, templateObject_2$C, templateObject_3$w, templateObject_4$p, templateObject_5$i, templateObject_6$g, templateObject_7$e;
|
|
14776
14798
|
|
|
14777
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14799
|
+
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
14800
|
var height = _a.height;
|
|
14779
14801
|
return height || '0.5rem';
|
|
14780
14802
|
}, function (_a) {
|
|
@@ -14846,19 +14868,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14846
14868
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14847
14869
|
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
14870
|
};
|
|
14849
|
-
var templateObject_1$
|
|
14871
|
+
var templateObject_1$L;
|
|
14850
14872
|
|
|
14851
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14873
|
+
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
14874
|
var theme = _a.theme;
|
|
14853
14875
|
return theme.component.orderBar.backgroundColor;
|
|
14854
14876
|
});
|
|
14855
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14877
|
+
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
14878
|
var OrderBar = function (_a) {
|
|
14857
14879
|
var message = _a.message, color = _a.color;
|
|
14858
14880
|
var theme = useTheme();
|
|
14859
14881
|
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
14882
|
};
|
|
14861
|
-
var templateObject_1$
|
|
14883
|
+
var templateObject_1$K, templateObject_2$B;
|
|
14862
14884
|
|
|
14863
14885
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14864
14886
|
background: props.bgColor,
|
|
@@ -14882,15 +14904,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14882
14904
|
justifyContent: 'center',
|
|
14883
14905
|
gap: '10px',
|
|
14884
14906
|
});
|
|
14885
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14907
|
+
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
14908
|
var bgColor = _a.bgColor;
|
|
14887
14909
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14888
14910
|
}, function (_a) {
|
|
14889
14911
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14890
14912
|
return width;
|
|
14891
14913
|
});
|
|
14892
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14893
|
-
var templateObject_1$
|
|
14914
|
+
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"])));
|
|
14915
|
+
var templateObject_1$J, templateObject_2$A;
|
|
14894
14916
|
|
|
14895
14917
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14896
14918
|
var background = _a.background, width = _a.width;
|
|
@@ -18710,12 +18732,12 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18710
18732
|
HTMLReactParser$1.attributesToProps;
|
|
18711
18733
|
HTMLReactParser$1.Element;
|
|
18712
18734
|
|
|
18713
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
18714
|
-
var Card$1 = 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$
|
|
18735
|
+
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"])));
|
|
18736
|
+
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"])));
|
|
18737
|
+
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"])));
|
|
18738
|
+
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"])));
|
|
18739
|
+
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"])));
|
|
18740
|
+
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
18741
|
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
18742
|
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
18743
|
var PackSelector = function (_a) {
|
|
@@ -18747,14 +18769,14 @@ var PackCard = function (_a) {
|
|
|
18747
18769
|
currency: currencyCode || 'USD',
|
|
18748
18770
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18749
18771
|
};
|
|
18750
|
-
var templateObject_1$
|
|
18772
|
+
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
18773
|
|
|
18752
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
18753
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18754
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18774
|
+
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"])));
|
|
18775
|
+
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"])));
|
|
18776
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18755
18777
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18756
18778
|
}));
|
|
18757
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18779
|
+
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
18780
|
var bold = _a.bold;
|
|
18759
18781
|
return (bold ? '700' : '500');
|
|
18760
18782
|
}, function (_a) {
|
|
@@ -18771,7 +18793,7 @@ var PageNumber = newStyled.span(templateObject_4$m || (templateObject_4$m = __ma
|
|
|
18771
18793
|
var background = _a.background;
|
|
18772
18794
|
return background || 'unset';
|
|
18773
18795
|
});
|
|
18774
|
-
var templateObject_1$
|
|
18796
|
+
var templateObject_1$H, templateObject_2$y, templateObject_3$u, templateObject_4$n;
|
|
18775
18797
|
|
|
18776
18798
|
var Pagination = function (_a) {
|
|
18777
18799
|
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 +18858,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18836
18858
|
: 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
18859
|
};
|
|
18838
18860
|
|
|
18839
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
18861
|
+
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
18862
|
var width = _a.width;
|
|
18841
18863
|
return width;
|
|
18842
18864
|
}, function (_a) {
|
|
@@ -18854,12 +18876,12 @@ var PaymentMethod = function (_a) {
|
|
|
18854
18876
|
var theme = useTheme();
|
|
18855
18877
|
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
18878
|
};
|
|
18857
|
-
var templateObject_1$
|
|
18879
|
+
var templateObject_1$G;
|
|
18858
18880
|
|
|
18859
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
18881
|
+
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
18882
|
var IMAGE_WIDTH = '63px';
|
|
18861
|
-
var ImageContainer$3 = newStyled.div(templateObject_2$
|
|
18862
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18883
|
+
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);
|
|
18884
|
+
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
18885
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18864
18886
|
}), IMAGE_WIDTH);
|
|
18865
18887
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -18882,7 +18904,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18882
18904
|
margin: margin,
|
|
18883
18905
|
});
|
|
18884
18906
|
});
|
|
18885
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18907
|
+
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
18908
|
var withTag = _a.withTag; _a.theme;
|
|
18887
18909
|
return withTag
|
|
18888
18910
|
? mediaQueries({
|
|
@@ -18891,15 +18913,15 @@ var PriceContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = _
|
|
|
18891
18913
|
})
|
|
18892
18914
|
: 'justify-content: end';
|
|
18893
18915
|
});
|
|
18894
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18895
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18916
|
+
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"])));
|
|
18917
|
+
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
18918
|
var SimpleOrderItem = function (_a) {
|
|
18897
18919
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18898
18920
|
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
18921
|
var theme = useTheme();
|
|
18900
18922
|
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
18923
|
};
|
|
18902
|
-
var templateObject_1$
|
|
18924
|
+
var templateObject_1$F, templateObject_2$x, templateObject_3$t, templateObject_4$m, templateObject_5$g, templateObject_6$e;
|
|
18903
18925
|
|
|
18904
18926
|
var P$1 = newStyled.p(function (_a) {
|
|
18905
18927
|
var color = _a.color;
|
|
@@ -18913,7 +18935,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18913
18935
|
margin: '0.938rem 4.188rem',
|
|
18914
18936
|
});
|
|
18915
18937
|
});
|
|
18916
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18938
|
+
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
18939
|
var height = _a.height;
|
|
18918
18940
|
return height || '0.5rem';
|
|
18919
18941
|
}, function (_a) {
|
|
@@ -18958,12 +18980,12 @@ var ProgressBar = function (_a) {
|
|
|
18958
18980
|
var theme = useTheme();
|
|
18959
18981
|
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
18982
|
};
|
|
18961
|
-
var templateObject_1$
|
|
18983
|
+
var templateObject_1$E;
|
|
18962
18984
|
|
|
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$
|
|
18985
|
+
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; });
|
|
18986
|
+
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"])));
|
|
18987
|
+
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"])));
|
|
18988
|
+
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
18989
|
var QuantityPicker = function (_a) {
|
|
18968
18990
|
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
18991
|
var theme = useTheme();
|
|
@@ -18988,7 +19010,7 @@ var QuantityPicker = function (_a) {
|
|
|
18988
19010
|
}, [value, clamp]);
|
|
18989
19011
|
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
19012
|
};
|
|
18991
|
-
var templateObject_1$
|
|
19013
|
+
var templateObject_1$D, templateObject_2$w, templateObject_3$s, templateObject_4$l;
|
|
18992
19014
|
|
|
18993
19015
|
/* base styles & size variants */
|
|
18994
19016
|
var CustomRadioStyles$1 = {
|
|
@@ -19057,9 +19079,9 @@ var ContainerStyles$1 = {
|
|
|
19057
19079
|
},
|
|
19058
19080
|
};
|
|
19059
19081
|
|
|
19060
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
19082
|
+
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
19083
|
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$
|
|
19084
|
+
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
19085
|
var disabled = _a.disabled;
|
|
19064
19086
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19065
19087
|
});
|
|
@@ -19067,7 +19089,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
19067
19089
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19068
19090
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
19069
19091
|
]; });
|
|
19070
|
-
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$
|
|
19092
|
+
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
19093
|
var RadioPrimary = function (_a) {
|
|
19072
19094
|
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
19095
|
var theme = useTheme();
|
|
@@ -19077,7 +19099,7 @@ var RadioPrimary = function (_a) {
|
|
|
19077
19099
|
};
|
|
19078
19100
|
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
19101
|
};
|
|
19080
|
-
var templateObject_1$
|
|
19102
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$r;
|
|
19081
19103
|
|
|
19082
19104
|
var RadioGroupInput = function (_a) {
|
|
19083
19105
|
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 +19178,9 @@ var ContainerStyles = {
|
|
|
19156
19178
|
},
|
|
19157
19179
|
};
|
|
19158
19180
|
|
|
19159
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19181
|
+
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
19182
|
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$
|
|
19183
|
+
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
19184
|
var disabled = _a.disabled;
|
|
19163
19185
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19164
19186
|
});
|
|
@@ -19166,7 +19188,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19166
19188
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19167
19189
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19168
19190
|
]; });
|
|
19169
|
-
var StyledLabel = newStyled(Label$5)(templateObject_3$
|
|
19191
|
+
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
19192
|
var theme = _a.theme;
|
|
19171
19193
|
return theme.component.radio.textSize;
|
|
19172
19194
|
}, function (_a) {
|
|
@@ -19182,7 +19204,7 @@ var ClubRadioInput = function (_a) {
|
|
|
19182
19204
|
};
|
|
19183
19205
|
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
19206
|
};
|
|
19185
|
-
var templateObject_1$
|
|
19207
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$q;
|
|
19186
19208
|
|
|
19187
19209
|
var ClubRadioGroupInput = function (_a) {
|
|
19188
19210
|
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 +19232,12 @@ function formatDate(date, format) {
|
|
|
19210
19232
|
}
|
|
19211
19233
|
}
|
|
19212
19234
|
|
|
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$
|
|
19235
|
+
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"])));
|
|
19236
|
+
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"])));
|
|
19237
|
+
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"])));
|
|
19238
|
+
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"])));
|
|
19239
|
+
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"])));
|
|
19240
|
+
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
19241
|
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
19242
|
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
19243
|
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 +19273,16 @@ var Review$1 = function (_a) {
|
|
|
19251
19273
|
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
19274
|
(!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
19275
|
};
|
|
19254
|
-
var templateObject_1$
|
|
19276
|
+
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
19277
|
|
|
19256
19278
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19257
19279
|
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$
|
|
19280
|
+
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"])));
|
|
19281
|
+
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"])));
|
|
19282
|
+
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"])));
|
|
19283
|
+
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"])));
|
|
19284
|
+
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"])));
|
|
19285
|
+
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
19286
|
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
19287
|
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
19288
|
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 +19329,14 @@ var Review = function (_a) {
|
|
|
19307
19329
|
: description,
|
|
19308
19330
|
} }, 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
19331
|
};
|
|
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$
|
|
19332
|
+
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;
|
|
19333
|
+
|
|
19334
|
+
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"])));
|
|
19335
|
+
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"])));
|
|
19336
|
+
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"])));
|
|
19337
|
+
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"])));
|
|
19338
|
+
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"])));
|
|
19339
|
+
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
19340
|
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
19341
|
var backgroundUrl = _a.backgroundUrl;
|
|
19320
19342
|
return "url(".concat(backgroundUrl, ")");
|
|
@@ -19325,17 +19347,17 @@ var ReviewsHeader = function (_a) {
|
|
|
19325
19347
|
var theme = useTheme();
|
|
19326
19348
|
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
19349
|
};
|
|
19328
|
-
var templateObject_1$
|
|
19350
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$n, templateObject_4$i, templateObject_5$d, templateObject_6$b, templateObject_7$a;
|
|
19329
19351
|
|
|
19330
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
19331
|
-
var Text = newStyled.p(templateObject_2$
|
|
19352
|
+
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"])));
|
|
19353
|
+
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
19354
|
var ScrollToTop = function (_a) {
|
|
19333
19355
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19334
19356
|
var theme = useTheme();
|
|
19335
19357
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19336
19358
|
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
19359
|
};
|
|
19338
|
-
var templateObject_1$
|
|
19360
|
+
var templateObject_1$x, templateObject_2$q;
|
|
19339
19361
|
|
|
19340
19362
|
var Input = newStyled.input(function (props) { return ({
|
|
19341
19363
|
padding: props.theme.component.input.padding,
|
|
@@ -19366,7 +19388,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19366
19388
|
},
|
|
19367
19389
|
}); });
|
|
19368
19390
|
|
|
19369
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
19391
|
+
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
19392
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19371
19393
|
}));
|
|
19372
19394
|
var Description = newStyled.div({
|
|
@@ -19385,7 +19407,7 @@ var ProductItem = function (_a) {
|
|
|
19385
19407
|
var theme = useTheme();
|
|
19386
19408
|
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
19409
|
};
|
|
19388
|
-
var templateObject_1$
|
|
19410
|
+
var templateObject_1$w;
|
|
19389
19411
|
|
|
19390
19412
|
var Container$j = newStyled.div({
|
|
19391
19413
|
display: 'flex',
|
|
@@ -19401,7 +19423,7 @@ var Ul = newStyled.ul({
|
|
|
19401
19423
|
margin: '0px',
|
|
19402
19424
|
padding: '0px',
|
|
19403
19425
|
});
|
|
19404
|
-
var Li = newStyled.li(templateObject_1$
|
|
19426
|
+
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
19427
|
padding: [0, '0rem 1rem'],
|
|
19406
19428
|
borderRadius: [0, '0.5rem'],
|
|
19407
19429
|
}));
|
|
@@ -19413,12 +19435,12 @@ var Anchor = newStyled.a({
|
|
|
19413
19435
|
padding: 0,
|
|
19414
19436
|
textDecoration: 'none',
|
|
19415
19437
|
});
|
|
19416
|
-
var Container$i = newStyled.div(templateObject_2$
|
|
19438
|
+
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
19439
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19418
19440
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19419
19441
|
borderRadius: ['0', '0.5rem'],
|
|
19420
19442
|
}));
|
|
19421
|
-
var Header = newStyled.div(templateObject_3$
|
|
19443
|
+
var Header = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19422
19444
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19423
19445
|
}));
|
|
19424
19446
|
var ResultsPanel = function (_a) {
|
|
@@ -19426,9 +19448,9 @@ var ResultsPanel = function (_a) {
|
|
|
19426
19448
|
var theme = useTheme();
|
|
19427
19449
|
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
19450
|
};
|
|
19429
|
-
var templateObject_1$
|
|
19451
|
+
var templateObject_1$v, templateObject_2$p, templateObject_3$m;
|
|
19430
19452
|
|
|
19431
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19453
|
+
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
19454
|
right: ['1rem', '7.75rem'],
|
|
19433
19455
|
top: ['0.75rem', '0.75rem'],
|
|
19434
19456
|
}));
|
|
@@ -19437,7 +19459,7 @@ var ClearButton = function (_a) {
|
|
|
19437
19459
|
var theme = useTheme();
|
|
19438
19460
|
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
19461
|
};
|
|
19440
|
-
var templateObject_1$
|
|
19462
|
+
var templateObject_1$u;
|
|
19441
19463
|
|
|
19442
19464
|
var SearchIconContainer = newStyled.div({
|
|
19443
19465
|
display: 'flex',
|
|
@@ -19447,7 +19469,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19447
19469
|
background: 'white',
|
|
19448
19470
|
alignSelf: 'center',
|
|
19449
19471
|
});
|
|
19450
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19472
|
+
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
19473
|
var SearchControl = function (_a) {
|
|
19452
19474
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19453
19475
|
var theme = useTheme();
|
|
@@ -19463,7 +19485,7 @@ var SearchControl = function (_a) {
|
|
|
19463
19485
|
}
|
|
19464
19486
|
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
19487
|
};
|
|
19466
|
-
var templateObject_1$
|
|
19488
|
+
var templateObject_1$t;
|
|
19467
19489
|
|
|
19468
19490
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19469
19491
|
var reducer = function (state, action) {
|
|
@@ -19530,20 +19552,20 @@ var SearchBar = function (_a) {
|
|
|
19530
19552
|
} }, 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
19553
|
};
|
|
19532
19554
|
|
|
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$
|
|
19555
|
+
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"])));
|
|
19556
|
+
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"])));
|
|
19557
|
+
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"])));
|
|
19558
|
+
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"])));
|
|
19559
|
+
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
19560
|
var SearchNavigation = function (_a) {
|
|
19539
19561
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19540
19562
|
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
19563
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19542
19564
|
}) }, void 0)] }, void 0));
|
|
19543
19565
|
};
|
|
19544
|
-
var templateObject_1$
|
|
19566
|
+
var templateObject_1$s, templateObject_2$o, templateObject_3$l, templateObject_4$h, templateObject_5$c;
|
|
19545
19567
|
|
|
19546
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19568
|
+
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
19569
|
var alignCenter = _a.alignCenter;
|
|
19548
19570
|
return alignCenter &&
|
|
19549
19571
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19553,26 +19575,26 @@ var Container$f = newStyled.div(templateObject_1$q || (templateObject_1$q = __ma
|
|
|
19553
19575
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19554
19576
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19555
19577
|
});
|
|
19556
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19557
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19578
|
+
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"])));
|
|
19579
|
+
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
19580
|
var ShortBanner = function (_a) {
|
|
19559
19581
|
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
19582
|
var theme = useTheme();
|
|
19561
19583
|
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
19584
|
};
|
|
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$
|
|
19585
|
+
var templateObject_1$r, templateObject_2$n, templateObject_3$k;
|
|
19586
|
+
|
|
19587
|
+
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; });
|
|
19588
|
+
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; });
|
|
19589
|
+
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; });
|
|
19590
|
+
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"])));
|
|
19591
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19592
|
+
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
19593
|
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
19594
|
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
19595
|
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
19596
|
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$
|
|
19597
|
+
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
19598
|
|
|
19577
19599
|
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19578
19600
|
var getCellColor$1 = function (index, cell) {
|
|
@@ -19613,16 +19635,16 @@ var SizeChartTable = function (_a) {
|
|
|
19613
19635
|
}, 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
19636
|
};
|
|
19615
19637
|
|
|
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$
|
|
19638
|
+
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; });
|
|
19639
|
+
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; });
|
|
19640
|
+
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; });
|
|
19641
|
+
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
19642
|
var SizeTable = function (_a) {
|
|
19621
19643
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19622
19644
|
var theme = useTheme();
|
|
19623
19645
|
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
19646
|
};
|
|
19625
|
-
var templateObject_1$
|
|
19647
|
+
var templateObject_1$p, templateObject_2$l, templateObject_3$i, templateObject_4$f;
|
|
19626
19648
|
|
|
19627
19649
|
var getStylesBySize$7 = function (size) {
|
|
19628
19650
|
switch (size) {
|
|
@@ -19649,7 +19671,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19649
19671
|
} });
|
|
19650
19672
|
};
|
|
19651
19673
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19652
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19674
|
+
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
19675
|
};
|
|
19654
19676
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19655
19677
|
if (disabled)
|
|
@@ -19665,23 +19687,23 @@ var TextButton = function (_a) {
|
|
|
19665
19687
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19666
19688
|
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
19689
|
};
|
|
19668
|
-
var templateObject_1$
|
|
19690
|
+
var templateObject_1$o;
|
|
19669
19691
|
|
|
19670
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
19671
|
-
var P = newStyled.p(templateObject_2$
|
|
19672
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19692
|
+
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"])));
|
|
19693
|
+
var P = newStyled.p(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19694
|
+
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
19695
|
var SizeFitGuide = function (_a) {
|
|
19674
19696
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19675
19697
|
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
19698
|
};
|
|
19677
|
-
var templateObject_1$
|
|
19699
|
+
var templateObject_1$n, templateObject_2$k, templateObject_3$h;
|
|
19678
19700
|
|
|
19679
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19701
|
+
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
19702
|
var inline = _a.inline;
|
|
19681
19703
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19682
19704
|
});
|
|
19683
|
-
var Row = newStyled.div(templateObject_2$
|
|
19684
|
-
var templateObject_1$
|
|
19705
|
+
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"])));
|
|
19706
|
+
var templateObject_1$m, templateObject_2$j;
|
|
19685
19707
|
|
|
19686
19708
|
var SizeSelector = function (_a) {
|
|
19687
19709
|
var _b;
|
|
@@ -19703,7 +19725,7 @@ var SizeSelector = function (_a) {
|
|
|
19703
19725
|
}) }), void 0)] }), void 0));
|
|
19704
19726
|
};
|
|
19705
19727
|
|
|
19706
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19728
|
+
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
19729
|
var titleSize = _a.titleSize;
|
|
19708
19730
|
return titleSize;
|
|
19709
19731
|
}, function (_a) {
|
|
@@ -19720,18 +19742,18 @@ var Tab = function (_a) {
|
|
|
19720
19742
|
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
19743
|
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
19744
|
};
|
|
19723
|
-
var templateObject_1$
|
|
19745
|
+
var templateObject_1$l;
|
|
19724
19746
|
|
|
19725
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
19726
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19747
|
+
var Container$c = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19748
|
+
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
19749
|
var backgroundColor = _a.backgroundColor;
|
|
19728
19750
|
return backgroundColor;
|
|
19729
19751
|
}, function (_a) {
|
|
19730
19752
|
var borderColor = _a.borderColor;
|
|
19731
19753
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19732
19754
|
});
|
|
19733
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19734
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19755
|
+
var TabContent = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19756
|
+
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
19757
|
var Tabs = function (_a) {
|
|
19736
19758
|
var _b;
|
|
19737
19759
|
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 +19764,14 @@ var Tabs = function (_a) {
|
|
|
19742
19764
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19743
19765
|
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
19766
|
};
|
|
19745
|
-
var templateObject_1$
|
|
19767
|
+
var templateObject_1$k, templateObject_2$i, templateObject_3$g, templateObject_4$e;
|
|
19746
19768
|
|
|
19747
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19769
|
+
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
19770
|
var Tag = function (_a) {
|
|
19749
19771
|
var text = _a.text, className = _a.className;
|
|
19750
19772
|
return jsx$1(Container$b, __assign$1({ className: className }, { children: text }), void 0);
|
|
19751
19773
|
};
|
|
19752
|
-
var templateObject_1$
|
|
19774
|
+
var templateObject_1$j;
|
|
19753
19775
|
|
|
19754
19776
|
var getStylesBySize$6 = function (size, styledBorder) {
|
|
19755
19777
|
switch (size) {
|
|
@@ -19860,9 +19882,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19860
19882
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19861
19883
|
};
|
|
19862
19884
|
|
|
19863
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19864
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19865
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19885
|
+
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"])));
|
|
19886
|
+
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"])));
|
|
19887
|
+
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
19888
|
var ImageVideo = function (_a) {
|
|
19867
19889
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19868
19890
|
var video = useRef(null);
|
|
@@ -19882,12 +19904,12 @@ var ImageVideo = function (_a) {
|
|
|
19882
19904
|
height: '100%',
|
|
19883
19905
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19884
19906
|
};
|
|
19885
|
-
var templateObject_1$
|
|
19907
|
+
var templateObject_1$i, templateObject_2$h, templateObject_3$f;
|
|
19886
19908
|
|
|
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$
|
|
19909
|
+
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"])));
|
|
19910
|
+
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"])));
|
|
19911
|
+
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);
|
|
19912
|
+
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
19913
|
var TextWithImage = function (_a) {
|
|
19892
19914
|
var _b, _c, _d, _e;
|
|
19893
19915
|
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 +19939,25 @@ var TextWithImage = function (_a) {
|
|
|
19917
19939
|
},
|
|
19918
19940
|
} }, 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
19941
|
};
|
|
19920
|
-
var templateObject_1$
|
|
19942
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$e, templateObject_4$d;
|
|
19921
19943
|
|
|
19922
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19944
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19923
19945
|
var timerColor = _a.timerColor;
|
|
19924
19946
|
return timerColor || '';
|
|
19925
19947
|
});
|
|
19926
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
19948
|
+
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
19949
|
var timerColor = _a.timerColor;
|
|
19928
19950
|
return timerColor || '';
|
|
19929
19951
|
});
|
|
19930
|
-
var UnitBlock = newStyled(Text$7)(templateObject_3$
|
|
19952
|
+
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
19953
|
var theme = _a.theme;
|
|
19932
19954
|
return theme.colors.shades.white.color;
|
|
19933
19955
|
}, function (_a) {
|
|
19934
19956
|
var theme = _a.theme;
|
|
19935
19957
|
return theme.colors.shades.white.color;
|
|
19936
19958
|
});
|
|
19937
|
-
var Unit = newStyled.p(templateObject_4$
|
|
19938
|
-
var templateObject_1$
|
|
19959
|
+
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"])));
|
|
19960
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$d, templateObject_4$c;
|
|
19939
19961
|
|
|
19940
19962
|
var HRS = 'HRS';
|
|
19941
19963
|
var MIN = 'MIN';
|
|
@@ -19976,9 +19998,9 @@ var Timer = function (_a) {
|
|
|
19976
19998
|
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
19999
|
};
|
|
19978
20000
|
|
|
19979
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19980
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19981
|
-
var Currency = newStyled.span(templateObject_3$
|
|
20001
|
+
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"])));
|
|
20002
|
+
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; });
|
|
20003
|
+
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
20004
|
var theme = _a.theme;
|
|
19983
20005
|
return theme.component.total.basicTotal.currency.color;
|
|
19984
20006
|
}, function (_a) {
|
|
@@ -19991,21 +20013,21 @@ var Currency = newStyled.span(templateObject_3$b || (templateObject_3$b = __make
|
|
|
19991
20013
|
var theme = _a.theme;
|
|
19992
20014
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19993
20015
|
});
|
|
19994
|
-
var Container$9 = newStyled.div(templateObject_4$
|
|
20016
|
+
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
20017
|
var highlightColor = _a.highlightColor;
|
|
19996
20018
|
return highlightColor;
|
|
19997
20019
|
});
|
|
19998
|
-
var TotalContainer = newStyled(Container$9)(templateObject_5$
|
|
20020
|
+
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
20021
|
var showTotalLabel = _a.showTotalLabel;
|
|
20000
20022
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20001
20023
|
});
|
|
20002
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
20024
|
+
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
20025
|
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
20026
|
var theme = _a.theme;
|
|
20005
20027
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20006
20028
|
});
|
|
20007
20029
|
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$
|
|
20030
|
+
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
20031
|
|
|
20010
20032
|
var Total = function (_a) {
|
|
20011
20033
|
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 +20035,19 @@ var Total = function (_a) {
|
|
|
20013
20035
|
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
20036
|
};
|
|
20015
20037
|
|
|
20016
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
20038
|
+
var Wrapper = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20017
20039
|
var color = _a.color;
|
|
20018
20040
|
return color;
|
|
20019
20041
|
});
|
|
20020
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
20021
|
-
var Item = newStyled.h4(templateObject_3$
|
|
20042
|
+
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"])));
|
|
20043
|
+
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
20044
|
var theme = _a.theme;
|
|
20023
20045
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
20024
20046
|
}, function (_a) {
|
|
20025
20047
|
var theme = _a.theme;
|
|
20026
20048
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
20027
20049
|
});
|
|
20028
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
20050
|
+
var CouponItem = newStyled(Item)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
20029
20051
|
var color = _a.color;
|
|
20030
20052
|
return color;
|
|
20031
20053
|
});
|
|
@@ -20038,13 +20060,60 @@ var Subtotal = function (_a) {
|
|
|
20038
20060
|
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
20061
|
})] }), void 0));
|
|
20040
20062
|
};
|
|
20041
|
-
var templateObject_1$
|
|
20063
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$b, templateObject_4$a;
|
|
20042
20064
|
|
|
20043
20065
|
var Totals = {
|
|
20044
20066
|
Total: Total,
|
|
20045
20067
|
Subtotal: Subtotal,
|
|
20046
20068
|
};
|
|
20047
20069
|
|
|
20070
|
+
var slideInAnimation = function (distanceFromTop) {
|
|
20071
|
+
if (distanceFromTop === void 0) { distanceFromTop = '124px'; }
|
|
20072
|
+
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);
|
|
20073
|
+
};
|
|
20074
|
+
var mobileSlideInAnimation = function (distanceFromTop) {
|
|
20075
|
+
if (distanceFromTop === void 0) { distanceFromTop = '85px'; }
|
|
20076
|
+
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);
|
|
20077
|
+
};
|
|
20078
|
+
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"])));
|
|
20079
|
+
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) {
|
|
20080
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20081
|
+
return distanceFromTop || '124px';
|
|
20082
|
+
}, function (_a) {
|
|
20083
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20084
|
+
return slideInAnimation(distanceFromTop);
|
|
20085
|
+
}, function (_a) {
|
|
20086
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20087
|
+
return distanceFromTop || '85px';
|
|
20088
|
+
}, function (_a) {
|
|
20089
|
+
var distanceFromTop = _a.distanceFromTop;
|
|
20090
|
+
return mobileSlideInAnimation(distanceFromTop);
|
|
20091
|
+
});
|
|
20092
|
+
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) {
|
|
20093
|
+
var severity = _a.severity;
|
|
20094
|
+
return severity === 'error' ? '#C64844' : '#292929';
|
|
20095
|
+
});
|
|
20096
|
+
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"])));
|
|
20097
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$9, templateObject_5$9, templateObject_6$8;
|
|
20098
|
+
|
|
20099
|
+
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20100
|
+
var severity = _a.severity, summary = _a.summary, life = _a.life, _b = _a.withCloseIcon, withCloseIcon = _b === void 0 ? true : _b, distanceFromTop = _a.distanceFromTop;
|
|
20101
|
+
var _c = useState(false), isVisible = _c[0], setIsVisible = _c[1];
|
|
20102
|
+
useEffect(function () {
|
|
20103
|
+
if (isVisible) {
|
|
20104
|
+
var timeout_1 = setTimeout(function () {
|
|
20105
|
+
setIsVisible(false);
|
|
20106
|
+
}, life || 3000);
|
|
20107
|
+
return function () { return clearTimeout(timeout_1); };
|
|
20108
|
+
}
|
|
20109
|
+
}, [isVisible, life]);
|
|
20110
|
+
useImperativeHandle(ref, function () { return ({
|
|
20111
|
+
show: function () { return setIsVisible(true); },
|
|
20112
|
+
}); });
|
|
20113
|
+
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));
|
|
20114
|
+
});
|
|
20115
|
+
Toast.displayName = 'Toast';
|
|
20116
|
+
|
|
20048
20117
|
var Container$8 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20049
20118
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20050
20119
|
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; });
|
|
@@ -20696,17 +20765,20 @@ var SliderThumbnail = newStyled(Slider)(templateObject_7$1 || (templateObject_7$
|
|
|
20696
20765
|
var theme = _a.theme;
|
|
20697
20766
|
return theme.colors.pallete.primary.color;
|
|
20698
20767
|
});
|
|
20699
|
-
var StyledImage = newStyled(Image$3)(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])))
|
|
20768
|
+
var StyledImage = newStyled(Image$3)(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"], ["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20769
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
20770
|
+
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
20771
|
+
});
|
|
20700
20772
|
var SlideItem = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (_a) {
|
|
20701
20773
|
var paddingRight = _a.paddingRight;
|
|
20702
20774
|
return paddingRight || '12px';
|
|
20703
20775
|
});
|
|
20704
|
-
var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n object-fit: cover;\n width: ", ";\n
|
|
20776
|
+
var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n object-fit: cover;\n width: ", ";\n aspect-ratio: ", ";\n border-radius: ", ";\n"], ["\n object-fit: cover;\n width: ", ";\n aspect-ratio: ", ";\n border-radius: ", ";\n"])), function (_a) {
|
|
20705
20777
|
var width = _a.width, theme = _a.theme;
|
|
20706
20778
|
return width || theme.component.gallery.thumbnail.mobile.width;
|
|
20707
20779
|
}, function (_a) {
|
|
20708
|
-
var
|
|
20709
|
-
return
|
|
20780
|
+
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
20781
|
+
return isRatioSquare ? '1/1' : theme.component.gallery.aspectRatio;
|
|
20710
20782
|
}, function (_a) {
|
|
20711
20783
|
var borderRadius = _a.borderRadius;
|
|
20712
20784
|
return borderRadius || '0px';
|
|
@@ -20714,10 +20786,10 @@ var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_1
|
|
|
20714
20786
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1;
|
|
20715
20787
|
|
|
20716
20788
|
var ProductGalleryMobileV4 = function (_a) {
|
|
20717
|
-
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings;
|
|
20789
|
+
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, imagesSliderConfig = _a.imagesSliderConfig, thumbnailSettings = _a.thumbnailSettings, _b = _a.isRatioSquare, isRatioSquare = _b === void 0 ? false : _b;
|
|
20718
20790
|
var colors = useTheme$1().colors;
|
|
20719
|
-
var
|
|
20720
|
-
var
|
|
20791
|
+
var _c = useState(undefined), nav1 = _c[0], setNav1 = _c[1];
|
|
20792
|
+
var _d = useState(undefined), nav2 = _d[0], setNav2 = _d[1];
|
|
20721
20793
|
var slick = useRef(null);
|
|
20722
20794
|
var thumbnailRef = useRef(null);
|
|
20723
20795
|
var sliderWrapper = useRef(null);
|
|
@@ -20731,10 +20803,10 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20731
20803
|
}, []);
|
|
20732
20804
|
return (jsx$1(Container$1, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxs$1(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsx$1(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
|
|
20733
20805
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20734
|
-
return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager" }, void 0), jsx$1(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20806
|
+
return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight, loading: "eager", isRatioSquare: isRatioSquare }, void 0), jsx$1(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20735
20807
|
}) }), void 0), jsx$1(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, (thumbnailSettings || THUMBNAIL_SETTINGS), { lazyLoad: "progressive" }, { children: images.map(function (_a) {
|
|
20736
20808
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20737
|
-
return (jsx$1(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsx$1(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig, { loading: "eager" }), void 0) }), key));
|
|
20809
|
+
return (jsx$1(SlideItem, __assign$1({ paddingRight: imagesSliderConfig === null || imagesSliderConfig === void 0 ? void 0 : imagesSliderConfig.spacesBetweenImages }, { children: jsx$1(ThumbnailImage, __assign$1({ alt: "".concat(alt, "-thumbnail"), src: url }, imagesSliderConfig, { loading: "eager", isRatioSquare: isRatioSquare }), void 0) }), key));
|
|
20738
20810
|
}) }), void 0)] }), void 0) }), void 0));
|
|
20739
20811
|
};
|
|
20740
20812
|
|
|
@@ -20790,5 +20862,5 @@ var SizeChartTableV2 = function (_a) {
|
|
|
20790
20862
|
}, 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));
|
|
20791
20863
|
};
|
|
20792
20864
|
|
|
20793
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CancellationFlowAccordionContentPerPartner, Card$3 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$2 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel$1 as PriceLabel, PriceLabelV2$1 as PriceLabelV2, PriceLabelV3, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
20865
|
+
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 };
|
|
20794
20866
|
//# sourceMappingURL=index.esm.js.map
|