@trafilea/afrodita-components 6.51.0 → 6.51.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 +1 -0
- package/build/index.esm.js +110 -106
- package/build/index.esm.js.map +1 -1
- package/build/index.js +110 -106
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3211,7 +3211,7 @@ var Container$1x = newStyled.div(templateObject_1$2y || (templateObject_1$2y = _
|
|
|
3211
3211
|
var size = _a.size;
|
|
3212
3212
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3213
3213
|
});
|
|
3214
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3214
|
+
var H3$2 = newStyled.h3(templateObject_2$1R || (templateObject_2$1R = __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) {
|
|
3215
3215
|
var textColor = _a.textColor;
|
|
3216
3216
|
return textColor;
|
|
3217
3217
|
}, function (_a) {
|
|
@@ -3228,7 +3228,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3228
3228
|
var theme = useTheme();
|
|
3229
3229
|
return (jsx$1(Container$1x, __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$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
3230
3230
|
};
|
|
3231
|
-
var templateObject_1$2y, templateObject_2$
|
|
3231
|
+
var templateObject_1$2y, templateObject_2$1R;
|
|
3232
3232
|
|
|
3233
3233
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3234
3234
|
var _a, _b, _c;
|
|
@@ -3281,7 +3281,7 @@ var Container$1w = newStyled.div(templateObject_1$2x || (templateObject_1$2x = _
|
|
|
3281
3281
|
var size = _a.size;
|
|
3282
3282
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3283
3283
|
});
|
|
3284
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
3284
|
+
var H3$1 = newStyled.h3(templateObject_2$1Q || (templateObject_2$1Q = __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) {
|
|
3285
3285
|
var textColor = _a.textColor;
|
|
3286
3286
|
return textColor;
|
|
3287
3287
|
}, function (_a) {
|
|
@@ -3298,7 +3298,7 @@ var DiscountTag$4 = function (_a) {
|
|
|
3298
3298
|
var theme = useTheme();
|
|
3299
3299
|
return (jsx$1(Container$1w, __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$1, __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));
|
|
3300
3300
|
};
|
|
3301
|
-
var templateObject_1$2x, templateObject_2$
|
|
3301
|
+
var templateObject_1$2x, templateObject_2$1Q;
|
|
3302
3302
|
|
|
3303
3303
|
var Viewports = {
|
|
3304
3304
|
mobile: 'mobile',
|
|
@@ -3408,7 +3408,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3408
3408
|
}
|
|
3409
3409
|
};
|
|
3410
3410
|
var Container$1v = newStyled.div(templateObject_1$2w || (templateObject_1$2w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3411
|
-
var Price$1 = newStyled.p(templateObject_2$
|
|
3411
|
+
var Price$1 = newStyled.p(templateObject_2$1P || (templateObject_2$1P = __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) {
|
|
3412
3412
|
var weight = _a.weight;
|
|
3413
3413
|
return (weight ? weight : '400');
|
|
3414
3414
|
}, function (_a) {
|
|
@@ -3465,7 +3465,7 @@ var PriceLabel$1 = function (_a) {
|
|
|
3465
3465
|
};
|
|
3466
3466
|
return (jsxs$1(Container$1v, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(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$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3467
3467
|
};
|
|
3468
|
-
var templateObject_1$2w, templateObject_2$
|
|
3468
|
+
var templateObject_1$2w, templateObject_2$1P, templateObject_3$1p;
|
|
3469
3469
|
|
|
3470
3470
|
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2v || (templateObject_1$2v = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3471
3471
|
var PriceLabelV2$1 = function (_a) {
|
|
@@ -3539,7 +3539,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3539
3539
|
var templateObject_1$2v;
|
|
3540
3540
|
|
|
3541
3541
|
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2u || (templateObject_1$2u = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3542
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3542
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$1O || (templateObject_2$1O = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
3543
3543
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$1o || (templateObject_3$1o = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
3544
3544
|
var PriceLabelV3 = function (_a) {
|
|
3545
3545
|
var _b;
|
|
@@ -3611,10 +3611,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
3611
3611
|
lineHeight: '22px',
|
|
3612
3612
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3613
3613
|
};
|
|
3614
|
-
var templateObject_1$2u, templateObject_2$
|
|
3614
|
+
var templateObject_1$2u, templateObject_2$1O, templateObject_3$1o;
|
|
3615
3615
|
|
|
3616
3616
|
var Container$1u = newStyled.div(templateObject_1$2t || (templateObject_1$2t = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n"])));
|
|
3617
|
-
var Price = newStyled.p(templateObject_2$
|
|
3617
|
+
var Price = newStyled.p(templateObject_2$1N || (templateObject_2$1N = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: 1.25rem;\n color: ", ";\n text-decoration: ", ";\n margin: 0;\n position: relative;\n"])), function (_a) {
|
|
3618
3618
|
var weight = _a.weight;
|
|
3619
3619
|
return weight !== null && weight !== void 0 ? weight : '400';
|
|
3620
3620
|
}, function (_a) {
|
|
@@ -3627,7 +3627,7 @@ var Price = newStyled.p(templateObject_2$1M || (templateObject_2$1M = __makeTemp
|
|
|
3627
3627
|
var underlined = _a.underlined;
|
|
3628
3628
|
return (underlined ? 'line-through' : 'none');
|
|
3629
3629
|
});
|
|
3630
|
-
var templateObject_1$2t, templateObject_2$
|
|
3630
|
+
var templateObject_1$2t, templateObject_2$1N;
|
|
3631
3631
|
|
|
3632
3632
|
function getTestId$1() {
|
|
3633
3633
|
var args = [];
|
|
@@ -3723,8 +3723,8 @@ var PriceLabelV2 = function (_a) {
|
|
|
3723
3723
|
var templateObject_1$2r;
|
|
3724
3724
|
|
|
3725
3725
|
var ContainerWrapper$3 = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 2px;\n"])));
|
|
3726
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3727
|
-
var templateObject_1$2q, templateObject_2$
|
|
3726
|
+
var ImgWrapper = newStyled.div(templateObject_2$1M || (templateObject_2$1M = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 50px auto;\n height: 20px;\n opacity: 0px;\n position: relative;\n"])));
|
|
3727
|
+
var templateObject_1$2q, templateObject_2$1M;
|
|
3728
3728
|
|
|
3729
3729
|
var ClubPriceMemberLabel = function (_a) {
|
|
3730
3730
|
var isClub = _a.isClub, _b = _a.isPDP, isPDP = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isCollections, isCollections = _c === void 0 ? false : _c, rest = __rest(_a, ["isClub", "isPDP", "icon", "isCollections"]);
|
|
@@ -3784,7 +3784,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2n || (templateObject_1$2n
|
|
|
3784
3784
|
var opacity = _a.opacity;
|
|
3785
3785
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3786
3786
|
});
|
|
3787
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3787
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1L || (templateObject_2$1L = __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) {
|
|
3788
3788
|
var width = _a.width;
|
|
3789
3789
|
return width;
|
|
3790
3790
|
}, function (_a) {
|
|
@@ -3797,7 +3797,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1K || (templateObject_2$
|
|
|
3797
3797
|
var opacity = _a.opacity;
|
|
3798
3798
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3799
3799
|
});
|
|
3800
|
-
var templateObject_1$2n, templateObject_2$
|
|
3800
|
+
var templateObject_1$2n, templateObject_2$1L;
|
|
3801
3801
|
|
|
3802
3802
|
/* eslint-disable no-undef */
|
|
3803
3803
|
var cache = new Map();
|
|
@@ -3985,12 +3985,12 @@ var Image$3 = function (_a) {
|
|
|
3985
3985
|
var templateObject_1$2m;
|
|
3986
3986
|
|
|
3987
3987
|
var LabelWrapper = newStyled.label(templateObject_1$2l || (templateObject_1$2l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n"])));
|
|
3988
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
3988
|
+
var SwitchWrapper = newStyled.div(templateObject_2$1K || (templateObject_2$1K = __makeTemplateObject(["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"], ["\n position: relative;\n width: 36px;\n height: 20px;\n background: #949494;\n border-radius: 60px;\n padding: 4px;\n transition: 300ms all;\n\n &:before {\n transition: 300ms all;\n content: '';\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 35px;\n top: 50%;\n left: 2.5px;\n background: white;\n transform: translate(0, -50%);\n }\n"])));
|
|
3989
3989
|
var InputWrapper$1 = newStyled.input(templateObject_3$1n || (templateObject_3$1n = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"], ["\n opacity: 0;\n position: absolute;\n\n &:checked + div {\n background: ", ";\n\n &:before {\n transform: translate(14.5px, -50%);\n }\n }\n"])), function (_a) {
|
|
3990
3990
|
var $color = _a.$color;
|
|
3991
3991
|
return $color;
|
|
3992
3992
|
});
|
|
3993
|
-
var templateObject_1$2l, templateObject_2$
|
|
3993
|
+
var templateObject_1$2l, templateObject_2$1K, templateObject_3$1n;
|
|
3994
3994
|
|
|
3995
3995
|
var ToggleComponent = function (_a) {
|
|
3996
3996
|
var onToggle = _a.onToggle, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? '#882a2b' : _c, rest = __rest(_a, ["onToggle", "isChecked", "color"]);
|
|
@@ -4873,14 +4873,14 @@ function jsxs(type, props, key) {
|
|
|
4873
4873
|
// `variants` styles that are consistent through all themes.
|
|
4874
4874
|
var TAGS = {
|
|
4875
4875
|
hero1: newStyled.h1(templateObject_1$2k || (templateObject_1$2k = __makeTemplateObject([""], [""]))),
|
|
4876
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4876
|
+
hero2: newStyled.h2(templateObject_2$1J || (templateObject_2$1J = __makeTemplateObject([""], [""]))),
|
|
4877
4877
|
hero3: newStyled.h3(templateObject_3$1m || (templateObject_3$1m = __makeTemplateObject([""], [""]))),
|
|
4878
4878
|
display1: newStyled.h1(templateObject_4$15 || (templateObject_4$15 = __makeTemplateObject([""], [""]))),
|
|
4879
4879
|
display2: newStyled.h2(templateObject_5$R || (templateObject_5$R = __makeTemplateObject([""], [""]))),
|
|
4880
4880
|
display3: newStyled.h3(templateObject_6$J || (templateObject_6$J = __makeTemplateObject([""], [""]))),
|
|
4881
4881
|
heading1: newStyled.h1(templateObject_7$A || (templateObject_7$A = __makeTemplateObject([""], [""]))),
|
|
4882
4882
|
heading2: newStyled.h2(templateObject_8$t || (templateObject_8$t = __makeTemplateObject([""], [""]))),
|
|
4883
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4883
|
+
heading3: newStyled.h3(templateObject_9$g || (templateObject_9$g = __makeTemplateObject([""], [""]))),
|
|
4884
4884
|
heading4: newStyled.h4(templateObject_10$e || (templateObject_10$e = __makeTemplateObject([""], [""]))),
|
|
4885
4885
|
heading5: newStyled.h5(templateObject_11$a || (templateObject_11$a = __makeTemplateObject([""], [""]))),
|
|
4886
4886
|
heading6: newStyled.h6(templateObject_12$7 || (templateObject_12$7 = __makeTemplateObject([""], [""]))),
|
|
@@ -5012,10 +5012,10 @@ var DEFAULTS = {
|
|
|
5012
5012
|
size: 'regular',
|
|
5013
5013
|
},
|
|
5014
5014
|
};
|
|
5015
|
-
var templateObject_1$2k, templateObject_2$
|
|
5015
|
+
var templateObject_1$2k, templateObject_2$1J, templateObject_3$1m, templateObject_4$15, templateObject_5$R, templateObject_6$J, templateObject_7$A, templateObject_8$t, templateObject_9$g, templateObject_10$e, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
5016
5016
|
|
|
5017
5017
|
var Container$1s = newStyled.div(templateObject_1$2j || (templateObject_1$2j = __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"])));
|
|
5018
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
5018
|
+
var Card$4 = newStyled.div(templateObject_2$1I || (templateObject_2$1I = __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"])));
|
|
5019
5019
|
var Tag$2 = newStyled.div(templateObject_3$1l || (templateObject_3$1l = __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"])));
|
|
5020
5020
|
var Label$7 = newStyled.div(templateObject_4$14 || (templateObject_4$14 = __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"])));
|
|
5021
5021
|
var Check$1 = newStyled.div(templateObject_5$Q || (templateObject_5$Q = __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"])));
|
|
@@ -5044,27 +5044,27 @@ var PackCard$1 = function (_a) {
|
|
|
5044
5044
|
currency: currencyCode || 'USD',
|
|
5045
5045
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5046
5046
|
};
|
|
5047
|
-
var templateObject_1$2j, templateObject_2$
|
|
5047
|
+
var templateObject_1$2j, templateObject_2$1I, templateObject_3$1l, templateObject_4$14, templateObject_5$Q, templateObject_6$I;
|
|
5048
5048
|
|
|
5049
5049
|
var Container$1r = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5050
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
5050
|
+
var DropContainer = newStyled.div(templateObject_2$1H || (templateObject_2$1H = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5051
5051
|
var DropList = function (_a) {
|
|
5052
5052
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5053
5053
|
return (jsx$1(Container$1r, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5054
5054
|
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));
|
|
5055
5055
|
}) }, void 0));
|
|
5056
5056
|
};
|
|
5057
|
-
var templateObject_1$2i, templateObject_2$
|
|
5057
|
+
var templateObject_1$2i, templateObject_2$1H;
|
|
5058
5058
|
|
|
5059
5059
|
var DROPS_TOTAL = 5;
|
|
5060
5060
|
var Container$1q = newStyled.div(templateObject_1$2h || (templateObject_1$2h = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
5061
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5061
|
+
var Title$b = newStyled.p(templateObject_2$1G || (templateObject_2$1G = __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"])));
|
|
5062
5062
|
var Description$3 = newStyled.p(templateObject_3$1k || (templateObject_3$1k = __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"])));
|
|
5063
5063
|
var AbsorbencyLevel = function (_a) {
|
|
5064
5064
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5065
5065
|
return (jsxs$1(Container$1q, { 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));
|
|
5066
5066
|
};
|
|
5067
|
-
var templateObject_1$2h, templateObject_2$
|
|
5067
|
+
var templateObject_1$2h, templateObject_2$1G, templateObject_3$1k;
|
|
5068
5068
|
|
|
5069
5069
|
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(`
|
|
5070
5070
|
`),"","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(`
|
|
@@ -5327,8 +5327,8 @@ var isValidDate = function (value) {
|
|
|
5327
5327
|
};
|
|
5328
5328
|
|
|
5329
5329
|
var Bold = newStyled.span(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5330
|
-
var FlexContainer$5 = newStyled.div(templateObject_2$
|
|
5331
|
-
var templateObject_1$2e, templateObject_2$
|
|
5330
|
+
var FlexContainer$5 = newStyled.div(templateObject_2$1F || (templateObject_2$1F = __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"])));
|
|
5331
|
+
var templateObject_1$2e, templateObject_2$1F;
|
|
5332
5332
|
|
|
5333
5333
|
var Container$1o = newStyled.div(templateObject_1$2d || (templateObject_1$2d = __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) {
|
|
5334
5334
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
@@ -5337,11 +5337,11 @@ var Container$1o = newStyled.div(templateObject_1$2d || (templateObject_1$2d = _
|
|
|
5337
5337
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5338
5338
|
return height;
|
|
5339
5339
|
});
|
|
5340
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5340
|
+
var FlexCentered = newStyled.div(templateObject_2$1E || (templateObject_2$1E = __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"])));
|
|
5341
5341
|
var LeftSide = newStyled.div(templateObject_3$1j || (templateObject_3$1j = __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"])));
|
|
5342
5342
|
var RightSide = newStyled.div(templateObject_4$13 || (templateObject_4$13 = __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"])));
|
|
5343
5343
|
var FlexStart = newStyled.div(templateObject_5$P || (templateObject_5$P = __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"])));
|
|
5344
|
-
var templateObject_1$2d, templateObject_2$
|
|
5344
|
+
var templateObject_1$2d, templateObject_2$1E, templateObject_3$1j, templateObject_4$13, templateObject_5$P;
|
|
5345
5345
|
|
|
5346
5346
|
var CouponCard = function (_a) {
|
|
5347
5347
|
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;
|
|
@@ -5495,13 +5495,13 @@ var sizeOptions = [
|
|
|
5495
5495
|
];
|
|
5496
5496
|
|
|
5497
5497
|
var ErrorText = newStyled.h3(templateObject_1$2c || (templateObject_1$2c = __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; });
|
|
5498
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5498
|
+
var ErrorContainer = newStyled.div(templateObject_2$1D || (templateObject_2$1D = __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"])));
|
|
5499
5499
|
var Error$1 = function (_a) {
|
|
5500
5500
|
var error = _a.error;
|
|
5501
5501
|
var theme = useTheme();
|
|
5502
5502
|
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));
|
|
5503
5503
|
};
|
|
5504
|
-
var templateObject_1$2c, templateObject_2$
|
|
5504
|
+
var templateObject_1$2c, templateObject_2$1D;
|
|
5505
5505
|
|
|
5506
5506
|
var BaseSelectButton = function (_a) {
|
|
5507
5507
|
var children = _a.children, as = _a.as;
|
|
@@ -5765,7 +5765,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5765
5765
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5766
5766
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5767
5767
|
]; });
|
|
5768
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5768
|
+
var Input$5 = newStyled.input(templateObject_2$1C || (templateObject_2$1C = __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) {
|
|
5769
5769
|
var disabled = _a.disabled;
|
|
5770
5770
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5771
5771
|
});
|
|
@@ -5781,7 +5781,7 @@ var Checkbox = function (_a) {
|
|
|
5781
5781
|
};
|
|
5782
5782
|
return (jsxs$1(Container$1n, { 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$6, __assign$1({ "data-testid": "checkbox-text", size: sizeLabel, style: { color: colorLabel ? colorLabel : theme.colors.shades['700'].color }, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5783
5783
|
};
|
|
5784
|
-
var templateObject_1$29, templateObject_2$
|
|
5784
|
+
var templateObject_1$29, templateObject_2$1C;
|
|
5785
5785
|
|
|
5786
5786
|
var CustomOption = newStyled.li(function (_a) {
|
|
5787
5787
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5831,7 +5831,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5831
5831
|
});
|
|
5832
5832
|
|
|
5833
5833
|
var Container$1m = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject([""], [""])));
|
|
5834
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5834
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1B || (templateObject_2$1B = __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"])));
|
|
5835
5835
|
var SelectedOption = newStyled.span(templateObject_3$1i || (templateObject_3$1i = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5836
5836
|
var fontWeight = _a.fontWeight;
|
|
5837
5837
|
return fontWeight || '';
|
|
@@ -5868,7 +5868,7 @@ function SimpleDropdown(_a) {
|
|
|
5868
5868
|
var DropdownContainer = showRequiredPlaceholder ? Container$1m : Fragment$1;
|
|
5869
5869
|
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));
|
|
5870
5870
|
}
|
|
5871
|
-
var templateObject_1$28, templateObject_2$
|
|
5871
|
+
var templateObject_1$28, templateObject_2$1B, templateObject_3$1i;
|
|
5872
5872
|
|
|
5873
5873
|
/* base styles & size variants */
|
|
5874
5874
|
var CustomRadioStyles$2 = {
|
|
@@ -5935,7 +5935,7 @@ var ContainerStyles$2 = {
|
|
|
5935
5935
|
|
|
5936
5936
|
var Wrapper$7 = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5937
5937
|
var Container$1l = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5938
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5938
|
+
var Input$4 = newStyled.input(templateObject_2$1A || (templateObject_2$1A = __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) {
|
|
5939
5939
|
var disabled = _a.disabled;
|
|
5940
5940
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5941
5941
|
});
|
|
@@ -5969,7 +5969,7 @@ var RadioInput = function (_a) {
|
|
|
5969
5969
|
};
|
|
5970
5970
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$1l, __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 ? (jsxs$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", 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));
|
|
5971
5971
|
};
|
|
5972
|
-
var templateObject_1$27, templateObject_2$
|
|
5972
|
+
var templateObject_1$27, templateObject_2$1A, templateObject_3$1h, templateObject_4$12;
|
|
5973
5973
|
|
|
5974
5974
|
var useOnClickOutside = function (ref, handler) {
|
|
5975
5975
|
useEffect(function () {
|
|
@@ -6072,7 +6072,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __ma
|
|
|
6072
6072
|
var disableHover = _a.disableHover;
|
|
6073
6073
|
return (disableHover ? 0 : 1);
|
|
6074
6074
|
});
|
|
6075
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6075
|
+
var TooltipContainer = newStyled.div(templateObject_2$1z || (templateObject_2$1z = __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) {
|
|
6076
6076
|
var position = _a.position;
|
|
6077
6077
|
return getContainerFlexDirection(position);
|
|
6078
6078
|
}, function (_a) {
|
|
@@ -6127,7 +6127,7 @@ var CloseToolTip = newStyled.button(templateObject_8$s || (templateObject_8$s =
|
|
|
6127
6127
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6128
6128
|
return right;
|
|
6129
6129
|
});
|
|
6130
|
-
var templateObject_1$26, templateObject_2$
|
|
6130
|
+
var templateObject_1$26, templateObject_2$1z, templateObject_3$1g, templateObject_4$11, templateObject_5$O, templateObject_6$H, templateObject_7$z, templateObject_8$s;
|
|
6131
6131
|
|
|
6132
6132
|
var Tooltip = function (_a) {
|
|
6133
6133
|
var _b;
|
|
@@ -6171,7 +6171,7 @@ var benefitsColorMapper = function (_a) {
|
|
|
6171
6171
|
};
|
|
6172
6172
|
|
|
6173
6173
|
var FlexContainer$4 = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6174
|
-
var ContainerBase$5 = newStyled.div(templateObject_2$
|
|
6174
|
+
var ContainerBase$5 = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __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) {
|
|
6175
6175
|
var selected = _a.selected, theme = _a.theme;
|
|
6176
6176
|
return selected
|
|
6177
6177
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6200,7 +6200,7 @@ var SubscriptionHeader$5 = newStyled.div(templateObject_5$N || (templateObject_5
|
|
|
6200
6200
|
var BenefitsContainer$4 = newStyled.div(templateObject_6$G || (templateObject_6$G = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6201
6201
|
var Benefit$4 = newStyled.div(templateObject_7$y || (templateObject_7$y = __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"])));
|
|
6202
6202
|
var BenefitText$4 = newStyled(Text$7)(templateObject_8$r || (templateObject_8$r = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6203
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
6203
|
+
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$f || (templateObject_9$f = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
6204
6204
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$d || (templateObject_10$d = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
6205
6205
|
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$9 || (templateObject_11$9 = __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"])));
|
|
6206
6206
|
var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateObject_12$6 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
@@ -6208,7 +6208,7 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6208
6208
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6209
6209
|
});
|
|
6210
6210
|
var Container$1k = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6211
|
-
var templateObject_1$25, templateObject_2$
|
|
6211
|
+
var templateObject_1$25, templateObject_2$1y, templateObject_3$1f, templateObject_4$10, templateObject_5$N, templateObject_6$G, templateObject_7$y, templateObject_8$r, templateObject_9$f, templateObject_10$d, templateObject_11$9, templateObject_12$6, templateObject_13$5;
|
|
6212
6212
|
|
|
6213
6213
|
var radioIds$3 = {
|
|
6214
6214
|
oneTime: {
|
|
@@ -6268,7 +6268,7 @@ var FlexContainer$3 = newStyled.div(templateObject_1$24 || (templateObject_1$24
|
|
|
6268
6268
|
return theme.name === 'TheSpaDr' &&
|
|
6269
6269
|
"\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 ";
|
|
6270
6270
|
});
|
|
6271
|
-
var DiscountTag$3 = newStyled.div(templateObject_2$
|
|
6271
|
+
var DiscountTag$3 = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __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) {
|
|
6272
6272
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6273
6273
|
return isSelected
|
|
6274
6274
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6310,7 +6310,7 @@ var SubscriptionHeader$4 = newStyled.div(templateObject_6$F || (templateObject_6
|
|
|
6310
6310
|
});
|
|
6311
6311
|
var BenefitsContainer$3 = newStyled.div(templateObject_7$x || (templateObject_7$x = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6312
6312
|
var Benefit$3 = newStyled.div(templateObject_8$q || (templateObject_8$q = __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"])));
|
|
6313
|
-
var BenefitText$3 = newStyled(Text$7)(templateObject_9$
|
|
6313
|
+
var BenefitText$3 = newStyled(Text$7)(templateObject_9$e || (templateObject_9$e = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6314
6314
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$c || (templateObject_10$c = __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"])));
|
|
6315
6315
|
var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_11$8 || (templateObject_11$8 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
6316
6316
|
var selected = _a.selected, theme = _a.theme;
|
|
@@ -6321,7 +6321,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4
|
|
|
6321
6321
|
var theme = _a.theme;
|
|
6322
6322
|
return theme.component.autoship.tooltip.margin;
|
|
6323
6323
|
});
|
|
6324
|
-
var templateObject_1$24, templateObject_2$
|
|
6324
|
+
var templateObject_1$24, templateObject_2$1x, templateObject_3$1e, templateObject_4$$, templateObject_5$M, templateObject_6$F, templateObject_7$x, templateObject_8$q, templateObject_9$e, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$4;
|
|
6325
6325
|
|
|
6326
6326
|
var radioIds$2 = {
|
|
6327
6327
|
oneTime: {
|
|
@@ -6401,12 +6401,12 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6401
6401
|
_a$2);
|
|
6402
6402
|
|
|
6403
6403
|
var CustomerDetails = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject([""], [""])));
|
|
6404
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6404
|
+
var CustomerInfo = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __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"])));
|
|
6405
6405
|
var Name = newStyled.h4(templateObject_3$1d || (templateObject_3$1d = __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"])));
|
|
6406
6406
|
var StarIconContainer = newStyled.div(templateObject_4$_ || (templateObject_4$_ = __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"])));
|
|
6407
6407
|
var Description$2 = newStyled.p(templateObject_5$L || (templateObject_5$L = __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"])));
|
|
6408
6408
|
var ReviewDays = newStyled.span(templateObject_6$E || (templateObject_6$E = __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"])));
|
|
6409
|
-
var templateObject_1$23, templateObject_2$
|
|
6409
|
+
var templateObject_1$23, templateObject_2$1w, templateObject_3$1d, templateObject_4$_, templateObject_5$L, templateObject_6$E;
|
|
6410
6410
|
|
|
6411
6411
|
var NameWithStars = function (_a) {
|
|
6412
6412
|
var name = _a.name, size = _a.size;
|
|
@@ -6425,7 +6425,7 @@ var ResultFeedback = function (_a) {
|
|
|
6425
6425
|
};
|
|
6426
6426
|
|
|
6427
6427
|
var Container$1i = newStyled.div(templateObject_1$22 || (templateObject_1$22 = __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; });
|
|
6428
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6428
|
+
var ImageContainer$7 = newStyled.div(templateObject_2$1v || (templateObject_2$1v = __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"])));
|
|
6429
6429
|
var ImageCard = newStyled.div(templateObject_3$1c || (templateObject_3$1c = __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; });
|
|
6430
6430
|
var UserInfoText = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __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) {
|
|
6431
6431
|
var theme = _a.theme;
|
|
@@ -6437,7 +6437,7 @@ var UserInfoText = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __m
|
|
|
6437
6437
|
var theme = _a.theme, size = _a.size;
|
|
6438
6438
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6439
6439
|
});
|
|
6440
|
-
var templateObject_1$22, templateObject_2$
|
|
6440
|
+
var templateObject_1$22, templateObject_2$1v, templateObject_3$1c, templateObject_4$Z;
|
|
6441
6441
|
|
|
6442
6442
|
/* base styles & size variants */
|
|
6443
6443
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6560,13 +6560,13 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6560
6560
|
var templateObject_1$1$;
|
|
6561
6561
|
|
|
6562
6562
|
var StyledWrapper = newStyled.div(templateObject_1$1_ || (templateObject_1$1_ = __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"])));
|
|
6563
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6563
|
+
var StyledContainer = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __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"])));
|
|
6564
6564
|
var TextLabel = newStyled(Text$7)(templateObject_3$1b || (templateObject_3$1b = __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) {
|
|
6565
6565
|
var color = _a.color;
|
|
6566
6566
|
return color;
|
|
6567
6567
|
});
|
|
6568
6568
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$Y || (templateObject_4$Y = __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"])));
|
|
6569
|
-
var templateObject_1$1_, templateObject_2$
|
|
6569
|
+
var templateObject_1$1_, templateObject_2$1u, templateObject_3$1b, templateObject_4$Y;
|
|
6570
6570
|
|
|
6571
6571
|
var Minimalistic = function (_a) {
|
|
6572
6572
|
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;
|
|
@@ -6575,7 +6575,7 @@ var Minimalistic = function (_a) {
|
|
|
6575
6575
|
};
|
|
6576
6576
|
|
|
6577
6577
|
var Container$1g = newStyled.div(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6578
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6578
|
+
var Title$9 = newStyled.h1(templateObject_2$1t || (templateObject_2$1t = __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; });
|
|
6579
6579
|
var Details$1 = newStyled.span(templateObject_3$1a || (templateObject_3$1a = __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; });
|
|
6580
6580
|
var PriceContainer$2 = newStyled.span(templateObject_4$X || (templateObject_4$X = __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"])));
|
|
6581
6581
|
var Simple = function (_a) {
|
|
@@ -6583,7 +6583,7 @@ var Simple = function (_a) {
|
|
|
6583
6583
|
var theme = useTheme();
|
|
6584
6584
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$1g, { 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));
|
|
6585
6585
|
};
|
|
6586
|
-
var templateObject_1$1Z, templateObject_2$
|
|
6586
|
+
var templateObject_1$1Z, templateObject_2$1t, templateObject_3$1a, templateObject_4$X;
|
|
6587
6587
|
|
|
6588
6588
|
var Bundle = {
|
|
6589
6589
|
Minimalistic: Minimalistic,
|
|
@@ -6594,7 +6594,7 @@ var Container$1f = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = _
|
|
|
6594
6594
|
var displayBNPL = _a.displayBNPL;
|
|
6595
6595
|
return (displayBNPL ? 'flex' : 'none');
|
|
6596
6596
|
});
|
|
6597
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6597
|
+
var TextContainer$1 = newStyled.div(templateObject_2$1s || (templateObject_2$1s = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n display: flex;\n align-items: center;\n align-self: stretch;\n"])));
|
|
6598
6598
|
var IconWrapper$1 = newStyled.div(templateObject_3$19 || (templateObject_3$19 = __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"])));
|
|
6599
6599
|
var BuyNowPayLater = function (_a) {
|
|
6600
6600
|
var _b;
|
|
@@ -6622,7 +6622,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
6622
6622
|
paddingRight: '0.25rem',
|
|
6623
6623
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsx$1(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsx$1(IconComponent, { width: !bnplWithAfterPay ? 3.2 : 5.3, height: 2, fill: iconColor, style: { position: 'relative', left: bnplWithAfterPay ? '1rem' : '0' } }, void 0) }), void 0))] }), void 0) }), void 0));
|
|
6624
6624
|
};
|
|
6625
|
-
var templateObject_1$1Y, templateObject_2$
|
|
6625
|
+
var templateObject_1$1Y, templateObject_2$1s, templateObject_3$19;
|
|
6626
6626
|
|
|
6627
6627
|
var Text$6 = newStyled.h3(templateObject_1$1X || (templateObject_1$1X = __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) {
|
|
6628
6628
|
var backgroundColor = _a.backgroundColor;
|
|
@@ -6692,7 +6692,7 @@ var CartProductItem = {
|
|
|
6692
6692
|
};
|
|
6693
6693
|
|
|
6694
6694
|
var Container$1c = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __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"])));
|
|
6695
|
-
var MobileContainer = newStyled(Container$1c)(templateObject_2$
|
|
6695
|
+
var MobileContainer = newStyled(Container$1c)(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6696
6696
|
var DollarPart = newStyled.span(templateObject_3$18 || (templateObject_3$18 = __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"])));
|
|
6697
6697
|
var ClubMembersText = newStyled.span(templateObject_4$W || (templateObject_4$W = __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"])));
|
|
6698
6698
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6704,7 +6704,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6704
6704
|
var isMobile = useWindowDimensions().isMobile;
|
|
6705
6705
|
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$1c, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6706
6706
|
};
|
|
6707
|
-
var templateObject_1$1R, templateObject_2$
|
|
6707
|
+
var templateObject_1$1R, templateObject_2$1r, templateObject_3$18, templateObject_4$W, templateObject_5$K, templateObject_6$D, templateObject_7$w, templateObject_8$p;
|
|
6708
6708
|
|
|
6709
6709
|
var Spacing = function (_a) {
|
|
6710
6710
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6713,7 +6713,7 @@ var Spacing = function (_a) {
|
|
|
6713
6713
|
};
|
|
6714
6714
|
|
|
6715
6715
|
var Container$1b = newStyled('div')(templateObject_1$1Q || (templateObject_1$1Q = __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"])));
|
|
6716
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6716
|
+
var Content$2 = newStyled('div')(templateObject_2$1q || (templateObject_2$1q = __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"])));
|
|
6717
6717
|
var BarContainer$1 = newStyled('div')(templateObject_3$17 || (templateObject_3$17 = __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"])));
|
|
6718
6718
|
var Bar$2 = newStyled('div')(templateObject_4$V || (templateObject_4$V = __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) {
|
|
6719
6719
|
var index = _a.index;
|
|
@@ -6726,7 +6726,7 @@ var StrengthBars = function (_a) {
|
|
|
6726
6726
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6727
6727
|
return (jsxs$1(Container$1b, __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));
|
|
6728
6728
|
};
|
|
6729
|
-
var templateObject_1$1Q, templateObject_2$
|
|
6729
|
+
var templateObject_1$1Q, templateObject_2$1q, templateObject_3$17, templateObject_4$V;
|
|
6730
6730
|
|
|
6731
6731
|
var Benefit$2 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
6732
6732
|
var templateObject_1$1P;
|
|
@@ -6837,8 +6837,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6837
6837
|
}),
|
|
6838
6838
|
];
|
|
6839
6839
|
});
|
|
6840
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6841
|
-
var templateObject_1$1M, templateObject_2$
|
|
6840
|
+
var RatingLabel = newStyled.span(templateObject_2$1p || (templateObject_2$1p = __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; });
|
|
6841
|
+
var templateObject_1$1M, templateObject_2$1p;
|
|
6842
6842
|
|
|
6843
6843
|
var Rating = function (_a) {
|
|
6844
6844
|
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;
|
|
@@ -6866,12 +6866,12 @@ var ImageWrapper$4 = newStyled.div(templateObject_1$1L || (templateObject_1$1L =
|
|
|
6866
6866
|
var width = _a.width;
|
|
6867
6867
|
return width !== null && width !== void 0 ? width : '30%';
|
|
6868
6868
|
});
|
|
6869
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6869
|
+
var RatingWrapper = newStyled.div(templateObject_2$1o || (templateObject_2$1o = __makeTemplateObject(["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"], ["\n position: absolute;\n bottom: 5px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: white;\n border-radius: 8px;\n padding: 4px 8px;\n width: 95%;\n"])));
|
|
6870
6870
|
var RatingText = newStyled.span(templateObject_3$16 || (templateObject_3$16 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"], ["\n font-size: ", ";\n font-weight: 600;\n margin-bottom: -3%;\n color: #292929;\n"])), function (_a) {
|
|
6871
6871
|
var fontSize = _a.fontSize;
|
|
6872
6872
|
return fontSize;
|
|
6873
6873
|
});
|
|
6874
|
-
var templateObject_1$1L, templateObject_2$
|
|
6874
|
+
var templateObject_1$1L, templateObject_2$1o, templateObject_3$16;
|
|
6875
6875
|
|
|
6876
6876
|
var OfferAtCartImage = function (_a) {
|
|
6877
6877
|
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width;
|
|
@@ -6919,8 +6919,8 @@ var getDropdownOptions = function (frequency) {
|
|
|
6919
6919
|
};
|
|
6920
6920
|
|
|
6921
6921
|
var Benefit$1 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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"])));
|
|
6922
|
-
var BenefitText$2 = newStyled(Text$7)(templateObject_2$
|
|
6923
|
-
var templateObject_1$1K, templateObject_2$
|
|
6922
|
+
var BenefitText$2 = newStyled(Text$7)(templateObject_2$1n || (templateObject_2$1n = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6923
|
+
var templateObject_1$1K, templateObject_2$1n;
|
|
6924
6924
|
|
|
6925
6925
|
var BenefitsList = function (_a) {
|
|
6926
6926
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6935,7 +6935,7 @@ var TimerContainer$1 = newStyled.div(templateObject_1$1J || (templateObject_1$1J
|
|
|
6935
6935
|
var timerColor = _a.timerColor;
|
|
6936
6936
|
return timerColor || '';
|
|
6937
6937
|
});
|
|
6938
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
6938
|
+
var TimerContainerV2 = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __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) {
|
|
6939
6939
|
var timerColor = _a.timerColor;
|
|
6940
6940
|
return timerColor || '';
|
|
6941
6941
|
});
|
|
@@ -6947,7 +6947,7 @@ var UnitBlock = newStyled(Text$7)(templateObject_3$15 || (templateObject_3$15 =
|
|
|
6947
6947
|
return theme.colors.shades.white.color;
|
|
6948
6948
|
});
|
|
6949
6949
|
var Unit = newStyled.p(templateObject_4$U || (templateObject_4$U = __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"])));
|
|
6950
|
-
var templateObject_1$1J, templateObject_2$
|
|
6950
|
+
var templateObject_1$1J, templateObject_2$1m, templateObject_3$15, templateObject_4$U;
|
|
6951
6951
|
|
|
6952
6952
|
var HRS = 'HRS';
|
|
6953
6953
|
var MIN = 'MIN';
|
|
@@ -7032,7 +7032,7 @@ var borderSize = {
|
|
|
7032
7032
|
large: '3px',
|
|
7033
7033
|
};
|
|
7034
7034
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
7035
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
7035
|
+
var StyledSpinner = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
7036
7036
|
var size = _a.size;
|
|
7037
7037
|
return borderSize[size];
|
|
7038
7038
|
}, function (_a) {
|
|
@@ -7045,7 +7045,7 @@ var StyledSpinner = newStyled.div(templateObject_2$1k || (templateObject_2$1k =
|
|
|
7045
7045
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
7046
7046
|
return duration;
|
|
7047
7047
|
});
|
|
7048
|
-
var templateObject_1$1H, templateObject_2$
|
|
7048
|
+
var templateObject_1$1H, templateObject_2$1l;
|
|
7049
7049
|
|
|
7050
7050
|
var Spinner = function (_a) {
|
|
7051
7051
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
@@ -7053,8 +7053,8 @@ var Spinner = function (_a) {
|
|
|
7053
7053
|
};
|
|
7054
7054
|
|
|
7055
7055
|
var ProgressContainer = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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); });
|
|
7056
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
7057
|
-
var templateObject_1$1G, templateObject_2$
|
|
7056
|
+
var ProgressFiller = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __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; });
|
|
7057
|
+
var templateObject_1$1G, templateObject_2$1k;
|
|
7058
7058
|
|
|
7059
7059
|
var ProgressBar$1 = function (_a) {
|
|
7060
7060
|
var progress = _a.progress, hide = _a.hide;
|
|
@@ -7062,12 +7062,12 @@ var ProgressBar$1 = function (_a) {
|
|
|
7062
7062
|
};
|
|
7063
7063
|
|
|
7064
7064
|
var Container$17 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
7065
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
7065
|
+
var HTMLVideo = newStyled.video(templateObject_2$1j || (templateObject_2$1j = __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; });
|
|
7066
7066
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$14 || (templateObject_3$14 = __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"])));
|
|
7067
7067
|
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"])));
|
|
7068
7068
|
var PauseContainer = newStyled.div(templateObject_5$J || (templateObject_5$J = __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"])));
|
|
7069
7069
|
var MuteButton = newStyled.button(templateObject_6$C || (templateObject_6$C = __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"])));
|
|
7070
|
-
var templateObject_1$1F, templateObject_2$
|
|
7070
|
+
var templateObject_1$1F, templateObject_2$1j, templateObject_3$14, templateObject_4$T, templateObject_5$J, templateObject_6$C;
|
|
7071
7071
|
|
|
7072
7072
|
var Video$1 = function (_a) {
|
|
7073
7073
|
var _b, _c, _d, _e;
|
|
@@ -7124,7 +7124,7 @@ var LikeCount = newStyled.span(templateObject_1$1E || (templateObject_1$1E = __m
|
|
|
7124
7124
|
var theme = _a.theme;
|
|
7125
7125
|
return theme.colors.shades.black.color;
|
|
7126
7126
|
});
|
|
7127
|
-
var LikeBtnContainer = newStyled.button(templateObject_2$
|
|
7127
|
+
var LikeBtnContainer = newStyled.button(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n position: ", ";\n top: ", ";\n right: ", ";\n z-index: ", ";\n padding: ", ";\n box-sizing: ", ";\n background-color: transparent;\n border: none;\n"], ["\n position: ", ";\n top: ", ";\n right: ", ";\n z-index: ", ";\n padding: ", ";\n box-sizing: ", ";\n background-color: transparent;\n border: none;\n"])), function (_a) {
|
|
7128
7128
|
var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
|
|
7129
7129
|
return position;
|
|
7130
7130
|
}, function (_a) {
|
|
@@ -7143,7 +7143,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1h || (templateObject_2
|
|
|
7143
7143
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
7144
7144
|
return boxSizing;
|
|
7145
7145
|
});
|
|
7146
|
-
var templateObject_1$1E, templateObject_2$
|
|
7146
|
+
var templateObject_1$1E, templateObject_2$1i;
|
|
7147
7147
|
|
|
7148
7148
|
var getStylesBySize$c = function (size) {
|
|
7149
7149
|
switch (size) {
|
|
@@ -7221,7 +7221,7 @@ var LikeButton = function (_a) {
|
|
|
7221
7221
|
};
|
|
7222
7222
|
|
|
7223
7223
|
var RegularPriceTagSpan = newStyled.span(templateObject_1$1C || (templateObject_1$1C = __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"])));
|
|
7224
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
7224
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$1h || (templateObject_2$1h = __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"])));
|
|
7225
7225
|
var PriceContainer$1 = newStyled.span(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7226
7226
|
var PriceContainerV2 = newStyled.span(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7227
7227
|
var PriceWithTagContainer = newStyled.span(templateObject_5$I || (templateObject_5$I = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
@@ -7278,7 +7278,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7278
7278
|
? finalPriceArray[0]
|
|
7279
7279
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price$1, __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, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7280
7280
|
};
|
|
7281
|
-
var templateObject_1$1C, templateObject_2$
|
|
7281
|
+
var templateObject_1$1C, templateObject_2$1h, templateObject_3$13, templateObject_4$S, templateObject_5$I;
|
|
7282
7282
|
|
|
7283
7283
|
var STYLES_BY_THEME = {
|
|
7284
7284
|
TheSpaDr: {
|
|
@@ -7352,7 +7352,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7352
7352
|
});
|
|
7353
7353
|
});
|
|
7354
7354
|
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1B || (templateObject_1$1B = __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"])));
|
|
7355
|
-
var Container$15 = newStyled.a(templateObject_2$
|
|
7355
|
+
var Container$15 = newStyled.a(templateObject_2$1g || (templateObject_2$1g = __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 &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\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\n &:hover .like-btn-container:hover + .hover__image {\n opacity: 0;\n }\n"])));
|
|
7356
7356
|
var ProdCardContainer$4 = newStyled.div(templateObject_3$12 || (templateObject_3$12 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n position: relative;\n"])));
|
|
7357
7357
|
var Title$7 = newStyled.h2(templateObject_4$R || (templateObject_4$R = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
7358
7358
|
var theme = _a.theme;
|
|
@@ -7415,7 +7415,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$B || (templateObject_6
|
|
|
7415
7415
|
});
|
|
7416
7416
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7417
7417
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$o || (templateObject_8$o = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7418
|
-
var templateObject_1$1B, templateObject_2$
|
|
7418
|
+
var templateObject_1$1B, templateObject_2$1g, templateObject_3$12, templateObject_4$R, templateObject_5$H, templateObject_6$B, templateObject_7$v, templateObject_8$o;
|
|
7419
7419
|
|
|
7420
7420
|
var ProductItemMobile = function (_a) {
|
|
7421
7421
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7533,7 +7533,7 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7533
7533
|
});
|
|
7534
7534
|
});
|
|
7535
7535
|
var ImageHoverContainer$2 = newStyled.img(templateObject_1$1A || (templateObject_1$1A = __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; });
|
|
7536
|
-
var Container$14 = newStyled.a(templateObject_2$
|
|
7536
|
+
var Container$14 = newStyled.a(templateObject_2$1f || (templateObject_2$1f = __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"])));
|
|
7537
7537
|
var ProdCardContainer$3 = newStyled.div(templateObject_3$11 || (templateObject_3$11 = __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"])));
|
|
7538
7538
|
var Title$6 = newStyled.p(templateObject_4$Q || (templateObject_4$Q = __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; });
|
|
7539
7539
|
var getStylesBySize$a = function (size) {
|
|
@@ -7621,7 +7621,7 @@ var ProductItemTK = function (_a) {
|
|
|
7621
7621
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7622
7622
|
} }, { 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));
|
|
7623
7623
|
};
|
|
7624
|
-
var templateObject_1$1A, templateObject_2$
|
|
7624
|
+
var templateObject_1$1A, templateObject_2$1f, templateObject_3$11, templateObject_4$Q, templateObject_5$G, templateObject_6$A, templateObject_7$u, templateObject_8$n;
|
|
7625
7625
|
|
|
7626
7626
|
var Container$13 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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"])));
|
|
7627
7627
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7642,7 +7642,7 @@ var Collection = {
|
|
|
7642
7642
|
};
|
|
7643
7643
|
|
|
7644
7644
|
var CustomRadioGroup = newStyled(lt)(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7645
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7645
|
+
newStyled(lt.Label)(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7646
7646
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$10 || (templateObject_3$10 = __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"])));
|
|
7647
7647
|
var Span = newStyled.span(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7648
7648
|
var OptionsContainer = newStyled.div(templateObject_5$F || (templateObject_5$F = __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"])));
|
|
@@ -7663,7 +7663,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7663
7663
|
Option: Option,
|
|
7664
7664
|
OptionsContainer: OptionsContainer,
|
|
7665
7665
|
});
|
|
7666
|
-
var templateObject_1$1y, templateObject_2$
|
|
7666
|
+
var templateObject_1$1y, templateObject_2$1e, templateObject_3$10, templateObject_4$P, templateObject_5$F;
|
|
7667
7667
|
|
|
7668
7668
|
var OneColorSelector = function (_a) {
|
|
7669
7669
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7711,14 +7711,14 @@ var Container$12 = newStyled.div(templateObject_1$1x || (templateObject_1$1x = _
|
|
|
7711
7711
|
var noStock = _a.noStock;
|
|
7712
7712
|
return (noStock ? '0.4' : '1');
|
|
7713
7713
|
});
|
|
7714
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7714
|
+
var Image$2 = newStyled.img(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
7715
7715
|
var PatternSelector = function (_a) {
|
|
7716
7716
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7717
7717
|
var theme = useTheme();
|
|
7718
7718
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7719
7719
|
return (jsx$1(Container$12, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7720
7720
|
};
|
|
7721
|
-
var templateObject_1$1x, templateObject_2$
|
|
7721
|
+
var templateObject_1$1x, templateObject_2$1d;
|
|
7722
7722
|
|
|
7723
7723
|
var renderOptions$1 = function (options, showCross) {
|
|
7724
7724
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7741,15 +7741,18 @@ var SingleColorPicker = function (_a) {
|
|
|
7741
7741
|
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.5rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions$1(options, showCross) }), void 0)] }), void 0));
|
|
7742
7742
|
};
|
|
7743
7743
|
|
|
7744
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n"], ["\n position: relative;\n max-width: 300px;\n\n .tooltip-container {\n position: absolute;\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n"])));
|
|
7745
|
+
var NumericTooltip = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n\n font-size: 12px;\n font-weight: 400;\n line-height: 20px;\n text-align: center;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n\n font-size: 12px;\n font-weight: 400;\n line-height: 20px;\n text-align: center;\n height: 100%;\n"])));
|
|
7746
|
+
var templateObject_1$1w, templateObject_2$1c;
|
|
7747
|
+
|
|
7744
7748
|
var ColorPickerWithTooltip = function (_a) {
|
|
7745
7749
|
var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross, className = _a.className, tooltipOptions = _a.tooltipOptions;
|
|
7746
7750
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7747
7751
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7748
7752
|
var showCloseIcon = (tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {}).showCloseIcon;
|
|
7749
|
-
var
|
|
7750
|
-
return (jsxs(ColorPickerWrapper, __assign$1({ className: className, 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), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ showCloseIcon: showCloseIcon, position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7751
|
-
};
|
|
7752
|
-
var templateObject_1$1w;
|
|
7753
|
+
var numericTooltip = (tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.numeric) ? hiddenOptions === null || hiddenOptions === void 0 ? void 0 : hiddenOptions.length : 0;
|
|
7754
|
+
return (jsxs(ColorPickerWrapper, __assign$1({ className: className, 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), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ showCloseIcon: showCloseIcon, position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: (tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.numeric) ? (jsxs(NumericTooltip, __assign$1({ "data-testid": "numeric-tooltip" }, { children: ["+", numericTooltip] }), void 0)) : (jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0)) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7755
|
+
};
|
|
7753
7756
|
|
|
7754
7757
|
var renderOptions = function (selectedColor, options) {
|
|
7755
7758
|
if (options == null || options.length === 0) {
|
|
@@ -8185,9 +8188,9 @@ var H4 = newStyled.h4(templateObject_5$z || (templateObject_5$z = __makeTemplate
|
|
|
8185
8188
|
var FilterLink = newStyled.a(templateObject_6$v || (templateObject_6$v = __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; });
|
|
8186
8189
|
var OptionContainer = newStyled.div(templateObject_7$s || (templateObject_7$s = __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'); });
|
|
8187
8190
|
var ClearAll = newStyled.span(templateObject_8$l || (templateObject_8$l = __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; });
|
|
8188
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
8191
|
+
var MobileFooter = newStyled.div(templateObject_9$d || (templateObject_9$d = __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"])));
|
|
8189
8192
|
var MobileClearContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __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"])));
|
|
8190
|
-
var templateObject_1$1m, templateObject_2$12, templateObject_3$U, templateObject_4$H, templateObject_5$z, templateObject_6$v, templateObject_7$s, templateObject_8$l, templateObject_9$
|
|
8193
|
+
var templateObject_1$1m, templateObject_2$12, templateObject_3$U, templateObject_4$H, templateObject_5$z, templateObject_6$v, templateObject_7$s, templateObject_8$l, templateObject_9$d, templateObject_10$b;
|
|
8191
8194
|
|
|
8192
8195
|
var getStylesBySize$9 = function (size, theme) {
|
|
8193
8196
|
switch (size) {
|
|
@@ -19357,7 +19360,7 @@ var DateText$1 = newStyled.span(templateObject_5$s || (templateObject_5$s = __ma
|
|
|
19357
19360
|
var ReviewerName$1 = newStyled.h1(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
19358
19361
|
var VerifiedText = newStyled.h1(templateObject_7$m || (templateObject_7$m = __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"])));
|
|
19359
19362
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$h || (templateObject_8$h = __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"])));
|
|
19360
|
-
var ReviewDescription = newStyled.div(templateObject_9$
|
|
19363
|
+
var ReviewDescription = newStyled.div(templateObject_9$c || (templateObject_9$c = __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"])));
|
|
19361
19364
|
var ImageContainer$2 = newStyled.div(templateObject_10$a || (templateObject_10$a = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
19362
19365
|
var ImageWrapper$3 = newStyled(Image$3)(templateObject_11$7 || (templateObject_11$7 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
19363
19366
|
var VideoWrapper = newStyled.video(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
@@ -19390,7 +19393,7 @@ var Review$1 = function (_a) {
|
|
|
19390
19393
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$G, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer$2, { children: image &&
|
|
19391
19394
|
(!isVideo ? (jsx$1(ImageWrapper$3, { 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));
|
|
19392
19395
|
};
|
|
19393
|
-
var templateObject_1$W, templateObject_2$J, templateObject_3$G, templateObject_4$y, templateObject_5$s, templateObject_6$o, templateObject_7$m, templateObject_8$h, templateObject_9$
|
|
19396
|
+
var templateObject_1$W, templateObject_2$J, templateObject_3$G, templateObject_4$y, templateObject_5$s, templateObject_6$o, templateObject_7$m, templateObject_8$h, templateObject_9$c, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19394
19397
|
|
|
19395
19398
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19396
19399
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
@@ -19402,7 +19405,7 @@ var DateText = newStyled.span(templateObject_5$r || (templateObject_5$r = __make
|
|
|
19402
19405
|
var VariantText = newStyled.div(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
19403
19406
|
var ReviewerName = newStyled.h2(templateObject_7$l || (templateObject_7$l = __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"])));
|
|
19404
19407
|
var ReviewTitle = newStyled.h3(templateObject_8$g || (templateObject_8$g = __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"])));
|
|
19405
|
-
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$
|
|
19408
|
+
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$b || (templateObject_9$b = __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"])));
|
|
19406
19409
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\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 @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\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 @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
19407
19410
|
var ImagesContainer = newStyled.div(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
19408
19411
|
var Images = newStyled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
@@ -19446,7 +19449,7 @@ var Review = function (_a) {
|
|
|
19446
19449
|
: description,
|
|
19447
19450
|
} }, 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$2, __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));
|
|
19448
19451
|
};
|
|
19449
|
-
var templateObject_1$V, templateObject_2$I, templateObject_3$F, templateObject_4$x, templateObject_5$r, templateObject_6$n, templateObject_7$l, templateObject_8$g, templateObject_9$
|
|
19452
|
+
var templateObject_1$V, templateObject_2$I, templateObject_3$F, templateObject_4$x, templateObject_5$r, templateObject_6$n, templateObject_7$l, templateObject_8$g, templateObject_9$b, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$2, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19450
19453
|
|
|
19451
19454
|
var Container$E = newStyled.div(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
19452
19455
|
var ReviewsContainer = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
@@ -19719,9 +19722,9 @@ var TopLabel$1 = newStyled(Label$2)(templateObject_5$o || (templateObject_5$o =
|
|
|
19719
19722
|
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19720
19723
|
var Container$w = newStyled('div')(templateObject_7$j || (templateObject_7$j = __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"])));
|
|
19721
19724
|
var LabelText$1 = newStyled('span')(templateObject_8$f || (templateObject_8$f = __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"])));
|
|
19722
|
-
var Column$2 = newStyled('div')(templateObject_9$
|
|
19725
|
+
var Column$2 = newStyled('div')(templateObject_9$a || (templateObject_9$a = __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"])));
|
|
19723
19726
|
var TableRow$3 = newStyled.tr(templateObject_10$8 || (templateObject_10$8 = __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; });
|
|
19724
|
-
var templateObject_1$M, templateObject_2$C, templateObject_3$A, templateObject_4$u, templateObject_5$o, templateObject_6$l, templateObject_7$j, templateObject_8$f, templateObject_9$
|
|
19727
|
+
var templateObject_1$M, templateObject_2$C, templateObject_3$A, templateObject_4$u, templateObject_5$o, templateObject_6$l, templateObject_7$j, templateObject_8$f, templateObject_9$a, templateObject_10$8;
|
|
19725
19728
|
|
|
19726
19729
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19727
19730
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -20204,7 +20207,7 @@ var CheckpointStatusMessage = newStyled.span(templateObject_7$h || (templateObje
|
|
|
20204
20207
|
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20205
20208
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20206
20209
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
20207
|
-
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$
|
|
20210
|
+
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
20208
20211
|
var LastActiveCheckpointDot = newStyled.div(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"])), function (props) { return props.trackColor; });
|
|
20209
20212
|
var WarningIconWrapper = newStyled.div(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"], ["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"])));
|
|
20210
20213
|
var TrackingProgressV2 = function (_a) {
|
|
@@ -20240,7 +20243,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20240
20243
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20241
20244
|
})] }), void 0));
|
|
20242
20245
|
};
|
|
20243
|
-
var templateObject_1$z, templateObject_2$s, templateObject_3$r, templateObject_4$n, templateObject_5$l, templateObject_6$i, templateObject_7$h, templateObject_8$d, templateObject_9$
|
|
20246
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$r, templateObject_4$n, templateObject_5$l, templateObject_6$i, templateObject_7$h, templateObject_8$d, templateObject_9$9, templateObject_10$7, templateObject_11$5;
|
|
20244
20247
|
|
|
20245
20248
|
var Container$p = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20246
20249
|
var CheckpointContainer = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -20529,7 +20532,7 @@ var SubscriptionHeader$2 = newStyled.div(templateObject_6$c || (templateObject_6
|
|
|
20529
20532
|
}, PrimaryColor$1);
|
|
20530
20533
|
var BenefitsContainer$2 = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20531
20534
|
var Benefit = newStyled.div(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n a {\n text-decoration: underline;\n color: ", ";\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n a {\n text-decoration: underline;\n color: ", ";\n }\n"])), Shades700Color$1);
|
|
20532
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_9$
|
|
20535
|
+
var BenefitText$1 = newStyled(Text$7)(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20533
20536
|
var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
20534
20537
|
var selected = _a.selected, isNoMember = _a.isNoMember;
|
|
20535
20538
|
return selected
|
|
@@ -20541,7 +20544,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_10$6 || (templateOb
|
|
|
20541
20544
|
: Shades200Color$1;
|
|
20542
20545
|
});
|
|
20543
20546
|
var Container$n = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20544
|
-
var templateObject_1$s, templateObject_2$l, templateObject_3$l, templateObject_4$h, templateObject_5$f, templateObject_6$c, templateObject_7$b, templateObject_8$9, templateObject_9$
|
|
20547
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$l, templateObject_4$h, templateObject_5$f, templateObject_6$c, templateObject_7$b, templateObject_8$9, templateObject_9$8, templateObject_10$6, templateObject_11$4;
|
|
20545
20548
|
|
|
20546
20549
|
var ClubOfferSelector = function (_a) {
|
|
20547
20550
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20632,7 +20635,7 @@ var SubscriptionHeader$1 = newStyled.div(templateObject_6$b || (templateObject_6
|
|
|
20632
20635
|
}, PrimaryColor);
|
|
20633
20636
|
var BenefitsContainer$1 = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20634
20637
|
newStyled.div(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n a {\n text-decoration: underline;\n color: ", ";\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n a {\n text-decoration: underline;\n color: ", ";\n }\n"])), Shades700Color);
|
|
20635
|
-
var BenefitText = newStyled(Text$7)(templateObject_9$
|
|
20638
|
+
var BenefitText = newStyled(Text$7)(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20636
20639
|
var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
20637
20640
|
var selected = _a.selected, isNoMember = _a.isNoMember;
|
|
20638
20641
|
return selected
|
|
@@ -20645,7 +20648,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$5 || (templateOb
|
|
|
20645
20648
|
});
|
|
20646
20649
|
var Container$m = newStyled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20647
20650
|
var TermsText = newStyled(Text$7)(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20648
|
-
var templateObject_1$r, templateObject_2$k, templateObject_3$k, templateObject_4$g, templateObject_5$e, templateObject_6$b, templateObject_7$a, templateObject_8$8, templateObject_9$
|
|
20651
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$k, templateObject_4$g, templateObject_5$e, templateObject_6$b, templateObject_7$a, templateObject_8$8, templateObject_9$7, templateObject_10$5, templateObject_11$3, templateObject_12$2;
|
|
20649
20652
|
|
|
20650
20653
|
var ClubOfferSelector2 = function (_a) {
|
|
20651
20654
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs, termsTextLink = _a.termsTextLink;
|
|
@@ -20839,8 +20842,9 @@ var QuatityLabel = newStyled.div(templateObject_4$b || (templateObject_4$b = __m
|
|
|
20839
20842
|
newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 700;\n color: #292929;\n line-height: 20px;\n margin-top: 10px;\n"], ["\n font-size: 14px;\n font-weight: 700;\n color: #292929;\n line-height: 20px;\n margin-top: 10px;\n"])));
|
|
20840
20843
|
var OfferTitle = newStyled(Text$7)(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n font-size: 20px;\n margin-top: 10px;\n @media (max-width: 768px) {\n font-size: 14px;\n }\n"], ["\n font-size: 20px;\n margin-top: 10px;\n @media (max-width: 768px) {\n font-size: 14px;\n }\n"])));
|
|
20841
20844
|
var OfferText = newStyled(Text$7)(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 16px;\n display: inline;\n max-width: 190px;\n"], ["\n font-size: 12px;\n line-height: 16px;\n display: inline;\n max-width: 190px;\n"])));
|
|
20842
|
-
var
|
|
20843
|
-
var
|
|
20845
|
+
var DiscountValueText = newStyled.span(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
20846
|
+
var OfferButton = newStyled(ButtonSecondary)(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n font-size: 0.75rem;\n padding: 0.875rem 2rem;\n"], ["\n font-size: 0.75rem;\n padding: 0.875rem 2rem;\n"])));
|
|
20847
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$f, templateObject_4$b, templateObject_5$a, templateObject_6$a, templateObject_7$9, templateObject_8$7, templateObject_9$6;
|
|
20844
20848
|
|
|
20845
20849
|
var VariantType;
|
|
20846
20850
|
(function (VariantType) {
|
|
@@ -20851,7 +20855,7 @@ var VariantType;
|
|
|
20851
20855
|
var OfferAtPDP = function (_a) {
|
|
20852
20856
|
var title = _a.title, image = _a.image, ctaText = _a.ctaText, onAddToCart = _a.onAddToCart, variant = _a.variant, discountText = _a.discountText, discountValue = _a.discountValue, _b = _a.quantity, quantity = _b === void 0 ? '2X' : _b;
|
|
20853
20857
|
var _c = image !== null && image !== void 0 ? image : {}, src = _c.src, _d = _c.alt, alt = _d === void 0 ? 'Product image' : _d, _e = _c.width, width = _e === void 0 ? '116px' : _e, _f = _c.height, height = _f === void 0 ? '100%' : _f, _g = _c.borderRadius, borderRadius = _g === void 0 ? '8px' : _g;
|
|
20854
|
-
return variant == VariantType.V1 ? (jsxs$1(Container$j, { children: [src && (jsxs$1(ProductImageContainer, { children: [jsx$1(Image$3, { src: src, alt: alt, width: width, height: height, borderRadius: borderRadius }, void 0), jsxs$1(QuatityLabel, { children: [" ", quantity] }, void 0)] }, void 0)), jsxs$1(Body, { children: [jsx$1(OfferTitle, __assign$1({ variant: "body", weight: "bold" }, { children: title }), void 0), jsxs$1(OfferText, __assign$1({ variant: "body" }, { children: [discountText,
|
|
20858
|
+
return variant == VariantType.V1 ? (jsxs$1(Container$j, { children: [src && (jsxs$1(ProductImageContainer, { children: [jsx$1(Image$3, { src: src, alt: alt, width: width, height: height, borderRadius: borderRadius }, void 0), jsxs$1(QuatityLabel, { children: [" ", quantity] }, void 0)] }, void 0)), jsxs$1(Body, { children: [jsx$1(OfferTitle, __assign$1({ variant: "body", weight: "bold" }, { children: title }), void 0), jsxs$1(OfferText, __assign$1({ variant: "body" }, { children: [discountText, " ", jsx$1(DiscountValueText, { children: discountValue }, void 0)] }), void 0), jsx$1(OfferButton, { text: ctaText, size: ComponentSize.Medium, onClick: onAddToCart }, void 0)] }, void 0)] }, void 0)) : (jsx$1(ButtonSecondary, { onClick: onAddToCart, wide: true, size: ComponentSize.Large, text: ctaText }, void 0));
|
|
20855
20859
|
};
|
|
20856
20860
|
|
|
20857
20861
|
var ImageContainer$1 = newStyled.div(function (_a) {
|