@trafilea/afrodita-components 6.51.0 → 6.51.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +1 -0
- package/build/index.esm.js +89 -86
- package/build/index.esm.js.map +1 -1
- package/build/index.js +89 -86
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3237,7 +3237,7 @@ var Container$1x = newStyled.div(templateObject_1$2y || (templateObject_1$2y = _
|
|
|
3237
3237
|
var size = _a.size;
|
|
3238
3238
|
return (_b = getStylesBySize$g(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3239
3239
|
});
|
|
3240
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
3240
|
+
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) {
|
|
3241
3241
|
var textColor = _a.textColor;
|
|
3242
3242
|
return textColor;
|
|
3243
3243
|
}, function (_a) {
|
|
@@ -3254,7 +3254,7 @@ var ClubOfferTag = function (_a) {
|
|
|
3254
3254
|
var theme = useTheme();
|
|
3255
3255
|
return (jsxRuntime.jsx(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: jsxRuntime.jsx(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));
|
|
3256
3256
|
};
|
|
3257
|
-
var templateObject_1$2y, templateObject_2$
|
|
3257
|
+
var templateObject_1$2y, templateObject_2$1R;
|
|
3258
3258
|
|
|
3259
3259
|
var getStylesBySize$f = function (size, bordersRounded, theme) {
|
|
3260
3260
|
var _a, _b, _c;
|
|
@@ -3307,7 +3307,7 @@ var Container$1w = newStyled.div(templateObject_1$2x || (templateObject_1$2x = _
|
|
|
3307
3307
|
var size = _a.size;
|
|
3308
3308
|
return (_b = getStylesBySize$f(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
3309
3309
|
});
|
|
3310
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
3310
|
+
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) {
|
|
3311
3311
|
var textColor = _a.textColor;
|
|
3312
3312
|
return textColor;
|
|
3313
3313
|
}, function (_a) {
|
|
@@ -3324,7 +3324,7 @@ var DiscountTag$4 = function (_a) {
|
|
|
3324
3324
|
var theme = useTheme();
|
|
3325
3325
|
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(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));
|
|
3326
3326
|
};
|
|
3327
|
-
var templateObject_1$2x, templateObject_2$
|
|
3327
|
+
var templateObject_1$2x, templateObject_2$1Q;
|
|
3328
3328
|
|
|
3329
3329
|
var Viewports = {
|
|
3330
3330
|
mobile: 'mobile',
|
|
@@ -3434,7 +3434,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3434
3434
|
}
|
|
3435
3435
|
};
|
|
3436
3436
|
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"])));
|
|
3437
|
-
var Price$1 = newStyled.p(templateObject_2$
|
|
3437
|
+
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) {
|
|
3438
3438
|
var weight = _a.weight;
|
|
3439
3439
|
return (weight ? weight : '400');
|
|
3440
3440
|
}, function (_a) {
|
|
@@ -3491,7 +3491,7 @@ var PriceLabel$1 = function (_a) {
|
|
|
3491
3491
|
};
|
|
3492
3492
|
return (jsxRuntime.jsxs(Container$1v, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(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)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3493
3493
|
};
|
|
3494
|
-
var templateObject_1$2w, templateObject_2$
|
|
3494
|
+
var templateObject_1$2w, templateObject_2$1P, templateObject_3$1p;
|
|
3495
3495
|
|
|
3496
3496
|
var FinalPriceStyledContainer$3 = newStyled.div(templateObject_1$2v || (templateObject_1$2v = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3497
3497
|
var PriceLabelV2$1 = function (_a) {
|
|
@@ -3565,7 +3565,7 @@ var PriceLabelV2$1 = function (_a) {
|
|
|
3565
3565
|
var templateObject_1$2v;
|
|
3566
3566
|
|
|
3567
3567
|
var FinalPriceStyledContainer$2 = newStyled.div(templateObject_1$2u || (templateObject_1$2u = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3568
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
3568
|
+
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"])));
|
|
3569
3569
|
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"])));
|
|
3570
3570
|
var PriceLabelV3 = function (_a) {
|
|
3571
3571
|
var _b;
|
|
@@ -3637,10 +3637,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
3637
3637
|
lineHeight: '22px',
|
|
3638
3638
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
3639
3639
|
};
|
|
3640
|
-
var templateObject_1$2u, templateObject_2$
|
|
3640
|
+
var templateObject_1$2u, templateObject_2$1O, templateObject_3$1o;
|
|
3641
3641
|
|
|
3642
3642
|
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"])));
|
|
3643
|
-
var Price = newStyled.p(templateObject_2$
|
|
3643
|
+
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) {
|
|
3644
3644
|
var weight = _a.weight;
|
|
3645
3645
|
return weight !== null && weight !== void 0 ? weight : '400';
|
|
3646
3646
|
}, function (_a) {
|
|
@@ -3653,7 +3653,7 @@ var Price = newStyled.p(templateObject_2$1M || (templateObject_2$1M = __makeTemp
|
|
|
3653
3653
|
var underlined = _a.underlined;
|
|
3654
3654
|
return (underlined ? 'line-through' : 'none');
|
|
3655
3655
|
});
|
|
3656
|
-
var templateObject_1$2t, templateObject_2$
|
|
3656
|
+
var templateObject_1$2t, templateObject_2$1N;
|
|
3657
3657
|
|
|
3658
3658
|
function getTestId$1() {
|
|
3659
3659
|
var args = [];
|
|
@@ -3749,8 +3749,8 @@ var PriceLabelV2 = function (_a) {
|
|
|
3749
3749
|
var templateObject_1$2r;
|
|
3750
3750
|
|
|
3751
3751
|
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"])));
|
|
3752
|
-
var ImgWrapper = newStyled.div(templateObject_2$
|
|
3753
|
-
var templateObject_1$2q, templateObject_2$
|
|
3752
|
+
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"])));
|
|
3753
|
+
var templateObject_1$2q, templateObject_2$1M;
|
|
3754
3754
|
|
|
3755
3755
|
var ClubPriceMemberLabel = function (_a) {
|
|
3756
3756
|
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"]);
|
|
@@ -3810,7 +3810,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$2n || (templateObject_1$2n
|
|
|
3810
3810
|
var opacity = _a.opacity;
|
|
3811
3811
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3812
3812
|
});
|
|
3813
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3813
|
+
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) {
|
|
3814
3814
|
var width = _a.width;
|
|
3815
3815
|
return width;
|
|
3816
3816
|
}, function (_a) {
|
|
@@ -3823,7 +3823,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1K || (templateObject_2$
|
|
|
3823
3823
|
var opacity = _a.opacity;
|
|
3824
3824
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3825
3825
|
});
|
|
3826
|
-
var templateObject_1$2n, templateObject_2$
|
|
3826
|
+
var templateObject_1$2n, templateObject_2$1L;
|
|
3827
3827
|
|
|
3828
3828
|
/* eslint-disable no-undef */
|
|
3829
3829
|
var cache = new Map();
|
|
@@ -4011,12 +4011,12 @@ var Image$3 = function (_a) {
|
|
|
4011
4011
|
var templateObject_1$2m;
|
|
4012
4012
|
|
|
4013
4013
|
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"])));
|
|
4014
|
-
var SwitchWrapper = newStyled.div(templateObject_2$
|
|
4014
|
+
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"])));
|
|
4015
4015
|
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) {
|
|
4016
4016
|
var $color = _a.$color;
|
|
4017
4017
|
return $color;
|
|
4018
4018
|
});
|
|
4019
|
-
var templateObject_1$2l, templateObject_2$
|
|
4019
|
+
var templateObject_1$2l, templateObject_2$1K, templateObject_3$1n;
|
|
4020
4020
|
|
|
4021
4021
|
var ToggleComponent = function (_a) {
|
|
4022
4022
|
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"]);
|
|
@@ -4899,7 +4899,7 @@ function jsxs(type, props, key) {
|
|
|
4899
4899
|
// `variants` styles that are consistent through all themes.
|
|
4900
4900
|
var TAGS = {
|
|
4901
4901
|
hero1: newStyled.h1(templateObject_1$2k || (templateObject_1$2k = __makeTemplateObject([""], [""]))),
|
|
4902
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4902
|
+
hero2: newStyled.h2(templateObject_2$1J || (templateObject_2$1J = __makeTemplateObject([""], [""]))),
|
|
4903
4903
|
hero3: newStyled.h3(templateObject_3$1m || (templateObject_3$1m = __makeTemplateObject([""], [""]))),
|
|
4904
4904
|
display1: newStyled.h1(templateObject_4$15 || (templateObject_4$15 = __makeTemplateObject([""], [""]))),
|
|
4905
4905
|
display2: newStyled.h2(templateObject_5$R || (templateObject_5$R = __makeTemplateObject([""], [""]))),
|
|
@@ -5038,10 +5038,10 @@ var DEFAULTS = {
|
|
|
5038
5038
|
size: 'regular',
|
|
5039
5039
|
},
|
|
5040
5040
|
};
|
|
5041
|
-
var templateObject_1$2k, templateObject_2$
|
|
5041
|
+
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$f, 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;
|
|
5042
5042
|
|
|
5043
5043
|
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"])));
|
|
5044
|
-
var Card$4 = newStyled.div(templateObject_2$
|
|
5044
|
+
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"])));
|
|
5045
5045
|
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"])));
|
|
5046
5046
|
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"])));
|
|
5047
5047
|
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"])));
|
|
@@ -5070,27 +5070,27 @@ var PackCard$1 = function (_a) {
|
|
|
5070
5070
|
currency: currencyCode || 'USD',
|
|
5071
5071
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5072
5072
|
};
|
|
5073
|
-
var templateObject_1$2j, templateObject_2$
|
|
5073
|
+
var templateObject_1$2j, templateObject_2$1I, templateObject_3$1l, templateObject_4$14, templateObject_5$Q, templateObject_6$I;
|
|
5074
5074
|
|
|
5075
5075
|
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"])));
|
|
5076
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
5076
|
+
var DropContainer = newStyled.div(templateObject_2$1H || (templateObject_2$1H = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5077
5077
|
var DropList = function (_a) {
|
|
5078
5078
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
5079
5079
|
return (jsxRuntime.jsx(Container$1r, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
5080
5080
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
5081
5081
|
}) }, void 0));
|
|
5082
5082
|
};
|
|
5083
|
-
var templateObject_1$2i, templateObject_2$
|
|
5083
|
+
var templateObject_1$2i, templateObject_2$1H;
|
|
5084
5084
|
|
|
5085
5085
|
var DROPS_TOTAL = 5;
|
|
5086
5086
|
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"])));
|
|
5087
|
-
var Title$b = newStyled.p(templateObject_2$
|
|
5087
|
+
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"])));
|
|
5088
5088
|
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"])));
|
|
5089
5089
|
var AbsorbencyLevel = function (_a) {
|
|
5090
5090
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
5091
5091
|
return (jsxRuntime.jsxs(Container$1q, { children: [jsxRuntime.jsx(Title$b, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
5092
5092
|
};
|
|
5093
|
-
var templateObject_1$2h, templateObject_2$
|
|
5093
|
+
var templateObject_1$2h, templateObject_2$1G, templateObject_3$1k;
|
|
5094
5094
|
|
|
5095
5095
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
5096
5096
|
`),"","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(`
|
|
@@ -5353,8 +5353,8 @@ var isValidDate = function (value) {
|
|
|
5353
5353
|
};
|
|
5354
5354
|
|
|
5355
5355
|
var Bold = newStyled.span(templateObject_1$2e || (templateObject_1$2e = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
5356
|
-
var FlexContainer$5 = newStyled.div(templateObject_2$
|
|
5357
|
-
var templateObject_1$2e, templateObject_2$
|
|
5356
|
+
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"])));
|
|
5357
|
+
var templateObject_1$2e, templateObject_2$1F;
|
|
5358
5358
|
|
|
5359
5359
|
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) {
|
|
5360
5360
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
@@ -5363,11 +5363,11 @@ var Container$1o = newStyled.div(templateObject_1$2d || (templateObject_1$2d = _
|
|
|
5363
5363
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
5364
5364
|
return height;
|
|
5365
5365
|
});
|
|
5366
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
5366
|
+
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"])));
|
|
5367
5367
|
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"])));
|
|
5368
5368
|
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"])));
|
|
5369
5369
|
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"])));
|
|
5370
|
-
var templateObject_1$2d, templateObject_2$
|
|
5370
|
+
var templateObject_1$2d, templateObject_2$1E, templateObject_3$1j, templateObject_4$13, templateObject_5$P;
|
|
5371
5371
|
|
|
5372
5372
|
var CouponCard = function (_a) {
|
|
5373
5373
|
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;
|
|
@@ -5521,13 +5521,13 @@ var sizeOptions = [
|
|
|
5521
5521
|
];
|
|
5522
5522
|
|
|
5523
5523
|
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; });
|
|
5524
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
5524
|
+
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"])));
|
|
5525
5525
|
var Error$1 = function (_a) {
|
|
5526
5526
|
var error = _a.error;
|
|
5527
5527
|
var theme = useTheme();
|
|
5528
5528
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
5529
5529
|
};
|
|
5530
|
-
var templateObject_1$2c, templateObject_2$
|
|
5530
|
+
var templateObject_1$2c, templateObject_2$1D;
|
|
5531
5531
|
|
|
5532
5532
|
var BaseSelectButton = function (_a) {
|
|
5533
5533
|
var children = _a.children, as = _a.as;
|
|
@@ -5791,7 +5791,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
5791
5791
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
5792
5792
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
5793
5793
|
]; });
|
|
5794
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5794
|
+
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) {
|
|
5795
5795
|
var disabled = _a.disabled;
|
|
5796
5796
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5797
5797
|
});
|
|
@@ -5807,7 +5807,7 @@ var Checkbox = function (_a) {
|
|
|
5807
5807
|
};
|
|
5808
5808
|
return (jsxRuntime.jsxs(Container$1n, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$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));
|
|
5809
5809
|
};
|
|
5810
|
-
var templateObject_1$29, templateObject_2$
|
|
5810
|
+
var templateObject_1$29, templateObject_2$1C;
|
|
5811
5811
|
|
|
5812
5812
|
var CustomOption = newStyled.li(function (_a) {
|
|
5813
5813
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5857,7 +5857,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5857
5857
|
});
|
|
5858
5858
|
|
|
5859
5859
|
var Container$1m = newStyled.div(templateObject_1$28 || (templateObject_1$28 = __makeTemplateObject([""], [""])));
|
|
5860
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5860
|
+
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"])));
|
|
5861
5861
|
var SelectedOption = newStyled.span(templateObject_3$1i || (templateObject_3$1i = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5862
5862
|
var fontWeight = _a.fontWeight;
|
|
5863
5863
|
return fontWeight || '';
|
|
@@ -5894,7 +5894,7 @@ function SimpleDropdown(_a) {
|
|
|
5894
5894
|
var DropdownContainer = showRequiredPlaceholder ? Container$1m : React$2.Fragment;
|
|
5895
5895
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5896
5896
|
}
|
|
5897
|
-
var templateObject_1$28, templateObject_2$
|
|
5897
|
+
var templateObject_1$28, templateObject_2$1B, templateObject_3$1i;
|
|
5898
5898
|
|
|
5899
5899
|
/* base styles & size variants */
|
|
5900
5900
|
var CustomRadioStyles$2 = {
|
|
@@ -5961,7 +5961,7 @@ var ContainerStyles$2 = {
|
|
|
5961
5961
|
|
|
5962
5962
|
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"])));
|
|
5963
5963
|
var Container$1l = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5964
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5964
|
+
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) {
|
|
5965
5965
|
var disabled = _a.disabled;
|
|
5966
5966
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5967
5967
|
});
|
|
@@ -5995,7 +5995,7 @@ var RadioInput = function (_a) {
|
|
|
5995
5995
|
};
|
|
5996
5996
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$1l, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsxs(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, style: labelStyle }, { children: [icon, " ", label] }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5997
5997
|
};
|
|
5998
|
-
var templateObject_1$27, templateObject_2$
|
|
5998
|
+
var templateObject_1$27, templateObject_2$1A, templateObject_3$1h, templateObject_4$12;
|
|
5999
5999
|
|
|
6000
6000
|
var useOnClickOutside = function (ref, handler) {
|
|
6001
6001
|
React$2.useEffect(function () {
|
|
@@ -6098,7 +6098,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __ma
|
|
|
6098
6098
|
var disableHover = _a.disableHover;
|
|
6099
6099
|
return (disableHover ? 0 : 1);
|
|
6100
6100
|
});
|
|
6101
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
6101
|
+
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) {
|
|
6102
6102
|
var position = _a.position;
|
|
6103
6103
|
return getContainerFlexDirection(position);
|
|
6104
6104
|
}, function (_a) {
|
|
@@ -6153,7 +6153,7 @@ var CloseToolTip = newStyled.button(templateObject_8$s || (templateObject_8$s =
|
|
|
6153
6153
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6154
6154
|
return right;
|
|
6155
6155
|
});
|
|
6156
|
-
var templateObject_1$26, templateObject_2$
|
|
6156
|
+
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;
|
|
6157
6157
|
|
|
6158
6158
|
var Tooltip = function (_a) {
|
|
6159
6159
|
var _b;
|
|
@@ -6197,7 +6197,7 @@ var benefitsColorMapper = function (_a) {
|
|
|
6197
6197
|
};
|
|
6198
6198
|
|
|
6199
6199
|
var FlexContainer$4 = newStyled.div(templateObject_1$25 || (templateObject_1$25 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6200
|
-
var ContainerBase$5 = newStyled.div(templateObject_2$
|
|
6200
|
+
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) {
|
|
6201
6201
|
var selected = _a.selected, theme = _a.theme;
|
|
6202
6202
|
return selected
|
|
6203
6203
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -6234,7 +6234,7 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6234
6234
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6235
6235
|
});
|
|
6236
6236
|
var Container$1k = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6237
|
-
var templateObject_1$25, templateObject_2$
|
|
6237
|
+
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$e, templateObject_10$d, templateObject_11$9, templateObject_12$6, templateObject_13$5;
|
|
6238
6238
|
|
|
6239
6239
|
var radioIds$3 = {
|
|
6240
6240
|
oneTime: {
|
|
@@ -6294,7 +6294,7 @@ var FlexContainer$3 = newStyled.div(templateObject_1$24 || (templateObject_1$24
|
|
|
6294
6294
|
return theme.name === 'TheSpaDr' &&
|
|
6295
6295
|
"\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 ";
|
|
6296
6296
|
});
|
|
6297
|
-
var DiscountTag$3 = newStyled.div(templateObject_2$
|
|
6297
|
+
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) {
|
|
6298
6298
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
6299
6299
|
return isSelected
|
|
6300
6300
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -6347,7 +6347,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4
|
|
|
6347
6347
|
var theme = _a.theme;
|
|
6348
6348
|
return theme.component.autoship.tooltip.margin;
|
|
6349
6349
|
});
|
|
6350
|
-
var templateObject_1$24, templateObject_2$
|
|
6350
|
+
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$d, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$4;
|
|
6351
6351
|
|
|
6352
6352
|
var radioIds$2 = {
|
|
6353
6353
|
oneTime: {
|
|
@@ -6427,12 +6427,12 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6427
6427
|
_a$2);
|
|
6428
6428
|
|
|
6429
6429
|
var CustomerDetails = newStyled.div(templateObject_1$23 || (templateObject_1$23 = __makeTemplateObject([""], [""])));
|
|
6430
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6430
|
+
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"])));
|
|
6431
6431
|
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"])));
|
|
6432
6432
|
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"])));
|
|
6433
6433
|
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"])));
|
|
6434
6434
|
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"])));
|
|
6435
|
-
var templateObject_1$23, templateObject_2$
|
|
6435
|
+
var templateObject_1$23, templateObject_2$1w, templateObject_3$1d, templateObject_4$_, templateObject_5$L, templateObject_6$E;
|
|
6436
6436
|
|
|
6437
6437
|
var NameWithStars = function (_a) {
|
|
6438
6438
|
var name = _a.name, size = _a.size;
|
|
@@ -6451,7 +6451,7 @@ var ResultFeedback = function (_a) {
|
|
|
6451
6451
|
};
|
|
6452
6452
|
|
|
6453
6453
|
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; });
|
|
6454
|
-
var ImageContainer$7 = newStyled.div(templateObject_2$
|
|
6454
|
+
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"])));
|
|
6455
6455
|
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; });
|
|
6456
6456
|
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) {
|
|
6457
6457
|
var theme = _a.theme;
|
|
@@ -6463,7 +6463,7 @@ var UserInfoText = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __m
|
|
|
6463
6463
|
var theme = _a.theme, size = _a.size;
|
|
6464
6464
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6465
6465
|
});
|
|
6466
|
-
var templateObject_1$22, templateObject_2$
|
|
6466
|
+
var templateObject_1$22, templateObject_2$1v, templateObject_3$1c, templateObject_4$Z;
|
|
6467
6467
|
|
|
6468
6468
|
/* base styles & size variants */
|
|
6469
6469
|
var getStylesBySize$d = function (size, theme) {
|
|
@@ -6586,13 +6586,13 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
6586
6586
|
var templateObject_1$1$;
|
|
6587
6587
|
|
|
6588
6588
|
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"])));
|
|
6589
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6589
|
+
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"])));
|
|
6590
6590
|
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) {
|
|
6591
6591
|
var color = _a.color;
|
|
6592
6592
|
return color;
|
|
6593
6593
|
});
|
|
6594
6594
|
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"])));
|
|
6595
|
-
var templateObject_1$1_, templateObject_2$
|
|
6595
|
+
var templateObject_1$1_, templateObject_2$1u, templateObject_3$1b, templateObject_4$Y;
|
|
6596
6596
|
|
|
6597
6597
|
var Minimalistic = function (_a) {
|
|
6598
6598
|
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;
|
|
@@ -6601,7 +6601,7 @@ var Minimalistic = function (_a) {
|
|
|
6601
6601
|
};
|
|
6602
6602
|
|
|
6603
6603
|
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"])));
|
|
6604
|
-
var Title$9 = newStyled.h1(templateObject_2$
|
|
6604
|
+
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; });
|
|
6605
6605
|
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; });
|
|
6606
6606
|
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"])));
|
|
6607
6607
|
var Simple = function (_a) {
|
|
@@ -6609,7 +6609,7 @@ var Simple = function (_a) {
|
|
|
6609
6609
|
var theme = useTheme();
|
|
6610
6610
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$1g, { children: [jsxRuntime.jsx(Title$9, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel$1, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6611
6611
|
};
|
|
6612
|
-
var templateObject_1$1Z, templateObject_2$
|
|
6612
|
+
var templateObject_1$1Z, templateObject_2$1t, templateObject_3$1a, templateObject_4$X;
|
|
6613
6613
|
|
|
6614
6614
|
var Bundle = {
|
|
6615
6615
|
Minimalistic: Minimalistic,
|
|
@@ -6620,7 +6620,7 @@ var Container$1f = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = _
|
|
|
6620
6620
|
var displayBNPL = _a.displayBNPL;
|
|
6621
6621
|
return (displayBNPL ? 'flex' : 'none');
|
|
6622
6622
|
});
|
|
6623
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6623
|
+
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"])));
|
|
6624
6624
|
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"])));
|
|
6625
6625
|
var BuyNowPayLater = function (_a) {
|
|
6626
6626
|
var _b;
|
|
@@ -6648,7 +6648,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
6648
6648
|
paddingRight: '0.25rem',
|
|
6649
6649
|
}, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : ''] }, void 0), showLogo && (jsxRuntime.jsx(IconWrapper$1, __assign$1({ style: { display: 'flex' } }, { children: jsxRuntime.jsx(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));
|
|
6650
6650
|
};
|
|
6651
|
-
var templateObject_1$1Y, templateObject_2$
|
|
6651
|
+
var templateObject_1$1Y, templateObject_2$1s, templateObject_3$19;
|
|
6652
6652
|
|
|
6653
6653
|
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) {
|
|
6654
6654
|
var backgroundColor = _a.backgroundColor;
|
|
@@ -6718,7 +6718,7 @@ var CartProductItem = {
|
|
|
6718
6718
|
};
|
|
6719
6719
|
|
|
6720
6720
|
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"])));
|
|
6721
|
-
var MobileContainer = newStyled(Container$1c)(templateObject_2$
|
|
6721
|
+
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"])));
|
|
6722
6722
|
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"])));
|
|
6723
6723
|
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"])));
|
|
6724
6724
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6730,7 +6730,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6730
6730
|
var isMobile = useWindowDimensions().isMobile;
|
|
6731
6731
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$1c, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6732
6732
|
};
|
|
6733
|
-
var templateObject_1$1R, templateObject_2$
|
|
6733
|
+
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;
|
|
6734
6734
|
|
|
6735
6735
|
var Spacing = function (_a) {
|
|
6736
6736
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6739,7 +6739,7 @@ var Spacing = function (_a) {
|
|
|
6739
6739
|
};
|
|
6740
6740
|
|
|
6741
6741
|
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"])));
|
|
6742
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6742
|
+
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"])));
|
|
6743
6743
|
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"])));
|
|
6744
6744
|
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) {
|
|
6745
6745
|
var index = _a.index;
|
|
@@ -6752,7 +6752,7 @@ var StrengthBars = function (_a) {
|
|
|
6752
6752
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6753
6753
|
return (jsxRuntime.jsxs(Container$1b, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6754
6754
|
};
|
|
6755
|
-
var templateObject_1$1Q, templateObject_2$
|
|
6755
|
+
var templateObject_1$1Q, templateObject_2$1q, templateObject_3$17, templateObject_4$V;
|
|
6756
6756
|
|
|
6757
6757
|
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"])));
|
|
6758
6758
|
var templateObject_1$1P;
|
|
@@ -6863,8 +6863,8 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6863
6863
|
}),
|
|
6864
6864
|
];
|
|
6865
6865
|
});
|
|
6866
|
-
var RatingLabel = newStyled.span(templateObject_2$
|
|
6867
|
-
var templateObject_1$1M, templateObject_2$
|
|
6866
|
+
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; });
|
|
6867
|
+
var templateObject_1$1M, templateObject_2$1p;
|
|
6868
6868
|
|
|
6869
6869
|
var Rating = function (_a) {
|
|
6870
6870
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6892,12 +6892,12 @@ var ImageWrapper$4 = newStyled.div(templateObject_1$1L || (templateObject_1$1L =
|
|
|
6892
6892
|
var width = _a.width;
|
|
6893
6893
|
return width !== null && width !== void 0 ? width : '30%';
|
|
6894
6894
|
});
|
|
6895
|
-
var RatingWrapper = newStyled.div(templateObject_2$
|
|
6895
|
+
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"])));
|
|
6896
6896
|
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) {
|
|
6897
6897
|
var fontSize = _a.fontSize;
|
|
6898
6898
|
return fontSize;
|
|
6899
6899
|
});
|
|
6900
|
-
var templateObject_1$1L, templateObject_2$
|
|
6900
|
+
var templateObject_1$1L, templateObject_2$1o, templateObject_3$16;
|
|
6901
6901
|
|
|
6902
6902
|
var OfferAtCartImage = function (_a) {
|
|
6903
6903
|
var isMobile = _a.isMobile, src = _a.src, alt = _a.alt, rating = _a.rating, width = _a.width;
|
|
@@ -6945,8 +6945,8 @@ var getDropdownOptions = function (frequency) {
|
|
|
6945
6945
|
};
|
|
6946
6946
|
|
|
6947
6947
|
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"])));
|
|
6948
|
-
var BenefitText$2 = newStyled(Text$7)(templateObject_2$
|
|
6949
|
-
var templateObject_1$1K, templateObject_2$
|
|
6948
|
+
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"])));
|
|
6949
|
+
var templateObject_1$1K, templateObject_2$1n;
|
|
6950
6950
|
|
|
6951
6951
|
var BenefitsList = function (_a) {
|
|
6952
6952
|
var benefits = _a.benefits, disabled = _a.disabled, className = _a.className;
|
|
@@ -6961,7 +6961,7 @@ var TimerContainer$1 = newStyled.div(templateObject_1$1J || (templateObject_1$1J
|
|
|
6961
6961
|
var timerColor = _a.timerColor;
|
|
6962
6962
|
return timerColor || '';
|
|
6963
6963
|
});
|
|
6964
|
-
var TimerContainerV2 = newStyled.div(templateObject_2$
|
|
6964
|
+
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) {
|
|
6965
6965
|
var timerColor = _a.timerColor;
|
|
6966
6966
|
return timerColor || '';
|
|
6967
6967
|
});
|
|
@@ -6973,7 +6973,7 @@ var UnitBlock = newStyled(Text$7)(templateObject_3$15 || (templateObject_3$15 =
|
|
|
6973
6973
|
return theme.colors.shades.white.color;
|
|
6974
6974
|
});
|
|
6975
6975
|
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"])));
|
|
6976
|
-
var templateObject_1$1J, templateObject_2$
|
|
6976
|
+
var templateObject_1$1J, templateObject_2$1m, templateObject_3$15, templateObject_4$U;
|
|
6977
6977
|
|
|
6978
6978
|
var HRS = 'HRS';
|
|
6979
6979
|
var MIN = 'MIN';
|
|
@@ -7058,7 +7058,7 @@ var borderSize = {
|
|
|
7058
7058
|
large: '3px',
|
|
7059
7059
|
};
|
|
7060
7060
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
7061
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
7061
|
+
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) {
|
|
7062
7062
|
var size = _a.size;
|
|
7063
7063
|
return borderSize[size];
|
|
7064
7064
|
}, function (_a) {
|
|
@@ -7071,7 +7071,7 @@ var StyledSpinner = newStyled.div(templateObject_2$1k || (templateObject_2$1k =
|
|
|
7071
7071
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
7072
7072
|
return duration;
|
|
7073
7073
|
});
|
|
7074
|
-
var templateObject_1$1H, templateObject_2$
|
|
7074
|
+
var templateObject_1$1H, templateObject_2$1l;
|
|
7075
7075
|
|
|
7076
7076
|
var Spinner = function (_a) {
|
|
7077
7077
|
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;
|
|
@@ -7079,8 +7079,8 @@ var Spinner = function (_a) {
|
|
|
7079
7079
|
};
|
|
7080
7080
|
|
|
7081
7081
|
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); });
|
|
7082
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
7083
|
-
var templateObject_1$1G, templateObject_2$
|
|
7082
|
+
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; });
|
|
7083
|
+
var templateObject_1$1G, templateObject_2$1k;
|
|
7084
7084
|
|
|
7085
7085
|
var ProgressBar$1 = function (_a) {
|
|
7086
7086
|
var progress = _a.progress, hide = _a.hide;
|
|
@@ -7088,12 +7088,12 @@ var ProgressBar$1 = function (_a) {
|
|
|
7088
7088
|
};
|
|
7089
7089
|
|
|
7090
7090
|
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"])));
|
|
7091
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
7091
|
+
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; });
|
|
7092
7092
|
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"])));
|
|
7093
7093
|
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"])));
|
|
7094
7094
|
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"])));
|
|
7095
7095
|
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"])));
|
|
7096
|
-
var templateObject_1$1F, templateObject_2$
|
|
7096
|
+
var templateObject_1$1F, templateObject_2$1j, templateObject_3$14, templateObject_4$T, templateObject_5$J, templateObject_6$C;
|
|
7097
7097
|
|
|
7098
7098
|
var Video$1 = function (_a) {
|
|
7099
7099
|
var _b, _c, _d, _e;
|
|
@@ -7150,7 +7150,7 @@ var LikeCount = newStyled.span(templateObject_1$1E || (templateObject_1$1E = __m
|
|
|
7150
7150
|
var theme = _a.theme;
|
|
7151
7151
|
return theme.colors.shades.black.color;
|
|
7152
7152
|
});
|
|
7153
|
-
var LikeBtnContainer = newStyled.button(templateObject_2$
|
|
7153
|
+
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) {
|
|
7154
7154
|
var _b = _a.position, position = _b === void 0 ? 'absolute' : _b;
|
|
7155
7155
|
return position;
|
|
7156
7156
|
}, function (_a) {
|
|
@@ -7169,7 +7169,7 @@ var LikeBtnContainer = newStyled.button(templateObject_2$1h || (templateObject_2
|
|
|
7169
7169
|
var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'border-box' : _b;
|
|
7170
7170
|
return boxSizing;
|
|
7171
7171
|
});
|
|
7172
|
-
var templateObject_1$1E, templateObject_2$
|
|
7172
|
+
var templateObject_1$1E, templateObject_2$1i;
|
|
7173
7173
|
|
|
7174
7174
|
var getStylesBySize$c = function (size) {
|
|
7175
7175
|
switch (size) {
|
|
@@ -7247,7 +7247,7 @@ var LikeButton = function (_a) {
|
|
|
7247
7247
|
};
|
|
7248
7248
|
|
|
7249
7249
|
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"])));
|
|
7250
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
7250
|
+
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"])));
|
|
7251
7251
|
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"])));
|
|
7252
7252
|
var PriceContainerV2 = newStyled.span(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7253
7253
|
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"])));
|
|
@@ -7304,7 +7304,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7304
7304
|
? finalPriceArray[0]
|
|
7305
7305
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7306
7306
|
};
|
|
7307
|
-
var templateObject_1$1C, templateObject_2$
|
|
7307
|
+
var templateObject_1$1C, templateObject_2$1h, templateObject_3$13, templateObject_4$S, templateObject_5$I;
|
|
7308
7308
|
|
|
7309
7309
|
var STYLES_BY_THEME = {
|
|
7310
7310
|
TheSpaDr: {
|
|
@@ -7378,7 +7378,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
7378
7378
|
});
|
|
7379
7379
|
});
|
|
7380
7380
|
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"])));
|
|
7381
|
-
var Container$15 = newStyled.a(templateObject_2$
|
|
7381
|
+
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"])));
|
|
7382
7382
|
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"])));
|
|
7383
7383
|
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) {
|
|
7384
7384
|
var theme = _a.theme;
|
|
@@ -7441,7 +7441,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$B || (templateObject_6
|
|
|
7441
7441
|
});
|
|
7442
7442
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7443
7443
|
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"])));
|
|
7444
|
-
var templateObject_1$1B, templateObject_2$
|
|
7444
|
+
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;
|
|
7445
7445
|
|
|
7446
7446
|
var ProductItemMobile = function (_a) {
|
|
7447
7447
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7559,7 +7559,7 @@ var ImageContainer$5 = newStyled.div(function (_a) {
|
|
|
7559
7559
|
});
|
|
7560
7560
|
});
|
|
7561
7561
|
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; });
|
|
7562
|
-
var Container$14 = newStyled.a(templateObject_2$
|
|
7562
|
+
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"])));
|
|
7563
7563
|
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"])));
|
|
7564
7564
|
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; });
|
|
7565
7565
|
var getStylesBySize$a = function (size) {
|
|
@@ -7647,7 +7647,7 @@ var ProductItemTK = function (_a) {
|
|
|
7647
7647
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7648
7648
|
} }, { 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));
|
|
7649
7649
|
};
|
|
7650
|
-
var templateObject_1$1A, templateObject_2$
|
|
7650
|
+
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;
|
|
7651
7651
|
|
|
7652
7652
|
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"])));
|
|
7653
7653
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7668,7 +7668,7 @@ var Collection = {
|
|
|
7668
7668
|
};
|
|
7669
7669
|
|
|
7670
7670
|
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"])));
|
|
7671
|
-
newStyled(lt.Label)(templateObject_2$
|
|
7671
|
+
newStyled(lt.Label)(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7672
7672
|
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"])));
|
|
7673
7673
|
var Span = newStyled.span(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7674
7674
|
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"])));
|
|
@@ -7689,7 +7689,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7689
7689
|
Option: Option,
|
|
7690
7690
|
OptionsContainer: OptionsContainer,
|
|
7691
7691
|
});
|
|
7692
|
-
var templateObject_1$1y, templateObject_2$
|
|
7692
|
+
var templateObject_1$1y, templateObject_2$1e, templateObject_3$10, templateObject_4$P, templateObject_5$F;
|
|
7693
7693
|
|
|
7694
7694
|
var OneColorSelector = function (_a) {
|
|
7695
7695
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7737,14 +7737,14 @@ var Container$12 = newStyled.div(templateObject_1$1x || (templateObject_1$1x = _
|
|
|
7737
7737
|
var noStock = _a.noStock;
|
|
7738
7738
|
return (noStock ? '0.4' : '1');
|
|
7739
7739
|
});
|
|
7740
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
7740
|
+
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"])));
|
|
7741
7741
|
var PatternSelector = function (_a) {
|
|
7742
7742
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
7743
7743
|
var theme = useTheme();
|
|
7744
7744
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
7745
7745
|
return (jsxRuntime.jsx(Container$12, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
7746
7746
|
};
|
|
7747
|
-
var templateObject_1$1x, templateObject_2$
|
|
7747
|
+
var templateObject_1$1x, templateObject_2$1d;
|
|
7748
7748
|
|
|
7749
7749
|
var renderOptions$1 = function (options, showCross) {
|
|
7750
7750
|
if (showCross === void 0) { showCross = false; }
|
|
@@ -7767,15 +7767,18 @@ var SingleColorPicker = function (_a) {
|
|
|
7767
7767
|
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));
|
|
7768
7768
|
};
|
|
7769
7769
|
|
|
7770
|
+
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"])));
|
|
7771
|
+
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"])));
|
|
7772
|
+
var templateObject_1$1w, templateObject_2$1c;
|
|
7773
|
+
|
|
7770
7774
|
var ColorPickerWithTooltip = function (_a) {
|
|
7771
7775
|
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;
|
|
7772
7776
|
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7773
7777
|
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7774
7778
|
var showCloseIcon = (tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {}).showCloseIcon;
|
|
7775
|
-
var
|
|
7776
|
-
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));
|
|
7777
|
-
};
|
|
7778
|
-
var templateObject_1$1w;
|
|
7779
|
+
var numericTooltip = (tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.numeric) ? hiddenOptions === null || hiddenOptions === void 0 ? void 0 : hiddenOptions.length : 0;
|
|
7780
|
+
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));
|
|
7781
|
+
};
|
|
7779
7782
|
|
|
7780
7783
|
var renderOptions = function (selectedColor, options) {
|
|
7781
7784
|
if (options == null || options.length === 0) {
|