@trafilea/afrodita-components 6.0.1 → 6.1.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 +19 -8
- package/build/index.esm.js +359 -307
- package/build/index.esm.js.map +1 -1
- package/build/index.js +359 -307
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.js +9 -1
- package/build/theme/shapermint.theme.js +9 -1
- package/build/theme/thespadr.theme.js +11 -3
- package/build/theme/truekind.theme.js +9 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3122,7 +3122,7 @@ var AssetsProvider = function (_a) {
|
|
|
3122
3122
|
};
|
|
3123
3123
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
3124
3124
|
|
|
3125
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3125
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3126
3126
|
var width = _a.width;
|
|
3127
3127
|
return width;
|
|
3128
3128
|
}, function (_a) {
|
|
@@ -3138,7 +3138,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1M || (templateObject_1$1M
|
|
|
3138
3138
|
var opacity = _a.opacity;
|
|
3139
3139
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3140
3140
|
});
|
|
3141
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3141
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1a || (templateObject_2$1a = __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) {
|
|
3142
3142
|
var width = _a.width;
|
|
3143
3143
|
return width;
|
|
3144
3144
|
}, function (_a) {
|
|
@@ -3151,7 +3151,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$19 || (templateObject_2$
|
|
|
3151
3151
|
var opacity = _a.opacity;
|
|
3152
3152
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3153
3153
|
});
|
|
3154
|
-
var templateObject_1$
|
|
3154
|
+
var templateObject_1$1O, templateObject_2$1a;
|
|
3155
3155
|
|
|
3156
3156
|
/* eslint-disable no-undef */
|
|
3157
3157
|
var cache = new Map();
|
|
@@ -4011,14 +4011,14 @@ function jsxs(type, props, key) {
|
|
|
4011
4011
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4012
4012
|
// `variants` styles that are consistent through all themes.
|
|
4013
4013
|
var TAGS = {
|
|
4014
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4015
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4016
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4017
|
-
display1: newStyled.h1(templateObject_4$
|
|
4014
|
+
hero1: newStyled.h1(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject([""], [""]))),
|
|
4015
|
+
hero2: newStyled.h2(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject([""], [""]))),
|
|
4016
|
+
hero3: newStyled.h3(templateObject_3$U || (templateObject_3$U = __makeTemplateObject([""], [""]))),
|
|
4017
|
+
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
4018
4018
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
4019
4019
|
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
4020
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4021
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4020
|
+
heading1: newStyled.h1(templateObject_7$h || (templateObject_7$h = __makeTemplateObject([""], [""]))),
|
|
4021
|
+
heading2: newStyled.h2(templateObject_8$c || (templateObject_8$c = __makeTemplateObject([""], [""]))),
|
|
4022
4022
|
heading3: newStyled.h3(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
4023
4023
|
heading4: newStyled.h4(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject([""], [""]))),
|
|
4024
4024
|
heading5: newStyled.h5(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject([""], [""]))),
|
|
@@ -4147,8 +4147,12 @@ var DEFAULTS = {
|
|
|
4147
4147
|
size: 'regular',
|
|
4148
4148
|
},
|
|
4149
4149
|
};
|
|
4150
|
-
var templateObject_1$
|
|
4150
|
+
var templateObject_1$1N, templateObject_2$19, templateObject_3$U, templateObject_4$F, templateObject_5$r, templateObject_6$p, templateObject_7$h, templateObject_8$c, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4151
4151
|
|
|
4152
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
4153
|
+
var timerColor = _a.timerColor;
|
|
4154
|
+
return timerColor || '';
|
|
4155
|
+
});
|
|
4152
4156
|
var timeToSeconds = function (_a) {
|
|
4153
4157
|
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
4154
4158
|
return hours * 3600 + minutes * 60 + seconds;
|
|
@@ -4160,8 +4164,8 @@ var secondsToTime = function (secs) {
|
|
|
4160
4164
|
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
4161
4165
|
};
|
|
4162
4166
|
var Timer = function (_a) {
|
|
4163
|
-
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, rest = __rest(_a, ["onTimeUp", "displayZeroValues"]);
|
|
4164
|
-
var
|
|
4167
|
+
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.timerColor, timerColor = _d === void 0 ? '#292929' : _d, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "timerColor"]);
|
|
4168
|
+
var _e = React$2.useState(timeToSeconds(rest)), secs = _e[0], setSecs = _e[1];
|
|
4165
4169
|
React$2.useEffect(function () {
|
|
4166
4170
|
var timer = setInterval(function () {
|
|
4167
4171
|
setSecs(function (seconds) {
|
|
@@ -4177,11 +4181,12 @@ var Timer = function (_a) {
|
|
|
4177
4181
|
clearInterval(timer);
|
|
4178
4182
|
return function () { return clearInterval(timer); };
|
|
4179
4183
|
}, [onTimeUp, secs]);
|
|
4180
|
-
var
|
|
4181
|
-
return (jsxRuntime.jsxs(
|
|
4182
|
-
};
|
|
4184
|
+
var _f = secondsToTime(secs), hours = _f.hours, minutes = _f.minutes, seconds = _f.seconds;
|
|
4185
|
+
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
4186
|
+
};
|
|
4187
|
+
var templateObject_1$1M;
|
|
4183
4188
|
|
|
4184
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
4189
|
+
var TimerContainer = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
4185
4190
|
var textPosition = _a.textPosition;
|
|
4186
4191
|
return textPosition;
|
|
4187
4192
|
}, function (_a) {
|
|
@@ -4194,10 +4199,12 @@ var TimerContainer = newStyled.div(templateObject_1$1K || (templateObject_1$1K =
|
|
|
4194
4199
|
var borderRadius = _a.borderRadius;
|
|
4195
4200
|
return borderRadius || '8px';
|
|
4196
4201
|
});
|
|
4202
|
+
var templateObject_1$1L;
|
|
4203
|
+
|
|
4197
4204
|
var HurryUp = function (_a) {
|
|
4198
|
-
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d;
|
|
4205
|
+
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.showSeconds, showSeconds = _e === void 0 ? true : _e, timerColor = _a.timerColor;
|
|
4199
4206
|
var theme = useTheme();
|
|
4200
|
-
var
|
|
4207
|
+
var _f = React__default["default"].useMemo(function () {
|
|
4201
4208
|
var tomorrowDate = new Date();
|
|
4202
4209
|
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
4203
4210
|
tomorrowDate.setHours(0, 0, 0, 0);
|
|
@@ -4211,10 +4218,9 @@ var HurryUp = function (_a) {
|
|
|
4211
4218
|
minutes: minutes,
|
|
4212
4219
|
seconds: seconds,
|
|
4213
4220
|
};
|
|
4214
|
-
}, []), hours =
|
|
4215
|
-
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsxRuntime.jsx(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsxRuntime.jsx(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
|
|
4216
|
-
};
|
|
4217
|
-
var templateObject_1$1K;
|
|
4221
|
+
}, []), hours = _f.hours, minutes = _f.minutes, seconds = _f.seconds;
|
|
4222
|
+
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsxRuntime.jsx(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && (jsxRuntime.jsx(Timer, { hours: hours, minutes: minutes, seconds: seconds, showSeconds: showSeconds, timerColor: timerColor, onTimeUp: function () { } }, void 0))] }), void 0));
|
|
4223
|
+
};
|
|
4218
4224
|
|
|
4219
4225
|
var formatPrice = function (value, _a) {
|
|
4220
4226
|
var _b;
|
|
@@ -4229,15 +4235,15 @@ var formatPrice = function (value, _a) {
|
|
|
4229
4235
|
}).format(valueToFormat);
|
|
4230
4236
|
};
|
|
4231
4237
|
|
|
4232
|
-
var Container$
|
|
4233
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4234
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4235
|
-
var Label$4 = newStyled.div(templateObject_4$
|
|
4238
|
+
var Container$17 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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"])));
|
|
4239
|
+
var Card$3 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __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"])));
|
|
4240
|
+
var Tag$2 = newStyled.div(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
4241
|
+
var Label$4 = newStyled.div(templateObject_4$E || (templateObject_4$E = __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"])));
|
|
4236
4242
|
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"])));
|
|
4237
4243
|
var DiscountContainer$1 = newStyled.div(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4238
4244
|
var PackSelectorV2 = function (_a) {
|
|
4239
4245
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4240
|
-
return (jsxRuntime.jsx(Container$
|
|
4246
|
+
return (jsxRuntime.jsx(Container$17, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4241
4247
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4242
4248
|
}) }), void 0));
|
|
4243
4249
|
};
|
|
@@ -4259,27 +4265,27 @@ var PackCard$1 = function (_a) {
|
|
|
4259
4265
|
currency: currencyCode || 'USD',
|
|
4260
4266
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4261
4267
|
};
|
|
4262
|
-
var templateObject_1$
|
|
4268
|
+
var templateObject_1$1K, templateObject_2$18, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4263
4269
|
|
|
4264
|
-
var Container$
|
|
4265
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4270
|
+
var Container$16 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4271
|
+
var DropContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4266
4272
|
var DropList = function (_a) {
|
|
4267
4273
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4268
|
-
return (jsxRuntime.jsx(Container$
|
|
4274
|
+
return (jsxRuntime.jsx(Container$16, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4269
4275
|
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));
|
|
4270
4276
|
}) }, void 0));
|
|
4271
4277
|
};
|
|
4272
|
-
var templateObject_1$
|
|
4278
|
+
var templateObject_1$1J, templateObject_2$17;
|
|
4273
4279
|
|
|
4274
4280
|
var DROPS_TOTAL = 5;
|
|
4275
|
-
var Container$
|
|
4276
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4277
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4281
|
+
var Container$15 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4282
|
+
var Title$8 = newStyled.p(templateObject_2$16 || (templateObject_2$16 = __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"])));
|
|
4283
|
+
var Description$3 = newStyled.p(templateObject_3$S || (templateObject_3$S = __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"])));
|
|
4278
4284
|
var AbsorbencyLevel = function (_a) {
|
|
4279
4285
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4280
|
-
return (jsxRuntime.jsxs(Container$
|
|
4286
|
+
return (jsxRuntime.jsxs(Container$15, { children: [jsxRuntime.jsx(Title$8, { 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));
|
|
4281
4287
|
};
|
|
4282
|
-
var templateObject_1$
|
|
4288
|
+
var templateObject_1$1I, templateObject_2$16, templateObject_3$S;
|
|
4283
4289
|
|
|
4284
4290
|
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(`
|
|
4285
4291
|
`),"","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(`
|
|
@@ -4355,7 +4361,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4355
4361
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4356
4362
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4357
4363
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4358
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4364
|
+
var StyledContent = newStyled.button(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
4359
4365
|
var Accordion$1 = function (_a) {
|
|
4360
4366
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
4361
4367
|
var theme = useTheme();
|
|
@@ -4379,9 +4385,9 @@ var Accordion$1 = function (_a) {
|
|
|
4379
4385
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4380
4386
|
} }), void 0));
|
|
4381
4387
|
};
|
|
4382
|
-
var templateObject_1$
|
|
4388
|
+
var templateObject_1$1H;
|
|
4383
4389
|
|
|
4384
|
-
var Container$
|
|
4390
|
+
var Container$14 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4385
4391
|
var AccordionOptions = function (_a) {
|
|
4386
4392
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4387
4393
|
var _b = React$2.useState({
|
|
@@ -4394,7 +4400,7 @@ var AccordionOptions = function (_a) {
|
|
|
4394
4400
|
}
|
|
4395
4401
|
return false;
|
|
4396
4402
|
};
|
|
4397
|
-
return (jsxRuntime.jsx(Container$
|
|
4403
|
+
return (jsxRuntime.jsx(Container$14, { children: accordions.map(function (accordion, index) {
|
|
4398
4404
|
var forceOpenValue = getForceOpen(index);
|
|
4399
4405
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4400
4406
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4405,7 +4411,7 @@ var AccordionOptions = function (_a) {
|
|
|
4405
4411
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4406
4412
|
}) }, void 0));
|
|
4407
4413
|
};
|
|
4408
|
-
var templateObject_1$
|
|
4414
|
+
var templateObject_1$1G;
|
|
4409
4415
|
|
|
4410
4416
|
exports.CardSectionType = void 0;
|
|
4411
4417
|
(function (CardSectionType) {
|
|
@@ -4567,6 +4573,15 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4567
4573
|
literal: true,
|
|
4568
4574
|
});
|
|
4569
4575
|
|
|
4576
|
+
var ErrorText = newStyled.h3(templateObject_1$1F || (templateObject_1$1F = __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; });
|
|
4577
|
+
var ErrorContainer = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __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"])));
|
|
4578
|
+
var Error$1 = function (_a) {
|
|
4579
|
+
var error = _a.error;
|
|
4580
|
+
var theme = useTheme();
|
|
4581
|
+
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));
|
|
4582
|
+
};
|
|
4583
|
+
var templateObject_1$1F, templateObject_2$15;
|
|
4584
|
+
|
|
4570
4585
|
var BaseSelectButton = function (_a) {
|
|
4571
4586
|
var children = _a.children, as = _a.as;
|
|
4572
4587
|
return jsxRuntime.jsx(Ee.Button, __assign$1({ as: as }, { children: children }), void 0);
|
|
@@ -4631,17 +4646,17 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4631
4646
|
});
|
|
4632
4647
|
});
|
|
4633
4648
|
var BaseDropdownButton = function (_a) {
|
|
4634
|
-
var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter;
|
|
4649
|
+
var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter, testId = _a.testId;
|
|
4635
4650
|
var theme = useTheme();
|
|
4636
4651
|
return (jsx(BaseSelect$1.Button, __assign$1({ as: React$2.Fragment }, { children: function (_a) {
|
|
4637
4652
|
var open = _a.open;
|
|
4638
|
-
return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, isSortOrFilter: isSortOrFilter }, { children: [children, open ? (jsx(CloseIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0)) : (jsx(OpenIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0))] }), void 0));
|
|
4653
|
+
return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, "data-testid": testId, isSortOrFilter: isSortOrFilter }, { children: [children, open ? (jsx(CloseIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0)) : (jsx(OpenIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0))] }), void 0));
|
|
4639
4654
|
} }), void 0));
|
|
4640
4655
|
};
|
|
4641
4656
|
var withLabel = function (Button, label) {
|
|
4642
4657
|
return function WithLabel(_a) {
|
|
4643
|
-
var CloseIcon = _a.CloseIcon, OpenIcon = _a.OpenIcon, children = _a.children, wide = _a.wide;
|
|
4644
|
-
return (jsx(Button, __assign$1({ CloseIcon: CloseIcon, OpenIcon: OpenIcon, wide: wide }, { children: jsxs("div", __assign$1({ css: {
|
|
4658
|
+
var CloseIcon = _a.CloseIcon, OpenIcon = _a.OpenIcon, children = _a.children, testId = _a.testId, wide = _a.wide;
|
|
4659
|
+
return (jsx(Button, __assign$1({ CloseIcon: CloseIcon, OpenIcon: OpenIcon, wide: wide, "data-testid": testId }, { children: jsxs("div", __assign$1({ css: {
|
|
4645
4660
|
display: 'flex',
|
|
4646
4661
|
flexDirection: 'column',
|
|
4647
4662
|
alignItems: 'flex-start',
|
|
@@ -4651,15 +4666,6 @@ var withLabel = function (Button, label) {
|
|
|
4651
4666
|
};
|
|
4652
4667
|
};
|
|
4653
4668
|
|
|
4654
|
-
var ErrorText = newStyled.h3(templateObject_1$1D || (templateObject_1$1D = __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; });
|
|
4655
|
-
var ErrorContainer = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
4656
|
-
var Error$1 = function (_a) {
|
|
4657
|
-
var error = _a.error;
|
|
4658
|
-
var theme = useTheme();
|
|
4659
|
-
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));
|
|
4660
|
-
};
|
|
4661
|
-
var templateObject_1$1D, templateObject_2$14;
|
|
4662
|
-
|
|
4663
4669
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4664
4670
|
var theme = _a.theme;
|
|
4665
4671
|
return ({
|
|
@@ -4825,7 +4831,7 @@ var CustomCheckboxStyles = {
|
|
|
4825
4831
|
},
|
|
4826
4832
|
};
|
|
4827
4833
|
|
|
4828
|
-
var Container$
|
|
4834
|
+
var Container$13 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4829
4835
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4830
4836
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4831
4837
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4836,7 +4842,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4836
4842
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4837
4843
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4838
4844
|
]; });
|
|
4839
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4845
|
+
var Input$5 = newStyled.input(templateObject_2$14 || (templateObject_2$14 = __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) {
|
|
4840
4846
|
var disabled = _a.disabled;
|
|
4841
4847
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4842
4848
|
});
|
|
@@ -4850,9 +4856,9 @@ var Checkbox = function (_a) {
|
|
|
4850
4856
|
}
|
|
4851
4857
|
onChange(e.target.checked);
|
|
4852
4858
|
};
|
|
4853
|
-
return (jsxRuntime.jsxs(Container$
|
|
4859
|
+
return (jsxRuntime.jsxs(Container$13, { 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$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4854
4860
|
};
|
|
4855
|
-
var templateObject_1$
|
|
4861
|
+
var templateObject_1$1D, templateObject_2$14;
|
|
4856
4862
|
|
|
4857
4863
|
var CustomOption = newStyled.li(function (_a) {
|
|
4858
4864
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4901,8 +4907,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4901
4907
|
Option: BaseDropdownOption,
|
|
4902
4908
|
});
|
|
4903
4909
|
|
|
4904
|
-
var Container$
|
|
4905
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4910
|
+
var Container$12 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject([""], [""])));
|
|
4911
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$13 || (templateObject_2$13 = __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"])));
|
|
4906
4912
|
function SimpleDropdown(_a) {
|
|
4907
4913
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
|
|
4908
4914
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4932,10 +4938,10 @@ function SimpleDropdown(_a) {
|
|
|
4932
4938
|
setSelectedValue(value);
|
|
4933
4939
|
}, [value, options, initialValue]);
|
|
4934
4940
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4935
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4936
|
-
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort,
|
|
4941
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$12 : React$2.Fragment;
|
|
4942
|
+
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4937
4943
|
}
|
|
4938
|
-
var templateObject_1$
|
|
4944
|
+
var templateObject_1$1C, templateObject_2$13;
|
|
4939
4945
|
|
|
4940
4946
|
/* base styles & size variants */
|
|
4941
4947
|
var CustomRadioStyles$2 = {
|
|
@@ -5000,9 +5006,9 @@ var ContainerStyles$2 = {
|
|
|
5000
5006
|
},
|
|
5001
5007
|
};
|
|
5002
5008
|
|
|
5003
|
-
var Wrapper$
|
|
5004
|
-
var Container$
|
|
5005
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5009
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5010
|
+
var Container$11 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5011
|
+
var Input$4 = newStyled.input(templateObject_2$12 || (templateObject_2$12 = __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) {
|
|
5006
5012
|
var disabled = _a.disabled;
|
|
5007
5013
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5008
5014
|
});
|
|
@@ -5010,7 +5016,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5010
5016
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5011
5017
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5012
5018
|
]; });
|
|
5013
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
5019
|
+
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5014
5020
|
var theme = _a.theme;
|
|
5015
5021
|
return theme.component.radio.textSize;
|
|
5016
5022
|
}, function (_a) {
|
|
@@ -5024,9 +5030,9 @@ var RadioInput = function (_a) {
|
|
|
5024
5030
|
var value = event.currentTarget.value;
|
|
5025
5031
|
onChange({ value: value, label: label });
|
|
5026
5032
|
};
|
|
5027
|
-
return (jsxRuntime.jsxs(Wrapper$
|
|
5033
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$11, __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), 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));
|
|
5028
5034
|
};
|
|
5029
|
-
var templateObject_1$
|
|
5035
|
+
var templateObject_1$1B, templateObject_2$12, templateObject_3$R;
|
|
5030
5036
|
|
|
5031
5037
|
var TooltipArrow = function (_a) {
|
|
5032
5038
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -5106,7 +5112,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5106
5112
|
}
|
|
5107
5113
|
};
|
|
5108
5114
|
|
|
5109
|
-
var Wrapper$
|
|
5115
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"])), function (_a) {
|
|
5110
5116
|
var position = _a.position;
|
|
5111
5117
|
return getWrapperFlexDirection(position);
|
|
5112
5118
|
});
|
|
@@ -5131,14 +5137,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
5131
5137
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5132
5138
|
return actual === expected ? margin : '0';
|
|
5133
5139
|
};
|
|
5134
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
5140
|
+
var ContentWrapper = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n"])), function (_a) {
|
|
5135
5141
|
var borderColor = _a.borderColor;
|
|
5136
5142
|
return borderColor;
|
|
5137
5143
|
}, function (_a) {
|
|
5138
5144
|
var backgroundColor = _a.backgroundColor;
|
|
5139
5145
|
return backgroundColor;
|
|
5140
5146
|
});
|
|
5141
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
5147
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
5142
5148
|
var position = _a.position;
|
|
5143
5149
|
return getArrowRotation(position);
|
|
5144
5150
|
}, function (_a) {
|
|
@@ -5148,7 +5154,7 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$P || (templateObject_
|
|
|
5148
5154
|
var position = _a.position;
|
|
5149
5155
|
return getArrowContainerMargin(position);
|
|
5150
5156
|
});
|
|
5151
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5157
|
+
var TooltipText = newStyled.div(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: center;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: center;\n color: ", ";\n"])), function (_a) {
|
|
5152
5158
|
var color = _a.color;
|
|
5153
5159
|
return color;
|
|
5154
5160
|
});
|
|
@@ -5157,8 +5163,8 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5157
5163
|
var color = _a.color;
|
|
5158
5164
|
return color;
|
|
5159
5165
|
});
|
|
5160
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5161
|
-
var templateObject_1$
|
|
5166
|
+
var IconContainer$5 = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5167
|
+
var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$D, templateObject_5$p, templateObject_6$n, templateObject_7$g;
|
|
5162
5168
|
|
|
5163
5169
|
var Tooltip = function (_a) {
|
|
5164
5170
|
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, _b = _a.align, align = _b === void 0 ? 'center' : _b, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header;
|
|
@@ -5175,7 +5181,7 @@ var Tooltip = function (_a) {
|
|
|
5175
5181
|
var ref = tooltipRef.current;
|
|
5176
5182
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
5177
5183
|
}, [tooltipRef]);
|
|
5178
|
-
return (jsxRuntime.jsxs(Wrapper$
|
|
5184
|
+
return (jsxRuntime.jsxs(Wrapper$6, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsxRuntime.jsx(IconContainer$5, { children: React__default["default"].createElement(header.Icon, {
|
|
5179
5185
|
testId: 'HeaderIcon',
|
|
5180
5186
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
5181
5187
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
@@ -5197,7 +5203,7 @@ var benefitsColorMapper = function (_a) {
|
|
|
5197
5203
|
};
|
|
5198
5204
|
};
|
|
5199
5205
|
|
|
5200
|
-
var getStylesBySize$
|
|
5206
|
+
var getStylesBySize$d = function (size, bordersRounded, theme) {
|
|
5201
5207
|
var _a, _b, _c;
|
|
5202
5208
|
switch (size) {
|
|
5203
5209
|
case exports.ComponentSize.Large:
|
|
@@ -5226,7 +5232,7 @@ var getStylesBySize$e = function (size, bordersRounded, theme) {
|
|
|
5226
5232
|
};
|
|
5227
5233
|
}
|
|
5228
5234
|
};
|
|
5229
|
-
var Container$
|
|
5235
|
+
var Container$10 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5230
5236
|
var backgroundColor = _a.backgroundColor;
|
|
5231
5237
|
return backgroundColor;
|
|
5232
5238
|
}, function (_a) {
|
|
@@ -5235,37 +5241,37 @@ var Container$11 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = _
|
|
|
5235
5241
|
}, function (_a) {
|
|
5236
5242
|
var _b;
|
|
5237
5243
|
var size = _a.size, bordersRounded = _a.bordersRounded;
|
|
5238
|
-
return (_b = getStylesBySize$
|
|
5244
|
+
return (_b = getStylesBySize$d(size, bordersRounded)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5239
5245
|
}, function (_a) {
|
|
5240
5246
|
var _b;
|
|
5241
5247
|
var size = _a.size;
|
|
5242
|
-
return (_b = getStylesBySize$
|
|
5248
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5243
5249
|
}, function (_a) {
|
|
5244
5250
|
var size = _a.size;
|
|
5245
5251
|
return (size === exports.ComponentSize.Small ? '2rem' : 'unset');
|
|
5246
5252
|
}, function (_a) {
|
|
5247
5253
|
var _b;
|
|
5248
5254
|
var size = _a.size;
|
|
5249
|
-
return (_b = getStylesBySize$
|
|
5255
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5250
5256
|
});
|
|
5251
|
-
var H3$3 = newStyled.h3(templateObject_2
|
|
5257
|
+
var H3$3 = newStyled.h3(templateObject_2$10 || (templateObject_2$10 = __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) {
|
|
5252
5258
|
var textColor = _a.textColor;
|
|
5253
5259
|
return textColor;
|
|
5254
5260
|
}, function (_a) {
|
|
5255
5261
|
var _b;
|
|
5256
5262
|
var size = _a.size, theme = _a.theme;
|
|
5257
|
-
return (_b = getStylesBySize$
|
|
5263
|
+
return (_b = getStylesBySize$d(size, false, theme)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5258
5264
|
}, function (_a) {
|
|
5259
5265
|
var _b;
|
|
5260
5266
|
var size = _a.size;
|
|
5261
|
-
return (_b = getStylesBySize$
|
|
5267
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5262
5268
|
});
|
|
5263
5269
|
var DiscountTag = function (_a) {
|
|
5264
5270
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5265
5271
|
var theme = useTheme();
|
|
5266
|
-
return (jsxRuntime.jsx(Container$
|
|
5272
|
+
return (jsxRuntime.jsx(Container$10, __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$3, __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));
|
|
5267
5273
|
};
|
|
5268
|
-
var templateObject_1$
|
|
5274
|
+
var templateObject_1$1z, templateObject_2$10;
|
|
5269
5275
|
|
|
5270
5276
|
function getWindowDimensions() {
|
|
5271
5277
|
var width = window.innerWidth, height = window.innerHeight;
|
|
@@ -5291,7 +5297,7 @@ var useWindowDimensions = function (breakpoints) {
|
|
|
5291
5297
|
};
|
|
5292
5298
|
};
|
|
5293
5299
|
|
|
5294
|
-
var getStylesBySize$
|
|
5300
|
+
var getStylesBySize$c = function (size, theme) {
|
|
5295
5301
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
5296
5302
|
switch (size) {
|
|
5297
5303
|
case exports.ComponentSize.Large:
|
|
@@ -5322,17 +5328,17 @@ var getStylesBySize$d = function (size, theme) {
|
|
|
5322
5328
|
var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall) {
|
|
5323
5329
|
var _a, _b, _c;
|
|
5324
5330
|
if (finalPriceStyled) {
|
|
5325
|
-
return (_a = getStylesBySize$
|
|
5331
|
+
return (_a = getStylesBySize$c(size, theme)) === null || _a === void 0 ? void 0 : _a.finalPricefontSize;
|
|
5326
5332
|
}
|
|
5327
5333
|
else if (finalPriceStyledSmall) {
|
|
5328
|
-
return (_b = getStylesBySize$
|
|
5334
|
+
return (_b = getStylesBySize$c(size, theme)) === null || _b === void 0 ? void 0 : _b.finalPricefontSizeSmall;
|
|
5329
5335
|
}
|
|
5330
5336
|
else {
|
|
5331
|
-
return (_c = getStylesBySize$
|
|
5337
|
+
return (_c = getStylesBySize$c(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5332
5338
|
}
|
|
5333
5339
|
};
|
|
5334
|
-
var Container
|
|
5335
|
-
var Price = newStyled.p(templateObject_2
|
|
5340
|
+
var Container$$ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5341
|
+
var Price = newStyled.p(templateObject_2$$ || (templateObject_2$$ = __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) {
|
|
5336
5342
|
var weight = _a.weight;
|
|
5337
5343
|
return (weight ? weight : '400');
|
|
5338
5344
|
}, function (_a) {
|
|
@@ -5341,7 +5347,7 @@ var Price = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __makeTempla
|
|
|
5341
5347
|
}, function (_a) {
|
|
5342
5348
|
var _b;
|
|
5343
5349
|
var size = _a.size;
|
|
5344
|
-
return (_b = getStylesBySize$
|
|
5350
|
+
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5345
5351
|
}, function (_a) {
|
|
5346
5352
|
var color = _a.color;
|
|
5347
5353
|
return color;
|
|
@@ -5351,15 +5357,15 @@ var Price = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __makeTempla
|
|
|
5351
5357
|
}, function (_a) {
|
|
5352
5358
|
var _b;
|
|
5353
5359
|
var margin = _a.margin, size = _a.size;
|
|
5354
|
-
return (margin ? (_b = getStylesBySize$
|
|
5360
|
+
return (margin ? (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
5355
5361
|
}, function (_a) {
|
|
5356
5362
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5357
5363
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5358
5364
|
});
|
|
5359
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5365
|
+
var TagContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5360
5366
|
var _b;
|
|
5361
5367
|
var size = _a.size;
|
|
5362
|
-
return (_b = getStylesBySize$
|
|
5368
|
+
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
5363
5369
|
});
|
|
5364
5370
|
function getTestId() {
|
|
5365
5371
|
var args = [];
|
|
@@ -5387,11 +5393,11 @@ var PriceLabel = function (_a) {
|
|
|
5387
5393
|
: exports.ComponentSize.XSmall;
|
|
5388
5394
|
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5389
5395
|
};
|
|
5390
|
-
return (jsxRuntime.jsxs(Container
|
|
5396
|
+
return (jsxRuntime.jsxs(Container$$, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(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, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5391
5397
|
};
|
|
5392
|
-
var templateObject_1$
|
|
5398
|
+
var templateObject_1$1y, templateObject_2$$, templateObject_3$P;
|
|
5393
5399
|
|
|
5394
|
-
var getStylesBySize$
|
|
5400
|
+
var getStylesBySize$b = function (size) {
|
|
5395
5401
|
switch (size) {
|
|
5396
5402
|
case exports.ComponentSize.Large:
|
|
5397
5403
|
return {
|
|
@@ -5419,7 +5425,7 @@ var getStylesBySize$c = function (size) {
|
|
|
5419
5425
|
};
|
|
5420
5426
|
}
|
|
5421
5427
|
};
|
|
5422
|
-
var Container
|
|
5428
|
+
var Container$_ = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5423
5429
|
var backgroundColor = _a.backgroundColor;
|
|
5424
5430
|
return backgroundColor;
|
|
5425
5431
|
}, function (_a) {
|
|
@@ -5428,39 +5434,39 @@ var Container$$ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __
|
|
|
5428
5434
|
}, function (_a) {
|
|
5429
5435
|
var _b;
|
|
5430
5436
|
var size = _a.size;
|
|
5431
|
-
return (_b = getStylesBySize$
|
|
5437
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5432
5438
|
}, function (_a) {
|
|
5433
5439
|
var _b;
|
|
5434
5440
|
var size = _a.size;
|
|
5435
|
-
return (_b = getStylesBySize$
|
|
5441
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5436
5442
|
}, function (_a) {
|
|
5437
5443
|
var size = _a.size;
|
|
5438
5444
|
return (size === exports.ComponentSize.Small ? '2rem' : 'unset');
|
|
5439
5445
|
}, function (_a) {
|
|
5440
5446
|
var _b;
|
|
5441
5447
|
var size = _a.size;
|
|
5442
|
-
return (_b = getStylesBySize$
|
|
5448
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5443
5449
|
});
|
|
5444
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5450
|
+
var H3$2 = newStyled.h3(templateObject_2$_ || (templateObject_2$_ = __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) {
|
|
5445
5451
|
var textColor = _a.textColor;
|
|
5446
5452
|
return textColor;
|
|
5447
5453
|
}, function (_a) {
|
|
5448
5454
|
var _b;
|
|
5449
5455
|
var size = _a.size;
|
|
5450
|
-
return (_b = getStylesBySize$
|
|
5456
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5451
5457
|
}, function (_a) {
|
|
5452
5458
|
var _b;
|
|
5453
5459
|
var size = _a.size;
|
|
5454
|
-
return (_b = getStylesBySize$
|
|
5460
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5455
5461
|
});
|
|
5456
5462
|
var ClubOfferTag = function (_a) {
|
|
5457
5463
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5458
5464
|
var theme = useTheme();
|
|
5459
|
-
return (jsxRuntime.jsx(Container
|
|
5465
|
+
return (jsxRuntime.jsx(Container$_, __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));
|
|
5460
5466
|
};
|
|
5461
|
-
var templateObject_1$
|
|
5467
|
+
var templateObject_1$1x, templateObject_2$_;
|
|
5462
5468
|
|
|
5463
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5469
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5464
5470
|
var PriceLabelV2 = function (_a) {
|
|
5465
5471
|
var _b;
|
|
5466
5472
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay"]);
|
|
@@ -5510,7 +5516,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5510
5516
|
var savetoString = saveto.toFixed(2);
|
|
5511
5517
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5512
5518
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5513
|
-
return (jsxRuntime.jsxs(Container
|
|
5519
|
+
return (jsxRuntime.jsxs(Container$$, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5514
5520
|
marginTop: '-5px',
|
|
5515
5521
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5516
5522
|
marginTop: '-6px',
|
|
@@ -5526,10 +5532,10 @@ var PriceLabelV2 = function (_a) {
|
|
|
5526
5532
|
lineHeight: '22px',
|
|
5527
5533
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5528
5534
|
};
|
|
5529
|
-
var templateObject_1$
|
|
5535
|
+
var templateObject_1$1w;
|
|
5530
5536
|
|
|
5531
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5532
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5537
|
+
var FlexContainer = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5538
|
+
var ContainerBase = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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) {
|
|
5533
5539
|
var selected = _a.selected, theme = _a.theme;
|
|
5534
5540
|
return selected
|
|
5535
5541
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5543,11 +5549,11 @@ var ContainerBase = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __
|
|
|
5543
5549
|
var theme = _a.theme;
|
|
5544
5550
|
return theme.colors.pallete.primary.color;
|
|
5545
5551
|
});
|
|
5546
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5552
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
5547
5553
|
var onClick = _a.onClick;
|
|
5548
5554
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5549
5555
|
});
|
|
5550
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5556
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5551
5557
|
var SubscriptionHeader = newStyled.div(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5552
5558
|
var theme = _a.theme;
|
|
5553
5559
|
return theme.colors.shades[200].color;
|
|
@@ -5556,8 +5562,8 @@ var SubscriptionHeader = newStyled.div(templateObject_5$o || (templateObject_5$o
|
|
|
5556
5562
|
return theme.colors.pallete.primary.color;
|
|
5557
5563
|
});
|
|
5558
5564
|
var BenefitsContainer = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5559
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5560
|
-
var BenefitText = newStyled(Text$8)(templateObject_8$
|
|
5565
|
+
var Benefit = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
5566
|
+
var BenefitText = newStyled(Text$8)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5561
5567
|
var SubscriptionDetails = newStyled(Text$8)(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5562
5568
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
5563
5569
|
var DeliveryFrequencyLabel = newStyled(Text$8)(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
@@ -5565,8 +5571,8 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5565
5571
|
var selected = _a.selected, theme = _a.theme;
|
|
5566
5572
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5567
5573
|
});
|
|
5568
|
-
var Container$
|
|
5569
|
-
var templateObject_1$
|
|
5574
|
+
var Container$Z = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5575
|
+
var templateObject_1$1v, templateObject_2$Z, templateObject_3$O, templateObject_4$C, templateObject_5$o, templateObject_6$m, templateObject_7$f, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5570
5576
|
|
|
5571
5577
|
var radioIds = {
|
|
5572
5578
|
oneTime: {
|
|
@@ -5616,38 +5622,38 @@ var Autoship = function (_a) {
|
|
|
5616
5622
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5617
5623
|
};
|
|
5618
5624
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5619
|
-
return (jsxRuntime.jsxs(Container$
|
|
5625
|
+
return (jsxRuntime.jsxs(Container$Z, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5620
5626
|
? benefitsColor.selected
|
|
5621
|
-
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5627
|
+
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5622
5628
|
};
|
|
5623
5629
|
|
|
5624
|
-
var Img = newStyled.img(templateObject_1$
|
|
5630
|
+
var Img = newStyled.img(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
5625
5631
|
var Image$3 = function (_a) {
|
|
5626
5632
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
|
|
5627
5633
|
return (jsxRuntime.jsx(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
5628
5634
|
};
|
|
5629
|
-
var templateObject_1$
|
|
5635
|
+
var templateObject_1$1u;
|
|
5630
5636
|
|
|
5631
|
-
var _a$
|
|
5637
|
+
var _a$2;
|
|
5632
5638
|
exports.BeforeAfterVariant = void 0;
|
|
5633
5639
|
(function (BeforeAfterVariant) {
|
|
5634
5640
|
BeforeAfterVariant["UserInfoText"] = "UserInfoText";
|
|
5635
5641
|
BeforeAfterVariant["ResultFeedback"] = "ResultFeedback";
|
|
5636
5642
|
})(exports.BeforeAfterVariant || (exports.BeforeAfterVariant = {}));
|
|
5637
|
-
var componentSizeMapper = (_a$
|
|
5638
|
-
_a$
|
|
5639
|
-
_a$
|
|
5640
|
-
_a$
|
|
5641
|
-
_a$
|
|
5642
|
-
_a$
|
|
5643
|
-
|
|
5644
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5645
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5646
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5647
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
5643
|
+
var componentSizeMapper = (_a$2 = {},
|
|
5644
|
+
_a$2[exports.ComponentSize.XSmall] = exports.ComponentSize.Small,
|
|
5645
|
+
_a$2[exports.ComponentSize.Small] = exports.ComponentSize.Small,
|
|
5646
|
+
_a$2[exports.ComponentSize.Medium] = exports.ComponentSize.Medium,
|
|
5647
|
+
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5648
|
+
_a$2);
|
|
5649
|
+
|
|
5650
|
+
var CustomerDetails = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject([""], [""])));
|
|
5651
|
+
var CustomerInfo = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
5652
|
+
var Name = newStyled.h4(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
5653
|
+
var StarIconContainer = newStyled.div(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
5648
5654
|
var Description$2 = newStyled.p(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
5649
5655
|
var ReviewDays = newStyled.span(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
5650
|
-
var templateObject_1$
|
|
5656
|
+
var templateObject_1$1t, templateObject_2$Y, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5651
5657
|
|
|
5652
5658
|
var NameWithStars = function (_a) {
|
|
5653
5659
|
var name = _a.name, size = _a.size;
|
|
@@ -5665,10 +5671,10 @@ var ResultFeedback = function (_a) {
|
|
|
5665
5671
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5666
5672
|
};
|
|
5667
5673
|
|
|
5668
|
-
var Container$
|
|
5669
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5670
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5671
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
5674
|
+
var Container$Y = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
5675
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
5676
|
+
var ImageCard = newStyled.div(templateObject_3$M || (templateObject_3$M = __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; });
|
|
5677
|
+
var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __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) {
|
|
5672
5678
|
var theme = _a.theme;
|
|
5673
5679
|
return theme.colors.pallete.secondary.color;
|
|
5674
5680
|
}, function (_a) {
|
|
@@ -5678,10 +5684,10 @@ var UserInfoText = newStyled.div(templateObject_4$z || (templateObject_4$z = __m
|
|
|
5678
5684
|
var theme = _a.theme, size = _a.size;
|
|
5679
5685
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5680
5686
|
});
|
|
5681
|
-
var templateObject_1$
|
|
5687
|
+
var templateObject_1$1s, templateObject_2$X, templateObject_3$M, templateObject_4$A;
|
|
5682
5688
|
|
|
5683
5689
|
/* base styles & size variants */
|
|
5684
|
-
var getStylesBySize$
|
|
5690
|
+
var getStylesBySize$a = function (size, theme) {
|
|
5685
5691
|
switch (size) {
|
|
5686
5692
|
case exports.ComponentSize.Large:
|
|
5687
5693
|
return {
|
|
@@ -5738,11 +5744,11 @@ var getStylesBySize$b = function (size, theme) {
|
|
|
5738
5744
|
}
|
|
5739
5745
|
};
|
|
5740
5746
|
|
|
5741
|
-
var _a;
|
|
5742
|
-
var componentByVariant = (_a = {},
|
|
5743
|
-
_a[exports.BeforeAfterVariant.UserInfoText] = function (props) { return (jsxRuntime.jsx(UserInfoText, __assign$1({ "data-testid": "UserInfoText" }, props, { children: props.text }), void 0)); },
|
|
5744
|
-
_a[exports.BeforeAfterVariant.ResultFeedback] = ResultFeedback,
|
|
5745
|
-
_a);
|
|
5747
|
+
var _a$1;
|
|
5748
|
+
var componentByVariant = (_a$1 = {},
|
|
5749
|
+
_a$1[exports.BeforeAfterVariant.UserInfoText] = function (props) { return (jsxRuntime.jsx(UserInfoText, __assign$1({ "data-testid": "UserInfoText" }, props, { children: props.text }), void 0)); },
|
|
5750
|
+
_a$1[exports.BeforeAfterVariant.ResultFeedback] = ResultFeedback,
|
|
5751
|
+
_a$1);
|
|
5746
5752
|
var buildInfoText = function (name, age, months) {
|
|
5747
5753
|
var infoText = age ? "".concat(name, ", ").concat(age) : name;
|
|
5748
5754
|
return months ? "".concat(infoText, " | ").concat(months, " months") : infoText;
|
|
@@ -5750,13 +5756,13 @@ var buildInfoText = function (name, age, months) {
|
|
|
5750
5756
|
var BeforeAfterCard = function (_a) {
|
|
5751
5757
|
var name = _a.name, age = _a.age, months = _a.months, beforeImage = _a.beforeImage, afterImage = _a.afterImage, _b = _a.alignCenter, alignCenter = _b === void 0 ? true : _b, _c = _a.imageBorderRadius, imageBorderRadius = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Small : _d, _e = _a.variant, variant = _e === void 0 ? exports.BeforeAfterVariant.UserInfoText : _e, rest = __rest(_a, ["name", "age", "months", "beforeImage", "afterImage", "alignCenter", "imageBorderRadius", "size", "variant"]);
|
|
5752
5758
|
var theme = useTheme();
|
|
5753
|
-
var stylesBySize = getStylesBySize$
|
|
5759
|
+
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5754
5760
|
var infoText = buildInfoText(name, age, months);
|
|
5755
5761
|
var Component = componentByVariant[variant];
|
|
5756
|
-
return (jsxRuntime.jsxs(Container$
|
|
5762
|
+
return (jsxRuntime.jsxs(Container$Y, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5757
5763
|
};
|
|
5758
5764
|
|
|
5759
|
-
var Section = newStyled.div(templateObject_1$
|
|
5765
|
+
var Section = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
5760
5766
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5761
5767
|
});
|
|
5762
5768
|
var CardHeader = function (_a) {
|
|
@@ -5767,16 +5773,16 @@ var CardFooter = function (_a) {
|
|
|
5767
5773
|
var children = _a.children;
|
|
5768
5774
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
5769
5775
|
};
|
|
5770
|
-
var templateObject_1$
|
|
5776
|
+
var templateObject_1$1r;
|
|
5771
5777
|
|
|
5772
|
-
var Body = newStyled.div(templateObject_1$
|
|
5778
|
+
var Body = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
5773
5779
|
var CardBody = function (_a) {
|
|
5774
5780
|
var children = _a.children;
|
|
5775
5781
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
5776
5782
|
};
|
|
5777
|
-
var templateObject_1$
|
|
5783
|
+
var templateObject_1$1q;
|
|
5778
5784
|
|
|
5779
|
-
var Container$
|
|
5785
|
+
var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
5780
5786
|
var flex = _a.flex;
|
|
5781
5787
|
return flex &&
|
|
5782
5788
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5791,45 +5797,51 @@ var Container$Y = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __
|
|
|
5791
5797
|
var Card$1 = function (_a) {
|
|
5792
5798
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
5793
5799
|
var theme = useTheme();
|
|
5794
|
-
return (jsxRuntime.jsx(Container$
|
|
5800
|
+
return (jsxRuntime.jsx(Container$X, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
5795
5801
|
};
|
|
5796
5802
|
var Card$2 = Object.assign(Card$1, {
|
|
5797
5803
|
Header: CardHeader,
|
|
5798
5804
|
Footer: CardFooter,
|
|
5799
5805
|
Body: CardBody,
|
|
5800
5806
|
});
|
|
5801
|
-
var templateObject_1$
|
|
5807
|
+
var templateObject_1$1p;
|
|
5808
|
+
|
|
5809
|
+
var StyledWrapper = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
5810
|
+
var StyledContainer = newStyled.div(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
5811
|
+
var TextLabel = newStyled(Text$8)(templateObject_3$L || (templateObject_3$L = __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) {
|
|
5812
|
+
var color = _a.color;
|
|
5813
|
+
return color;
|
|
5814
|
+
});
|
|
5815
|
+
var YouAreSaving = newStyled(Text$8)(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
5816
|
+
var templateObject_1$1o, templateObject_2$W, templateObject_3$L, templateObject_4$z;
|
|
5802
5817
|
|
|
5803
|
-
var Wrapper$6 = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
5804
|
-
var Container$X = newStyled.div(templateObject_2$V || (templateObject_2$V = __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"])));
|
|
5805
5818
|
var Minimalistic = function (_a) {
|
|
5806
5819
|
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;
|
|
5807
5820
|
var theme = useTheme();
|
|
5808
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(
|
|
5809
|
-
};
|
|
5810
|
-
var templateObject_1$1n, templateObject_2$V;
|
|
5821
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5822
|
+
};
|
|
5811
5823
|
|
|
5812
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
5813
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5824
|
+
var Container$W = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5825
|
+
var Title$6 = newStyled.h1(templateObject_2$V || (templateObject_2$V = __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; });
|
|
5814
5826
|
var Details$1 = newStyled.span(templateObject_3$K || (templateObject_3$K = __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; });
|
|
5815
5827
|
var PriceContainer$1 = newStyled.span(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
5816
5828
|
var Simple = function (_a) {
|
|
5817
5829
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
5818
5830
|
var theme = useTheme();
|
|
5819
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$W, { children: [jsxRuntime.jsx(Title$6, __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$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "
|
|
5831
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$W, { children: [jsxRuntime.jsx(Title$6, __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$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5820
5832
|
};
|
|
5821
|
-
var templateObject_1$
|
|
5833
|
+
var templateObject_1$1n, templateObject_2$V, templateObject_3$K, templateObject_4$y;
|
|
5822
5834
|
|
|
5823
5835
|
var Bundle = {
|
|
5824
5836
|
Minimalistic: Minimalistic,
|
|
5825
5837
|
Simple: Simple,
|
|
5826
5838
|
};
|
|
5827
5839
|
|
|
5828
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
5840
|
+
var Container$V = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
5829
5841
|
var displayBNPL = _a.displayBNPL;
|
|
5830
5842
|
return (displayBNPL ? 'flex' : 'none');
|
|
5831
5843
|
});
|
|
5832
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5844
|
+
var TextContainer$1 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
5833
5845
|
var IconWrapper$1 = newStyled.div(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
5834
5846
|
var BuyNowPayLater = function (_a) {
|
|
5835
5847
|
var _b;
|
|
@@ -5842,41 +5854,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
5842
5854
|
}
|
|
5843
5855
|
return (jsxRuntime.jsx(Container$V, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5844
5856
|
};
|
|
5845
|
-
var templateObject_1$
|
|
5857
|
+
var templateObject_1$1m, templateObject_2$U, templateObject_3$J;
|
|
5846
5858
|
|
|
5847
|
-
var Text$7 = newStyled.span(templateObject_1$
|
|
5859
|
+
var Text$7 = newStyled.span(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5848
5860
|
var Title$5 = function (_a) {
|
|
5849
5861
|
var title = _a.title;
|
|
5850
5862
|
var theme = useTheme();
|
|
5851
5863
|
return jsxRuntime.jsx(Text$7, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5852
5864
|
};
|
|
5853
|
-
var templateObject_1$
|
|
5865
|
+
var templateObject_1$1l;
|
|
5854
5866
|
|
|
5855
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5867
|
+
var P$3 = newStyled.p(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5856
5868
|
var Promo = function (_a) {
|
|
5857
5869
|
var text = _a.text;
|
|
5858
5870
|
var theme = useTheme();
|
|
5859
5871
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5860
5872
|
};
|
|
5861
|
-
var templateObject_1$
|
|
5873
|
+
var templateObject_1$1k;
|
|
5862
5874
|
|
|
5863
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5875
|
+
var Text$6 = newStyled.span(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5864
5876
|
var Description$1 = function (_a) {
|
|
5865
5877
|
var text = _a.text;
|
|
5866
5878
|
var theme = useTheme();
|
|
5867
5879
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5868
5880
|
};
|
|
5869
|
-
var templateObject_1$
|
|
5881
|
+
var templateObject_1$1j;
|
|
5870
5882
|
|
|
5871
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
5883
|
+
var Container$U = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
5872
5884
|
var CloseButton$1 = function (_a) {
|
|
5873
5885
|
var onClick = _a.onClick, size = _a.size;
|
|
5874
5886
|
var theme = useTheme();
|
|
5875
5887
|
return (jsxRuntime.jsx(Container$U, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
5876
5888
|
};
|
|
5877
|
-
var templateObject_1$
|
|
5889
|
+
var templateObject_1$1i;
|
|
5878
5890
|
|
|
5879
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
5891
|
+
var Text$5 = newStyled.h3(templateObject_1$1h || (templateObject_1$1h = __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) {
|
|
5880
5892
|
var backgroundColor = _a.backgroundColor;
|
|
5881
5893
|
return backgroundColor;
|
|
5882
5894
|
}, function (_a) {
|
|
@@ -5891,7 +5903,7 @@ var OfferBanner = function (_a) {
|
|
|
5891
5903
|
var theme = useTheme();
|
|
5892
5904
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
5893
5905
|
};
|
|
5894
|
-
var templateObject_1$
|
|
5906
|
+
var templateObject_1$1h;
|
|
5895
5907
|
|
|
5896
5908
|
var CartProductItem = {
|
|
5897
5909
|
Title: Title$5,
|
|
@@ -5901,7 +5913,7 @@ var CartProductItem = {
|
|
|
5901
5913
|
CloseButton: CloseButton$1,
|
|
5902
5914
|
};
|
|
5903
5915
|
|
|
5904
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
5916
|
+
var Container$T = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
5905
5917
|
var height = _a.height;
|
|
5906
5918
|
return (height ? height : '1.5em');
|
|
5907
5919
|
}, function (_a) {
|
|
@@ -5928,22 +5940,22 @@ var SkeletonBox = function (_a) {
|
|
|
5928
5940
|
var theme = useTheme();
|
|
5929
5941
|
return jsxRuntime.jsx(Container$T, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
5930
5942
|
};
|
|
5931
|
-
var templateObject_1$
|
|
5943
|
+
var templateObject_1$1g;
|
|
5932
5944
|
|
|
5933
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
5934
|
-
var MobileContainer = newStyled(Container$S)(templateObject_2$
|
|
5945
|
+
var Container$S = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
5946
|
+
var MobileContainer = newStyled(Container$S)(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
5935
5947
|
var DollarPart = newStyled.span(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
5936
5948
|
var ClubMembersText = newStyled.span(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
5937
5949
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
5938
5950
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
5939
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
5940
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
5951
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
5952
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
5941
5953
|
var ClubPriceLabel = function (_a) {
|
|
5942
5954
|
var clubPrice = _a.clubPrice;
|
|
5943
5955
|
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
5944
5956
|
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$S, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
5945
5957
|
};
|
|
5946
|
-
var templateObject_1$
|
|
5958
|
+
var templateObject_1$1f, templateObject_2$T, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$k, templateObject_7$e, templateObject_8$a;
|
|
5947
5959
|
|
|
5948
5960
|
var Spacing = function (_a) {
|
|
5949
5961
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -5951,8 +5963,8 @@ var Spacing = function (_a) {
|
|
|
5951
5963
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
5952
5964
|
};
|
|
5953
5965
|
|
|
5954
|
-
var Container$R = newStyled('div')(templateObject_1$
|
|
5955
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
5966
|
+
var Container$R = newStyled('div')(templateObject_1$1e || (templateObject_1$1e = __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"])));
|
|
5967
|
+
var Content$2 = newStyled('div')(templateObject_2$S || (templateObject_2$S = __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"])));
|
|
5956
5968
|
var BarContainer$1 = newStyled('div')(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
5957
5969
|
var Bar$2 = newStyled('div')(templateObject_4$w || (templateObject_4$w = __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) {
|
|
5958
5970
|
var index = _a.index;
|
|
@@ -5965,12 +5977,12 @@ var StrengthBars = function (_a) {
|
|
|
5965
5977
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
5966
5978
|
return (jsxRuntime.jsxs(Container$R, __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));
|
|
5967
5979
|
};
|
|
5968
|
-
var templateObject_1$
|
|
5980
|
+
var templateObject_1$1e, templateObject_2$S, templateObject_3$H, templateObject_4$w;
|
|
5969
5981
|
|
|
5970
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
5971
|
-
var templateObject_1$
|
|
5982
|
+
var Container$Q = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5983
|
+
var templateObject_1$1d;
|
|
5972
5984
|
|
|
5973
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
5985
|
+
var StarContainer = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
5974
5986
|
var marginRight = _a.marginRight;
|
|
5975
5987
|
return marginRight;
|
|
5976
5988
|
});
|
|
@@ -5986,7 +5998,7 @@ var StarList = function (_a) {
|
|
|
5986
5998
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
5987
5999
|
}) }, void 0));
|
|
5988
6000
|
};
|
|
5989
|
-
var templateObject_1$
|
|
6001
|
+
var templateObject_1$1c;
|
|
5990
6002
|
|
|
5991
6003
|
/* base styles & size variants */
|
|
5992
6004
|
var LabelStyles = {
|
|
@@ -6027,8 +6039,8 @@ var LabelStyles = {
|
|
|
6027
6039
|
});
|
|
6028
6040
|
},
|
|
6029
6041
|
};
|
|
6030
|
-
var Container$P = newStyled.a(templateObject_1$
|
|
6031
|
-
var templateObject_1$
|
|
6042
|
+
var Container$P = newStyled.a(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6043
|
+
var templateObject_1$1b;
|
|
6032
6044
|
|
|
6033
6045
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6034
6046
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6079,11 +6091,11 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6079
6091
|
height: height,
|
|
6080
6092
|
});
|
|
6081
6093
|
});
|
|
6082
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6083
|
-
var Container$O = newStyled.a(templateObject_2$
|
|
6094
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
6095
|
+
var Container$O = newStyled.a(templateObject_2$R || (templateObject_2$R = __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"])));
|
|
6084
6096
|
var ProdCardContainer$1 = newStyled.div(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
6085
6097
|
var Title$4 = newStyled.p(templateObject_4$v || (templateObject_4$v = __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; });
|
|
6086
|
-
var getStylesBySize$
|
|
6098
|
+
var getStylesBySize$9 = function (size) {
|
|
6087
6099
|
switch (size) {
|
|
6088
6100
|
case exports.ComponentSize.Medium:
|
|
6089
6101
|
return {
|
|
@@ -6116,7 +6128,7 @@ var BottomTagContainer$4 = newStyled.div(templateObject_6$j || (templateObject_6
|
|
|
6116
6128
|
var style = _a.style;
|
|
6117
6129
|
return style.width;
|
|
6118
6130
|
});
|
|
6119
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6131
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6120
6132
|
var ProductItemMobile = function (_a) {
|
|
6121
6133
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
6122
6134
|
display: false,
|
|
@@ -6136,7 +6148,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6136
6148
|
description: '',
|
|
6137
6149
|
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading;
|
|
6138
6150
|
var theme = useTheme();
|
|
6139
|
-
var styles = getStylesBySize$
|
|
6151
|
+
var styles = getStylesBySize$9(size);
|
|
6140
6152
|
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
6141
6153
|
var space = React$2.useMemo(function () {
|
|
6142
6154
|
var _a;
|
|
@@ -6168,7 +6180,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6168
6180
|
};
|
|
6169
6181
|
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$O, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$O, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$4, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && 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: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { 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), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6170
6182
|
};
|
|
6171
|
-
var templateObject_1$
|
|
6183
|
+
var templateObject_1$1a, templateObject_2$R, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6172
6184
|
|
|
6173
6185
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6174
6186
|
var width = _a.width, height = _a.height;
|
|
@@ -6178,11 +6190,11 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6178
6190
|
height: height,
|
|
6179
6191
|
});
|
|
6180
6192
|
});
|
|
6181
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6182
|
-
var Container$N = newStyled.a(templateObject_2$
|
|
6193
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$19 || (templateObject_1$19 = __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; });
|
|
6194
|
+
var Container$N = newStyled.a(templateObject_2$Q || (templateObject_2$Q = __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"])));
|
|
6183
6195
|
var ProdCardContainer = newStyled.div(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
6184
6196
|
var Title$3 = newStyled.p(templateObject_4$u || (templateObject_4$u = __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; });
|
|
6185
|
-
var getStylesBySize$
|
|
6197
|
+
var getStylesBySize$8 = function (size) {
|
|
6186
6198
|
switch (size) {
|
|
6187
6199
|
case exports.ComponentSize.Medium:
|
|
6188
6200
|
return {
|
|
@@ -6215,7 +6227,7 @@ var BottomTagContainer$3 = newStyled.div(templateObject_6$i || (templateObject_6
|
|
|
6215
6227
|
var style = _a.style;
|
|
6216
6228
|
return style.width;
|
|
6217
6229
|
});
|
|
6218
|
-
var MarginTopContainer = newStyled.div(templateObject_7$
|
|
6230
|
+
var MarginTopContainer = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6219
6231
|
var ProductItemTK = function (_a) {
|
|
6220
6232
|
var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
|
|
6221
6233
|
display: false,
|
|
@@ -6235,7 +6247,7 @@ var ProductItemTK = function (_a) {
|
|
|
6235
6247
|
description: '',
|
|
6236
6248
|
} : _h, _j = _a.clubPrice, clubPrice = _j === void 0 ? '' : _j, _k = _a.showClubPriceLabel, showClubPriceLabel = _k === void 0 ? false : _k;
|
|
6237
6249
|
var theme = useTheme();
|
|
6238
|
-
var styles = getStylesBySize$
|
|
6250
|
+
var styles = getStylesBySize$8(size);
|
|
6239
6251
|
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
6240
6252
|
var space = React$2.useMemo(function () {
|
|
6241
6253
|
var _a;
|
|
@@ -6266,9 +6278,9 @@ var ProductItemTK = function (_a) {
|
|
|
6266
6278
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6267
6279
|
} }, { children: title }), void 0)) : (jsx(Title$3, __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));
|
|
6268
6280
|
};
|
|
6269
|
-
var templateObject_1$
|
|
6281
|
+
var templateObject_1$19, templateObject_2$Q, templateObject_3$F, templateObject_4$u, templateObject_5$k, templateObject_6$i, templateObject_7$c;
|
|
6270
6282
|
|
|
6271
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
6283
|
+
var Container$M = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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"])));
|
|
6272
6284
|
function withProductGrid(ProductItemComponent, data) {
|
|
6273
6285
|
function WithProductGrid(props) {
|
|
6274
6286
|
return (jsxRuntime.jsx(Container$M, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6278,7 +6290,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6278
6290
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6279
6291
|
return WithProductGrid;
|
|
6280
6292
|
}
|
|
6281
|
-
var templateObject_1$
|
|
6293
|
+
var templateObject_1$18;
|
|
6282
6294
|
|
|
6283
6295
|
var Collection = {
|
|
6284
6296
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6325,8 +6337,8 @@ var OutOfStock = function (_a) {
|
|
|
6325
6337
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6326
6338
|
};
|
|
6327
6339
|
|
|
6328
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6329
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6340
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6341
|
+
newStyled(lt.Label)(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6330
6342
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
6331
6343
|
var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6332
6344
|
var OptionsContainer = newStyled.div(templateObject_5$j || (templateObject_5$j = __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"])));
|
|
@@ -6347,23 +6359,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6347
6359
|
Option: Option,
|
|
6348
6360
|
OptionsContainer: OptionsContainer,
|
|
6349
6361
|
});
|
|
6350
|
-
var templateObject_1$
|
|
6362
|
+
var templateObject_1$17, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$j;
|
|
6351
6363
|
|
|
6352
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
6364
|
+
var Container$L = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
6353
6365
|
var borderColor = _a.borderColor;
|
|
6354
6366
|
return borderColor;
|
|
6355
6367
|
}, function (_a) {
|
|
6356
6368
|
var noStock = _a.noStock;
|
|
6357
6369
|
return (noStock ? '0.4' : '1');
|
|
6358
6370
|
});
|
|
6359
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6371
|
+
var Image$2 = newStyled.img(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6360
6372
|
var PatternSelector = function (_a) {
|
|
6361
6373
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6362
6374
|
var theme = useTheme();
|
|
6363
6375
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6364
6376
|
return (jsxRuntime.jsx(Container$L, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6365
6377
|
};
|
|
6366
|
-
var templateObject_1$
|
|
6378
|
+
var templateObject_1$16, templateObject_2$O;
|
|
6367
6379
|
|
|
6368
6380
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6369
6381
|
if (options == null || options.length === 0) {
|
|
@@ -6421,8 +6433,8 @@ var SingleColorPicker = function (_a) {
|
|
|
6421
6433
|
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options) }), void 0)] }), void 0));
|
|
6422
6434
|
};
|
|
6423
6435
|
|
|
6424
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6425
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6436
|
+
var Wrapper$5 = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
6437
|
+
var Col$1 = newStyled.div(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6426
6438
|
var Row$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
6427
6439
|
return props.rightToLeft &&
|
|
6428
6440
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
@@ -6435,7 +6447,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
6435
6447
|
var theme = useTheme();
|
|
6436
6448
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$1, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6437
6449
|
};
|
|
6438
|
-
var templateObject_1$
|
|
6450
|
+
var templateObject_1$15, templateObject_2$N, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$h;
|
|
6439
6451
|
|
|
6440
6452
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6441
6453
|
__proto__: null,
|
|
@@ -6456,39 +6468,42 @@ var BaseButton = function (_a) {
|
|
|
6456
6468
|
}, id: id }, { children: [renderLeading, children, renderTrailing] }), void 0));
|
|
6457
6469
|
};
|
|
6458
6470
|
|
|
6459
|
-
var
|
|
6460
|
-
|
|
6461
|
-
|
|
6462
|
-
|
|
6463
|
-
|
|
6464
|
-
|
|
6465
|
-
|
|
6466
|
-
|
|
6467
|
-
|
|
6468
|
-
|
|
6469
|
-
|
|
6470
|
-
|
|
6471
|
-
|
|
6472
|
-
|
|
6473
|
-
|
|
6474
|
-
|
|
6475
|
-
|
|
6476
|
-
|
|
6477
|
-
|
|
6478
|
-
|
|
6479
|
-
|
|
6480
|
-
|
|
6481
|
-
|
|
6482
|
-
|
|
6471
|
+
var _a;
|
|
6472
|
+
var sizeMapper = (_a = {},
|
|
6473
|
+
_a[exports.ComponentSize.Small] = 'small',
|
|
6474
|
+
_a[exports.ComponentSize.Medium] = 'medium',
|
|
6475
|
+
_a[exports.ComponentSize.Large] = 'large',
|
|
6476
|
+
_a[exports.ComponentSize.XSmall] = 'small',
|
|
6477
|
+
_a);
|
|
6478
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
6479
|
+
var wide = _a.wide;
|
|
6480
|
+
return (wide ? '100%' : 'fit-content');
|
|
6481
|
+
}, function (_a) {
|
|
6482
|
+
var theme = _a.theme, size = _a.size;
|
|
6483
|
+
return theme.component.button.size[sizeMapper[size]].fontSize;
|
|
6484
|
+
}, function (_a) {
|
|
6485
|
+
var theme = _a.theme, size = _a.size;
|
|
6486
|
+
return theme.component.button.size[sizeMapper[size]].padding;
|
|
6487
|
+
}, function (_a) {
|
|
6488
|
+
var theme = _a.theme;
|
|
6489
|
+
return theme.component.button.fontWeight;
|
|
6490
|
+
}, function (_a) {
|
|
6491
|
+
var theme = _a.theme;
|
|
6492
|
+
return theme.component.button.borderRadius;
|
|
6493
|
+
}, function (_a) {
|
|
6494
|
+
var theme = _a.theme;
|
|
6495
|
+
return theme.colors.background.disabled;
|
|
6496
|
+
}, function (_a) {
|
|
6497
|
+
var theme = _a.theme;
|
|
6498
|
+
return theme.colors.text.disabled;
|
|
6499
|
+
});
|
|
6500
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6501
|
+
var templateObject_1$14, templateObject_2$M;
|
|
6502
|
+
|
|
6483
6503
|
var BaseCTA = function (_a) {
|
|
6484
|
-
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, props = __rest(_a, ["text", "wide", "size"]);
|
|
6504
|
+
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
6485
6505
|
var theme = useTheme();
|
|
6486
|
-
|
|
6487
|
-
return (jsx(BaseButton, __assign$1({}, props, { css: __assign$1(__assign$1({ width: wide ? '100%' : 'fit-content' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "".concat(theme.component.button.borderRadius), cursor: 'pointer', '&:disabled': {
|
|
6488
|
-
backgroundColor: theme.colors.background.disabled,
|
|
6489
|
-
color: theme.colors.text.disabled,
|
|
6490
|
-
cursor: 'not-allowed',
|
|
6491
|
-
} }) }, { children: text }), void 0));
|
|
6506
|
+
return (jsxRuntime.jsxs(StyledBaseButton, __assign$1({}, props, { wide: wide, size: size }, { children: [iconName && (jsxRuntime.jsx(StyledIcon, { fill: theme.colors.shades.white.color, name: iconName, width: "24px", height: "24px" }, void 0)), text] }), void 0));
|
|
6492
6507
|
};
|
|
6493
6508
|
|
|
6494
6509
|
var ButtonPrimary = function (_a) {
|
|
@@ -6587,7 +6602,7 @@ var SectionTitle = newStyled.h1(templateObject_6$g || (templateObject_6$g = __ma
|
|
|
6587
6602
|
var theme = _a.theme;
|
|
6588
6603
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
6589
6604
|
});
|
|
6590
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
6605
|
+
var SectionDetails = newStyled.p(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
6591
6606
|
var theme = _a.theme;
|
|
6592
6607
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
6593
6608
|
}, function (_a) {
|
|
@@ -6598,24 +6613,33 @@ var SectionDetails = newStyled.p(templateObject_7$a || (templateObject_7$a = __m
|
|
|
6598
6613
|
})
|
|
6599
6614
|
: '';
|
|
6600
6615
|
});
|
|
6601
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
6616
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
6602
6617
|
var DeliveryDetails = function (_a) {
|
|
6603
6618
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6604
6619
|
var theme = useTheme();
|
|
6605
6620
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6606
6621
|
};
|
|
6607
|
-
var templateObject_1$12, templateObject_2$K, templateObject_3$B, templateObject_4$q, templateObject_5$h, templateObject_6$g, templateObject_7$
|
|
6622
|
+
var templateObject_1$12, templateObject_2$K, templateObject_3$B, templateObject_4$q, templateObject_5$h, templateObject_6$g, templateObject_7$b, templateObject_8$9;
|
|
6608
6623
|
|
|
6609
|
-
var Backdrop = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top:
|
|
6624
|
+
var Backdrop = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
6625
|
+
var top = _a.top;
|
|
6626
|
+
return top;
|
|
6627
|
+
}, function (_a) {
|
|
6610
6628
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6611
6629
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6612
6630
|
});
|
|
6613
|
-
var Sidebar = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n height:
|
|
6631
|
+
var Sidebar = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
6632
|
+
var height = _a.height;
|
|
6633
|
+
return height;
|
|
6634
|
+
}, function (_a) {
|
|
6614
6635
|
var width = _a.width;
|
|
6615
6636
|
return width;
|
|
6616
6637
|
}, function (_a) {
|
|
6617
6638
|
var position = _a.position;
|
|
6618
6639
|
return position;
|
|
6640
|
+
}, function (_a) {
|
|
6641
|
+
var top = _a.top;
|
|
6642
|
+
return top;
|
|
6619
6643
|
}, function (_a) {
|
|
6620
6644
|
var backgroundColor = _a.backgroundColor;
|
|
6621
6645
|
return backgroundColor;
|
|
@@ -6626,9 +6650,9 @@ var Sidebar = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTe
|
|
|
6626
6650
|
: "transform: translateX(".concat(position === 'left' ? '-100%' : '100%', ");");
|
|
6627
6651
|
});
|
|
6628
6652
|
var Drawer = function (_a) {
|
|
6629
|
-
var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, onOpen = _a.onOpen, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.backdropColor, backdropColor = _c === void 0 ? 'rgba(0, 0, 0, 0.5)' : _c, _d = _a.position, position = _d === void 0 ? 'left' : _d, _e = _a.width, width = _e === void 0 ? '33%' : _e, onClickOutside = _a.onClickOutside;
|
|
6630
|
-
var
|
|
6631
|
-
var
|
|
6653
|
+
var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, onOpen = _a.onOpen, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.backdropColor, backdropColor = _c === void 0 ? 'rgba(0, 0, 0, 0.5)' : _c, _d = _a.position, position = _d === void 0 ? 'left' : _d, _e = _a.width, width = _e === void 0 ? '33%' : _e, _f = _a.height, height = _f === void 0 ? '100%' : _f, _g = _a.top, top = _g === void 0 ? '0' : _g, onClickOutside = _a.onClickOutside;
|
|
6654
|
+
var _h = React$2.useState(isOpen), isOpenState = _h[0], setIsOpen = _h[1];
|
|
6655
|
+
var _j = React$2.useState(isOpen), isMounted = _j[0], setIsMounted = _j[1];
|
|
6632
6656
|
React$2.useEffect(function () {
|
|
6633
6657
|
if (isOpen === false) {
|
|
6634
6658
|
setIsOpen(isOpen);
|
|
@@ -6649,7 +6673,7 @@ var Drawer = function (_a) {
|
|
|
6649
6673
|
clearTimeout(timeout);
|
|
6650
6674
|
};
|
|
6651
6675
|
}, [isOpen, onClose, onOpen]);
|
|
6652
|
-
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
6676
|
+
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
6653
6677
|
};
|
|
6654
6678
|
var templateObject_1$11, templateObject_2$J;
|
|
6655
6679
|
|
|
@@ -6764,11 +6788,11 @@ var MobileHeader = newStyled.div(templateObject_3$w || (templateObject_3$w = __m
|
|
|
6764
6788
|
var MobileIconsContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
6765
6789
|
var H4 = newStyled.h4(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6766
6790
|
var FilterLink = newStyled.a(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6767
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
6768
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
6791
|
+
var OptionContainer = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
6792
|
+
var ClearAll = newStyled.span(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
6769
6793
|
var MobileFooter = newStyled.div(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6770
6794
|
var MobileClearContainer = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
6771
|
-
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$l, templateObject_5$e, templateObject_6$d, templateObject_7$
|
|
6795
|
+
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$l, templateObject_5$e, templateObject_6$d, templateObject_7$a, templateObject_8$8, templateObject_9$4, templateObject_10$3;
|
|
6772
6796
|
|
|
6773
6797
|
var getStylesBySize$7 = function (size, theme) {
|
|
6774
6798
|
switch (size) {
|
|
@@ -6846,7 +6870,7 @@ var Tags = function (_a) {
|
|
|
6846
6870
|
var templateObject_1$X, templateObject_2$D, templateObject_3$v;
|
|
6847
6871
|
|
|
6848
6872
|
var Filters = function (_a) {
|
|
6849
|
-
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
6873
|
+
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
6850
6874
|
var getInitialCheckedItems = function () {
|
|
6851
6875
|
var checkedItems = [];
|
|
6852
6876
|
values.forEach(function (filter, sectionIndex) {
|
|
@@ -6854,6 +6878,7 @@ var Filters = function (_a) {
|
|
|
6854
6878
|
if (item.checked && !item.blockUncheck) {
|
|
6855
6879
|
checkedItems.push({
|
|
6856
6880
|
sectionIndex: sectionIndex,
|
|
6881
|
+
sectionTitle: item.label,
|
|
6857
6882
|
itemIndex: itemIndex,
|
|
6858
6883
|
label: item.label,
|
|
6859
6884
|
});
|
|
@@ -6863,9 +6888,9 @@ var Filters = function (_a) {
|
|
|
6863
6888
|
return checkedItems;
|
|
6864
6889
|
};
|
|
6865
6890
|
var theme = useTheme();
|
|
6866
|
-
var
|
|
6867
|
-
var
|
|
6868
|
-
var
|
|
6891
|
+
var _d = React$2.useState(values), filters = _d[0], setFilter = _d[1];
|
|
6892
|
+
var _e = React$2.useState(getInitialCheckedItems()), checkedItems = _e[0], setCheckedItems = _e[1];
|
|
6893
|
+
var _f = React$2.useState(), filterState = _f[0], setFilterSection = _f[1];
|
|
6869
6894
|
React$2.useEffect(function () {
|
|
6870
6895
|
if (filters.length && filterState) {
|
|
6871
6896
|
onChange(filters, filterState);
|
|
@@ -6894,7 +6919,12 @@ var Filters = function (_a) {
|
|
|
6894
6919
|
}
|
|
6895
6920
|
return checked
|
|
6896
6921
|
? __spreadArray(__spreadArray([], (currentFilter.isMultiselect ? prev : []), true), [
|
|
6897
|
-
{
|
|
6922
|
+
{
|
|
6923
|
+
sectionIndex: sectionIndex,
|
|
6924
|
+
itemIndex: itemIndex,
|
|
6925
|
+
label: filters[sectionIndex].items[itemIndex].label,
|
|
6926
|
+
sectionTitle: filters[sectionIndex].title,
|
|
6927
|
+
},
|
|
6898
6928
|
], false) : prev.filter(function (item) { return item.sectionIndex !== sectionIndex || item.itemIndex !== itemIndex; });
|
|
6899
6929
|
});
|
|
6900
6930
|
setFilter(function (prev) {
|
|
@@ -6925,25 +6955,38 @@ var Filters = function (_a) {
|
|
|
6925
6955
|
});
|
|
6926
6956
|
onResetValues();
|
|
6927
6957
|
};
|
|
6958
|
+
var getItemsSelectedNumberText = function (filter) {
|
|
6959
|
+
var itemsSelectedNumber = 0;
|
|
6960
|
+
var itemsSelectedNumberText = '';
|
|
6961
|
+
if (showSelectedNumberInSection) {
|
|
6962
|
+
itemsSelectedNumber = checkedItems.filter(function (x) { return x.sectionTitle == filter.title; }).length;
|
|
6963
|
+
itemsSelectedNumberText =
|
|
6964
|
+
itemsSelectedNumber > 0 && showSelectedNumberInSection ? "(".concat(itemsSelectedNumber, ")") : '';
|
|
6965
|
+
}
|
|
6966
|
+
return itemsSelectedNumberText;
|
|
6967
|
+
};
|
|
6928
6968
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile ? (jsxRuntime.jsx("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: !!checkedItems.length && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Header$1, { children: [jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsxRuntime.jsx(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsxRuntime.jsx(Tags, { color: tagsColor, items: checkedItems.map(function (item) {
|
|
6929
6969
|
return item.label === '$75 And Above' ? '+$75' : item.label;
|
|
6930
6970
|
}), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }, void 0)) }), void 0)) : (jsxRuntime.jsxs(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsxRuntime.jsx(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), !!checkedItems.length && (jsxRuntime.jsxs(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0))] }), void 0)), filters
|
|
6931
6971
|
.filter(function (filter) { return filter.isLinkOption; })
|
|
6932
|
-
.map(function (option, index) { return (jsxRuntime.jsx(OptionContainer, __assign$1({ showInMobile: option.showInMobile, "data-testid": "linkOption" }, { children: jsxRuntime.jsx(FilterLink, __assign$1({ color: option.color || theme.colors.shades['550'].color, href: option.link }, { children: option.title }), void 0) }), index)); }), filters
|
|
6972
|
+
.map(function (option, index) { return (jsxRuntime.jsx(OptionContainer, __assign$1({ showInMobile: option.showInMobile, showInTablet: option.showInTablet, "data-testid": "linkOption" }, { children: jsxRuntime.jsx(FilterLink, __assign$1({ color: option.color || theme.colors.shades['550'].color, href: option.link }, { children: option.title }), void 0) }), "option-container-".concat(index))); }), filters
|
|
6933
6973
|
.filter(function (filter) { return !filter.isLinkOption; })
|
|
6934
|
-
.map(function (filter) {
|
|
6935
|
-
|
|
6936
|
-
|
|
6937
|
-
|
|
6938
|
-
|
|
6939
|
-
|
|
6940
|
-
|
|
6941
|
-
|
|
6942
|
-
|
|
6943
|
-
|
|
6944
|
-
|
|
6945
|
-
|
|
6946
|
-
|
|
6974
|
+
.map(function (filter) {
|
|
6975
|
+
var itemsSelectedNumberText = getItemsSelectedNumberText(filter);
|
|
6976
|
+
return (jsxRuntime.jsx(Accordion, __assign$1({ title: "".concat(filter.title, " ").concat(itemsSelectedNumberText), isOpenByDefault: filter.isOpenByDefault, showInMobile: filter.showInMobile }, { children: jsxRuntime.jsxs(SectionContent, __assign$1({ cols: filter.columns }, { children: [filter.type === 'size' &&
|
|
6977
|
+
filter.items.map(function (item, itemIndex) {
|
|
6978
|
+
var calculatedSectionIndex = filters.findIndex(function (filt) { return filt.title === filter.title; });
|
|
6979
|
+
return (jsxRuntime.jsx(SelectorSecondary, { size: exports.ComponentSize.Medium, text: item.label, active: item.checked, disabled: item.blockUncheck, onClick: function () {
|
|
6980
|
+
return handleCheckboxClick({
|
|
6981
|
+
sectionIndex: calculatedSectionIndex,
|
|
6982
|
+
itemIndex: itemIndex,
|
|
6983
|
+
checked: !item.checked,
|
|
6984
|
+
});
|
|
6985
|
+
}, width: "50px", id: "filter[".concat(calculatedSectionIndex, ",").concat(itemIndex, "]") }, item.label));
|
|
6986
|
+
}), filter.type === 'color' &&
|
|
6987
|
+
filter.items.map(function (item, itemIndex) { return (jsxRuntime.jsx(FilterCheckboxColor, { onChange: handleCheckboxClick, text: item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: filters.findIndex(function (filt) { return filt.title === filter.title; }), blockUncheck: item.blockUncheck, color: item.value || '' }, "".concat(item.checked, "-").concat(item.label))); }), !filter.type &&
|
|
6988
|
+
filter.items.map(function (item, itemIndex) { return (jsxRuntime.jsx(FilterCheckbox, { onChange: handleCheckboxClick, text: item.label === '$75 And Above' ? '+$75' : item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: filters.findIndex(function (filt) { return filt.title === filter.title; }), blockUncheck: item.blockUncheck }, "".concat(item.checked, "-").concat(item.label))); })] }), void 0) }), filters.findIndex(function (filt) { return filt.title === filter.title; })));
|
|
6989
|
+
}), isMobile && (jsxRuntime.jsxs(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxRuntime.jsxs(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsxRuntime.jsx(MobileIconsContainer, { children: jsxRuntime.jsx(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsxRuntime.jsx(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsxRuntime.jsx(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
|
|
6947
6990
|
};
|
|
6948
6991
|
var FilterCheckbox = function (_a) {
|
|
6949
6992
|
var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked, blockUncheck = _a.blockUncheck;
|
|
@@ -11337,8 +11380,8 @@ var Container$G = newStyled.div(templateObject_3$u || (templateObject_3$u = __ma
|
|
|
11337
11380
|
var Button$4 = newStyled.button(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
11338
11381
|
var ArrowsContainer = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
11339
11382
|
var ArrowBaseStyles = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
11340
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11341
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11383
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
11384
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
11342
11385
|
var ImagePreviewList = function (_a) {
|
|
11343
11386
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows;
|
|
11344
11387
|
var handleScrollVerticalPrev = function () {
|
|
@@ -11355,7 +11398,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11355
11398
|
arrowPadding: 1.625,
|
|
11356
11399
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11357
11400
|
};
|
|
11358
|
-
var templateObject_1$S, templateObject_2$A, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$
|
|
11401
|
+
var templateObject_1$S, templateObject_2$A, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$7;
|
|
11359
11402
|
|
|
11360
11403
|
var propTypes = {exports: {}};
|
|
11361
11404
|
|
|
@@ -12958,7 +13001,7 @@ var BottomTagContainer$2 = newStyled.div(templateObject_3$t || (templateObject_3
|
|
|
12958
13001
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
12959
13002
|
var Video$1 = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"])));
|
|
12960
13003
|
var VideoTag$1 = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n gap: 8px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
12961
|
-
var Text$3 = newStyled.div(templateObject_7$
|
|
13004
|
+
var Text$3 = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
12962
13005
|
var ImageProductWithTags$1 = function (_a) {
|
|
12963
13006
|
var _b, _c;
|
|
12964
13007
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
@@ -12967,9 +13010,9 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
12967
13010
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
12968
13011
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Video$1, { children: jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxRuntime.jsxs(VideoTag$1, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsxRuntime.jsx(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
12969
13012
|
};
|
|
12970
|
-
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$
|
|
13013
|
+
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
12971
13014
|
|
|
12972
|
-
var Container$E = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height:
|
|
13015
|
+
var Container$E = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"])));
|
|
12973
13016
|
var ProductGallery = function (_a) {
|
|
12974
13017
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d;
|
|
12975
13018
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -13356,8 +13399,8 @@ var BottomTagContainer$1 = newStyled.div(templateObject_3$p || (templateObject_3
|
|
|
13356
13399
|
var VideoOverlay$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
13357
13400
|
var Video = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
13358
13401
|
var VideoTag = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
13359
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
13360
|
-
var NavButtonContainer = newStyled.div(templateObject_8$
|
|
13402
|
+
var Text$2 = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13403
|
+
var NavButtonContainer = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
13361
13404
|
var Button$2 = newStyled.button(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
13362
13405
|
var settings = {
|
|
13363
13406
|
dots: true,
|
|
@@ -13451,7 +13494,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13451
13494
|
};
|
|
13452
13495
|
}, [preventTouch, ref, touchStart]);
|
|
13453
13496
|
}
|
|
13454
|
-
var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$
|
|
13497
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$3;
|
|
13455
13498
|
|
|
13456
13499
|
var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13457
13500
|
var ProductGalleryMobile = function (_a) {
|
|
@@ -17851,8 +17894,8 @@ var Tag$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemp
|
|
|
17851
17894
|
var Label = newStyled.div(templateObject_4$f || (templateObject_4$f = __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"])));
|
|
17852
17895
|
var Check = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
17853
17896
|
var IconContainer$1 = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
17854
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
17855
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
17897
|
+
var IconPlaceholder = newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
17898
|
+
var DiscountContainer = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
17856
17899
|
var PackSelector = function (_a) {
|
|
17857
17900
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17858
17901
|
return (jsxRuntime.jsx(Container$p, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -17882,7 +17925,7 @@ var PackCard = function (_a) {
|
|
|
17882
17925
|
currency: currencyCode || 'USD',
|
|
17883
17926
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17884
17927
|
};
|
|
17885
|
-
var templateObject_1$w, templateObject_2$n, templateObject_3$l, templateObject_4$f, templateObject_5$8, templateObject_6$7, templateObject_7$
|
|
17928
|
+
var templateObject_1$w, templateObject_2$n, templateObject_3$l, templateObject_4$f, templateObject_5$8, templateObject_6$7, templateObject_7$6, templateObject_8$5;
|
|
17886
17929
|
|
|
17887
17930
|
var Container$o = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
17888
17931
|
var IconContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
@@ -18343,8 +18386,8 @@ var StarsContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __m
|
|
|
18343
18386
|
var ReviewContainer$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
18344
18387
|
var DateText$1 = newStyled.span(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
18345
18388
|
var ReviewerName$1 = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
18346
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
18347
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
18389
|
+
var VerifiedText = newStyled.h1(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
18390
|
+
var ReviewTitle$1 = newStyled.h2(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
18348
18391
|
var ReviewDescription = newStyled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
18349
18392
|
var ImageContainer = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
18350
18393
|
var ImageWrapper$2 = newStyled(Image$3)(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
@@ -18378,7 +18421,7 @@ var Review$1 = function (_a) {
|
|
|
18378
18421
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$h, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18379
18422
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18380
18423
|
};
|
|
18381
|
-
var templateObject_1$o, templateObject_2$h, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$
|
|
18424
|
+
var templateObject_1$o, templateObject_2$h, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18382
18425
|
|
|
18383
18426
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18384
18427
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
@@ -18388,8 +18431,8 @@ var Content = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTe
|
|
|
18388
18431
|
var ReviewContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18389
18432
|
var DateText = newStyled.span(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18390
18433
|
var VariantText = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18391
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
18392
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
18434
|
+
var ReviewerName = newStyled.h2(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
18435
|
+
var ReviewTitle = newStyled.h3(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18393
18436
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
18394
18437
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
18395
18438
|
var ImagesContainer = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
@@ -18434,7 +18477,7 @@ var Review = function (_a) {
|
|
|
18434
18477
|
: description,
|
|
18435
18478
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
18436
18479
|
};
|
|
18437
|
-
var templateObject_1$n, templateObject_2$g, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$
|
|
18480
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18438
18481
|
|
|
18439
18482
|
var Container$f = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
18440
18483
|
var ReviewsContainer = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
@@ -18442,7 +18485,7 @@ var ReviewsCount = newStyled.div(templateObject_3$d || (templateObject_3$d = __m
|
|
|
18442
18485
|
var ReviewsStars = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
18443
18486
|
var ReviewsTextCount = newStyled(Text$8)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
18444
18487
|
var ReviewsImages = newStyled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
18445
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
18488
|
+
var SummaryItem = newStyled.div(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
18446
18489
|
var backgroundUrl = _a.backgroundUrl;
|
|
18447
18490
|
return "url(".concat(backgroundUrl, ")");
|
|
18448
18491
|
});
|
|
@@ -18452,7 +18495,7 @@ var ReviewsHeader = function (_a) {
|
|
|
18452
18495
|
var theme = useTheme();
|
|
18453
18496
|
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18454
18497
|
};
|
|
18455
|
-
var templateObject_1$m, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$
|
|
18498
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18456
18499
|
|
|
18457
18500
|
var Container$e = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
18458
18501
|
var Text = newStyled.p(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
@@ -19039,18 +19082,27 @@ var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __make
|
|
|
19039
19082
|
var theme = _a.theme;
|
|
19040
19083
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19041
19084
|
});
|
|
19042
|
-
var Container$3 = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"])), function (
|
|
19043
|
-
var
|
|
19044
|
-
|
|
19085
|
+
var Container$3 = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
19086
|
+
var highlightColor = _a.highlightColor;
|
|
19087
|
+
return highlightColor;
|
|
19088
|
+
});
|
|
19089
|
+
var TotalContainer = newStyled(Container$3)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
19090
|
+
var showTotalLabel = _a.showTotalLabel;
|
|
19091
|
+
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19092
|
+
});
|
|
19093
|
+
var DiscountText = newStyled.h3(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
19094
|
+
var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
19045
19095
|
var theme = _a.theme;
|
|
19046
19096
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19047
19097
|
});
|
|
19098
|
+
var TotalLabel = newStyled(Text$8)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19099
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
19100
|
+
|
|
19048
19101
|
var Total = function (_a) {
|
|
19049
|
-
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
19102
|
+
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
19050
19103
|
var theme = useTheme();
|
|
19051
|
-
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$3, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19052
|
-
};
|
|
19053
|
-
var templateObject_1$4, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2;
|
|
19104
|
+
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$3, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19105
|
+
};
|
|
19054
19106
|
|
|
19055
19107
|
var Wrapper = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19056
19108
|
var color = _a.color;
|