@trafilea/afrodita-components 6.0.0 → 6.1.0
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 +353 -298
- package/build/index.esm.js.map +1 -1
- package/build/index.js +353 -298
- 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.esm.js
CHANGED
|
@@ -3096,7 +3096,7 @@ var AssetsProvider = function (_a) {
|
|
|
3096
3096
|
};
|
|
3097
3097
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
3098
3098
|
|
|
3099
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3099
|
+
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) {
|
|
3100
3100
|
var width = _a.width;
|
|
3101
3101
|
return width;
|
|
3102
3102
|
}, function (_a) {
|
|
@@ -3112,7 +3112,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1M || (templateObject_1$1M
|
|
|
3112
3112
|
var opacity = _a.opacity;
|
|
3113
3113
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3114
3114
|
});
|
|
3115
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3115
|
+
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) {
|
|
3116
3116
|
var width = _a.width;
|
|
3117
3117
|
return width;
|
|
3118
3118
|
}, function (_a) {
|
|
@@ -3125,7 +3125,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$19 || (templateObject_2$
|
|
|
3125
3125
|
var opacity = _a.opacity;
|
|
3126
3126
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3127
3127
|
});
|
|
3128
|
-
var templateObject_1$
|
|
3128
|
+
var templateObject_1$1O, templateObject_2$1a;
|
|
3129
3129
|
|
|
3130
3130
|
/* eslint-disable no-undef */
|
|
3131
3131
|
var cache = new Map();
|
|
@@ -3985,14 +3985,14 @@ function jsxs(type, props, key) {
|
|
|
3985
3985
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
3986
3986
|
// `variants` styles that are consistent through all themes.
|
|
3987
3987
|
var TAGS = {
|
|
3988
|
-
hero1: newStyled.h1(templateObject_1$
|
|
3989
|
-
hero2: newStyled.h2(templateObject_2$
|
|
3990
|
-
hero3: newStyled.h3(templateObject_3$
|
|
3991
|
-
display1: newStyled.h1(templateObject_4$
|
|
3988
|
+
hero1: newStyled.h1(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject([""], [""]))),
|
|
3989
|
+
hero2: newStyled.h2(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject([""], [""]))),
|
|
3990
|
+
hero3: newStyled.h3(templateObject_3$U || (templateObject_3$U = __makeTemplateObject([""], [""]))),
|
|
3991
|
+
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
3992
3992
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
3993
3993
|
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
3994
|
-
heading1: newStyled.h1(templateObject_7$
|
|
3995
|
-
heading2: newStyled.h2(templateObject_8$
|
|
3994
|
+
heading1: newStyled.h1(templateObject_7$h || (templateObject_7$h = __makeTemplateObject([""], [""]))),
|
|
3995
|
+
heading2: newStyled.h2(templateObject_8$c || (templateObject_8$c = __makeTemplateObject([""], [""]))),
|
|
3996
3996
|
heading3: newStyled.h3(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
3997
3997
|
heading4: newStyled.h4(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject([""], [""]))),
|
|
3998
3998
|
heading5: newStyled.h5(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject([""], [""]))),
|
|
@@ -4121,8 +4121,12 @@ var DEFAULTS = {
|
|
|
4121
4121
|
size: 'regular',
|
|
4122
4122
|
},
|
|
4123
4123
|
};
|
|
4124
|
-
var templateObject_1$
|
|
4124
|
+
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;
|
|
4125
4125
|
|
|
4126
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
4127
|
+
var timerColor = _a.timerColor;
|
|
4128
|
+
return timerColor || '';
|
|
4129
|
+
});
|
|
4126
4130
|
var timeToSeconds = function (_a) {
|
|
4127
4131
|
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
4128
4132
|
return hours * 3600 + minutes * 60 + seconds;
|
|
@@ -4134,8 +4138,8 @@ var secondsToTime = function (secs) {
|
|
|
4134
4138
|
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
4135
4139
|
};
|
|
4136
4140
|
var Timer = function (_a) {
|
|
4137
|
-
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, rest = __rest(_a, ["onTimeUp", "displayZeroValues"]);
|
|
4138
|
-
var
|
|
4141
|
+
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"]);
|
|
4142
|
+
var _e = useState(timeToSeconds(rest)), secs = _e[0], setSecs = _e[1];
|
|
4139
4143
|
useEffect(function () {
|
|
4140
4144
|
var timer = setInterval(function () {
|
|
4141
4145
|
setSecs(function (seconds) {
|
|
@@ -4151,11 +4155,12 @@ var Timer = function (_a) {
|
|
|
4151
4155
|
clearInterval(timer);
|
|
4152
4156
|
return function () { return clearInterval(timer); };
|
|
4153
4157
|
}, [onTimeUp, secs]);
|
|
4154
|
-
var
|
|
4155
|
-
return (jsxs$1(
|
|
4156
|
-
};
|
|
4158
|
+
var _f = secondsToTime(secs), hours = _f.hours, minutes = _f.minutes, seconds = _f.seconds;
|
|
4159
|
+
return (jsxs$1(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));
|
|
4160
|
+
};
|
|
4161
|
+
var templateObject_1$1M;
|
|
4157
4162
|
|
|
4158
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
4163
|
+
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) {
|
|
4159
4164
|
var textPosition = _a.textPosition;
|
|
4160
4165
|
return textPosition;
|
|
4161
4166
|
}, function (_a) {
|
|
@@ -4168,10 +4173,12 @@ var TimerContainer = newStyled.div(templateObject_1$1K || (templateObject_1$1K =
|
|
|
4168
4173
|
var borderRadius = _a.borderRadius;
|
|
4169
4174
|
return borderRadius || '8px';
|
|
4170
4175
|
});
|
|
4176
|
+
var templateObject_1$1L;
|
|
4177
|
+
|
|
4171
4178
|
var HurryUp = function (_a) {
|
|
4172
|
-
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;
|
|
4179
|
+
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;
|
|
4173
4180
|
var theme = useTheme();
|
|
4174
|
-
var
|
|
4181
|
+
var _f = React__default.useMemo(function () {
|
|
4175
4182
|
var tomorrowDate = new Date();
|
|
4176
4183
|
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
4177
4184
|
tomorrowDate.setHours(0, 0, 0, 0);
|
|
@@ -4185,10 +4192,9 @@ var HurryUp = function (_a) {
|
|
|
4185
4192
|
minutes: minutes,
|
|
4186
4193
|
seconds: seconds,
|
|
4187
4194
|
};
|
|
4188
|
-
}, []), hours =
|
|
4189
|
-
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsx$1(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsx$1(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
|
|
4190
|
-
};
|
|
4191
|
-
var templateObject_1$1K;
|
|
4195
|
+
}, []), hours = _f.hours, minutes = _f.minutes, seconds = _f.seconds;
|
|
4196
|
+
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsx$1(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && (jsx$1(Timer, { hours: hours, minutes: minutes, seconds: seconds, showSeconds: showSeconds, timerColor: timerColor, onTimeUp: function () { } }, void 0))] }), void 0));
|
|
4197
|
+
};
|
|
4192
4198
|
|
|
4193
4199
|
var formatPrice = function (value, _a) {
|
|
4194
4200
|
var _b;
|
|
@@ -4203,15 +4209,15 @@ var formatPrice = function (value, _a) {
|
|
|
4203
4209
|
}).format(valueToFormat);
|
|
4204
4210
|
};
|
|
4205
4211
|
|
|
4206
|
-
var Container$
|
|
4207
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4208
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4209
|
-
var Label$4 = newStyled.div(templateObject_4$
|
|
4212
|
+
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"])));
|
|
4213
|
+
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"])));
|
|
4214
|
+
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"])));
|
|
4215
|
+
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"])));
|
|
4210
4216
|
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"])));
|
|
4211
4217
|
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"])));
|
|
4212
4218
|
var PackSelectorV2 = function (_a) {
|
|
4213
4219
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4214
|
-
return (jsx$1(Container$
|
|
4220
|
+
return (jsx$1(Container$17, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4215
4221
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4216
4222
|
}) }), void 0));
|
|
4217
4223
|
};
|
|
@@ -4233,27 +4239,27 @@ var PackCard$1 = function (_a) {
|
|
|
4233
4239
|
currency: currencyCode || 'USD',
|
|
4234
4240
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4235
4241
|
};
|
|
4236
|
-
var templateObject_1$
|
|
4242
|
+
var templateObject_1$1K, templateObject_2$18, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4237
4243
|
|
|
4238
|
-
var Container$
|
|
4239
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4244
|
+
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"])));
|
|
4245
|
+
var DropContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4240
4246
|
var DropList = function (_a) {
|
|
4241
4247
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4242
|
-
return (jsx$1(Container$
|
|
4248
|
+
return (jsx$1(Container$16, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4243
4249
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4244
4250
|
}) }, void 0));
|
|
4245
4251
|
};
|
|
4246
|
-
var templateObject_1$
|
|
4252
|
+
var templateObject_1$1J, templateObject_2$17;
|
|
4247
4253
|
|
|
4248
4254
|
var DROPS_TOTAL = 5;
|
|
4249
|
-
var Container$
|
|
4250
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4251
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4255
|
+
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"])));
|
|
4256
|
+
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"])));
|
|
4257
|
+
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"])));
|
|
4252
4258
|
var AbsorbencyLevel = function (_a) {
|
|
4253
4259
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4254
|
-
return (jsxs$1(Container$
|
|
4260
|
+
return (jsxs$1(Container$15, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4255
4261
|
};
|
|
4256
|
-
var templateObject_1$
|
|
4262
|
+
var templateObject_1$1I, templateObject_2$16, templateObject_3$S;
|
|
4257
4263
|
|
|
4258
4264
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4259
4265
|
`),"","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(`
|
|
@@ -4329,7 +4335,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4329
4335
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4330
4336
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4331
4337
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4332
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4338
|
+
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"])));
|
|
4333
4339
|
var Accordion$1 = function (_a) {
|
|
4334
4340
|
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;
|
|
4335
4341
|
var theme = useTheme();
|
|
@@ -4353,9 +4359,9 @@ var Accordion$1 = function (_a) {
|
|
|
4353
4359
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4354
4360
|
} }), void 0));
|
|
4355
4361
|
};
|
|
4356
|
-
var templateObject_1$
|
|
4362
|
+
var templateObject_1$1H;
|
|
4357
4363
|
|
|
4358
|
-
var Container$
|
|
4364
|
+
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"])));
|
|
4359
4365
|
var AccordionOptions = function (_a) {
|
|
4360
4366
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4361
4367
|
var _b = useState({
|
|
@@ -4368,7 +4374,7 @@ var AccordionOptions = function (_a) {
|
|
|
4368
4374
|
}
|
|
4369
4375
|
return false;
|
|
4370
4376
|
};
|
|
4371
|
-
return (jsx$1(Container$
|
|
4377
|
+
return (jsx$1(Container$14, { children: accordions.map(function (accordion, index) {
|
|
4372
4378
|
var forceOpenValue = getForceOpen(index);
|
|
4373
4379
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4374
4380
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4379,7 +4385,7 @@ var AccordionOptions = function (_a) {
|
|
|
4379
4385
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4380
4386
|
}) }, void 0));
|
|
4381
4387
|
};
|
|
4382
|
-
var templateObject_1$
|
|
4388
|
+
var templateObject_1$1G;
|
|
4383
4389
|
|
|
4384
4390
|
var CardSectionType;
|
|
4385
4391
|
(function (CardSectionType) {
|
|
@@ -4556,7 +4562,7 @@ function BaseSelectOption(_a) {
|
|
|
4556
4562
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4557
4563
|
}
|
|
4558
4564
|
|
|
4559
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4565
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4560
4566
|
function BaseSelect(_a) {
|
|
4561
4567
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4562
4568
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4566,7 +4572,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4566
4572
|
Options: BaseSelectOptions,
|
|
4567
4573
|
Option: BaseSelectOption,
|
|
4568
4574
|
});
|
|
4569
|
-
var templateObject_1$
|
|
4575
|
+
var templateObject_1$1F;
|
|
4570
4576
|
|
|
4571
4577
|
var CustomButton = newStyled.button(function (_a) {
|
|
4572
4578
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4625,14 +4631,14 @@ var withLabel = function (Button, label) {
|
|
|
4625
4631
|
};
|
|
4626
4632
|
};
|
|
4627
4633
|
|
|
4628
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4629
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4634
|
+
var ErrorText = newStyled.h3(templateObject_1$1E || (templateObject_1$1E = __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; });
|
|
4635
|
+
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"])));
|
|
4630
4636
|
var Error$1 = function (_a) {
|
|
4631
4637
|
var error = _a.error;
|
|
4632
4638
|
var theme = useTheme();
|
|
4633
4639
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4634
4640
|
};
|
|
4635
|
-
var templateObject_1$
|
|
4641
|
+
var templateObject_1$1E, templateObject_2$15;
|
|
4636
4642
|
|
|
4637
4643
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4638
4644
|
var theme = _a.theme;
|
|
@@ -4799,7 +4805,7 @@ var CustomCheckboxStyles = {
|
|
|
4799
4805
|
},
|
|
4800
4806
|
};
|
|
4801
4807
|
|
|
4802
|
-
var Container$
|
|
4808
|
+
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"])));
|
|
4803
4809
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4804
4810
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4805
4811
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4810,7 +4816,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4810
4816
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4811
4817
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4812
4818
|
]; });
|
|
4813
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4819
|
+
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) {
|
|
4814
4820
|
var disabled = _a.disabled;
|
|
4815
4821
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4816
4822
|
});
|
|
@@ -4824,9 +4830,9 @@ var Checkbox = function (_a) {
|
|
|
4824
4830
|
}
|
|
4825
4831
|
onChange(e.target.checked);
|
|
4826
4832
|
};
|
|
4827
|
-
return (jsxs$1(Container$
|
|
4833
|
+
return (jsxs$1(Container$13, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4828
4834
|
};
|
|
4829
|
-
var templateObject_1$
|
|
4835
|
+
var templateObject_1$1D, templateObject_2$14;
|
|
4830
4836
|
|
|
4831
4837
|
var CustomOption = newStyled.li(function (_a) {
|
|
4832
4838
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4875,8 +4881,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4875
4881
|
Option: BaseDropdownOption,
|
|
4876
4882
|
});
|
|
4877
4883
|
|
|
4878
|
-
var Container$
|
|
4879
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4884
|
+
var Container$12 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject([""], [""])));
|
|
4885
|
+
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"])));
|
|
4880
4886
|
function SimpleDropdown(_a) {
|
|
4881
4887
|
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;
|
|
4882
4888
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4906,10 +4912,10 @@ function SimpleDropdown(_a) {
|
|
|
4906
4912
|
setSelectedValue(value);
|
|
4907
4913
|
}, [value, options, initialValue]);
|
|
4908
4914
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4909
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4915
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$12 : Fragment$1;
|
|
4910
4916
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4911
4917
|
}
|
|
4912
|
-
var templateObject_1$
|
|
4918
|
+
var templateObject_1$1C, templateObject_2$13;
|
|
4913
4919
|
|
|
4914
4920
|
/* base styles & size variants */
|
|
4915
4921
|
var CustomRadioStyles$2 = {
|
|
@@ -4974,9 +4980,9 @@ var ContainerStyles$2 = {
|
|
|
4974
4980
|
},
|
|
4975
4981
|
};
|
|
4976
4982
|
|
|
4977
|
-
var Wrapper$
|
|
4978
|
-
var Container$
|
|
4979
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
4983
|
+
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"])));
|
|
4984
|
+
var Container$11 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
4985
|
+
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) {
|
|
4980
4986
|
var disabled = _a.disabled;
|
|
4981
4987
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4982
4988
|
});
|
|
@@ -4984,7 +4990,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
4984
4990
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
4985
4991
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
4986
4992
|
]; });
|
|
4987
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
4993
|
+
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) {
|
|
4988
4994
|
var theme = _a.theme;
|
|
4989
4995
|
return theme.component.radio.textSize;
|
|
4990
4996
|
}, function (_a) {
|
|
@@ -4998,9 +5004,9 @@ var RadioInput = function (_a) {
|
|
|
4998
5004
|
var value = event.currentTarget.value;
|
|
4999
5005
|
onChange({ value: value, label: label });
|
|
5000
5006
|
};
|
|
5001
|
-
return (jsxs$1(Wrapper$
|
|
5007
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$11, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5002
5008
|
};
|
|
5003
|
-
var templateObject_1$
|
|
5009
|
+
var templateObject_1$1B, templateObject_2$12, templateObject_3$R;
|
|
5004
5010
|
|
|
5005
5011
|
var TooltipArrow = function (_a) {
|
|
5006
5012
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -5080,7 +5086,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5080
5086
|
}
|
|
5081
5087
|
};
|
|
5082
5088
|
|
|
5083
|
-
var Wrapper$
|
|
5089
|
+
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) {
|
|
5084
5090
|
var position = _a.position;
|
|
5085
5091
|
return getWrapperFlexDirection(position);
|
|
5086
5092
|
});
|
|
@@ -5105,14 +5111,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
5105
5111
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5106
5112
|
return actual === expected ? margin : '0';
|
|
5107
5113
|
};
|
|
5108
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
5114
|
+
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) {
|
|
5109
5115
|
var borderColor = _a.borderColor;
|
|
5110
5116
|
return borderColor;
|
|
5111
5117
|
}, function (_a) {
|
|
5112
5118
|
var backgroundColor = _a.backgroundColor;
|
|
5113
5119
|
return backgroundColor;
|
|
5114
5120
|
});
|
|
5115
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
5121
|
+
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) {
|
|
5116
5122
|
var position = _a.position;
|
|
5117
5123
|
return getArrowRotation(position);
|
|
5118
5124
|
}, function (_a) {
|
|
@@ -5122,7 +5128,7 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$P || (templateObject_
|
|
|
5122
5128
|
var position = _a.position;
|
|
5123
5129
|
return getArrowContainerMargin(position);
|
|
5124
5130
|
});
|
|
5125
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5131
|
+
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) {
|
|
5126
5132
|
var color = _a.color;
|
|
5127
5133
|
return color;
|
|
5128
5134
|
});
|
|
@@ -5131,8 +5137,8 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5131
5137
|
var color = _a.color;
|
|
5132
5138
|
return color;
|
|
5133
5139
|
});
|
|
5134
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5135
|
-
var templateObject_1$
|
|
5140
|
+
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"])));
|
|
5141
|
+
var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$D, templateObject_5$p, templateObject_6$n, templateObject_7$g;
|
|
5136
5142
|
|
|
5137
5143
|
var Tooltip = function (_a) {
|
|
5138
5144
|
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;
|
|
@@ -5149,7 +5155,7 @@ var Tooltip = function (_a) {
|
|
|
5149
5155
|
var ref = tooltipRef.current;
|
|
5150
5156
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
5151
5157
|
}, [tooltipRef]);
|
|
5152
|
-
return (jsxs$1(Wrapper$
|
|
5158
|
+
return (jsxs$1(Wrapper$6, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, {
|
|
5153
5159
|
testId: 'HeaderIcon',
|
|
5154
5160
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
5155
5161
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
@@ -5171,7 +5177,7 @@ var benefitsColorMapper = function (_a) {
|
|
|
5171
5177
|
};
|
|
5172
5178
|
};
|
|
5173
5179
|
|
|
5174
|
-
var getStylesBySize$
|
|
5180
|
+
var getStylesBySize$d = function (size, bordersRounded, theme) {
|
|
5175
5181
|
var _a, _b, _c;
|
|
5176
5182
|
switch (size) {
|
|
5177
5183
|
case ComponentSize.Large:
|
|
@@ -5200,7 +5206,7 @@ var getStylesBySize$e = function (size, bordersRounded, theme) {
|
|
|
5200
5206
|
};
|
|
5201
5207
|
}
|
|
5202
5208
|
};
|
|
5203
|
-
var Container$
|
|
5209
|
+
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) {
|
|
5204
5210
|
var backgroundColor = _a.backgroundColor;
|
|
5205
5211
|
return backgroundColor;
|
|
5206
5212
|
}, function (_a) {
|
|
@@ -5209,37 +5215,37 @@ var Container$11 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = _
|
|
|
5209
5215
|
}, function (_a) {
|
|
5210
5216
|
var _b;
|
|
5211
5217
|
var size = _a.size, bordersRounded = _a.bordersRounded;
|
|
5212
|
-
return (_b = getStylesBySize$
|
|
5218
|
+
return (_b = getStylesBySize$d(size, bordersRounded)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5213
5219
|
}, function (_a) {
|
|
5214
5220
|
var _b;
|
|
5215
5221
|
var size = _a.size;
|
|
5216
|
-
return (_b = getStylesBySize$
|
|
5222
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5217
5223
|
}, function (_a) {
|
|
5218
5224
|
var size = _a.size;
|
|
5219
5225
|
return (size === ComponentSize.Small ? '2rem' : 'unset');
|
|
5220
5226
|
}, function (_a) {
|
|
5221
5227
|
var _b;
|
|
5222
5228
|
var size = _a.size;
|
|
5223
|
-
return (_b = getStylesBySize$
|
|
5229
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5224
5230
|
});
|
|
5225
|
-
var H3$3 = newStyled.h3(templateObject_2
|
|
5231
|
+
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) {
|
|
5226
5232
|
var textColor = _a.textColor;
|
|
5227
5233
|
return textColor;
|
|
5228
5234
|
}, function (_a) {
|
|
5229
5235
|
var _b;
|
|
5230
5236
|
var size = _a.size, theme = _a.theme;
|
|
5231
|
-
return (_b = getStylesBySize$
|
|
5237
|
+
return (_b = getStylesBySize$d(size, false, theme)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5232
5238
|
}, function (_a) {
|
|
5233
5239
|
var _b;
|
|
5234
5240
|
var size = _a.size;
|
|
5235
|
-
return (_b = getStylesBySize$
|
|
5241
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5236
5242
|
});
|
|
5237
5243
|
var DiscountTag = function (_a) {
|
|
5238
5244
|
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 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5239
5245
|
var theme = useTheme();
|
|
5240
|
-
return (jsx$1(Container$
|
|
5246
|
+
return (jsx$1(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: jsxs$1(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));
|
|
5241
5247
|
};
|
|
5242
|
-
var templateObject_1$
|
|
5248
|
+
var templateObject_1$1z, templateObject_2$10;
|
|
5243
5249
|
|
|
5244
5250
|
function getWindowDimensions() {
|
|
5245
5251
|
var width = window.innerWidth, height = window.innerHeight;
|
|
@@ -5265,7 +5271,7 @@ var useWindowDimensions = function (breakpoints) {
|
|
|
5265
5271
|
};
|
|
5266
5272
|
};
|
|
5267
5273
|
|
|
5268
|
-
var getStylesBySize$
|
|
5274
|
+
var getStylesBySize$c = function (size, theme) {
|
|
5269
5275
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
5270
5276
|
switch (size) {
|
|
5271
5277
|
case ComponentSize.Large:
|
|
@@ -5296,17 +5302,17 @@ var getStylesBySize$d = function (size, theme) {
|
|
|
5296
5302
|
var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall) {
|
|
5297
5303
|
var _a, _b, _c;
|
|
5298
5304
|
if (finalPriceStyled) {
|
|
5299
|
-
return (_a = getStylesBySize$
|
|
5305
|
+
return (_a = getStylesBySize$c(size, theme)) === null || _a === void 0 ? void 0 : _a.finalPricefontSize;
|
|
5300
5306
|
}
|
|
5301
5307
|
else if (finalPriceStyledSmall) {
|
|
5302
|
-
return (_b = getStylesBySize$
|
|
5308
|
+
return (_b = getStylesBySize$c(size, theme)) === null || _b === void 0 ? void 0 : _b.finalPricefontSizeSmall;
|
|
5303
5309
|
}
|
|
5304
5310
|
else {
|
|
5305
|
-
return (_c = getStylesBySize$
|
|
5311
|
+
return (_c = getStylesBySize$c(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5306
5312
|
}
|
|
5307
5313
|
};
|
|
5308
|
-
var Container
|
|
5309
|
-
var Price = newStyled.p(templateObject_2
|
|
5314
|
+
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"])));
|
|
5315
|
+
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) {
|
|
5310
5316
|
var weight = _a.weight;
|
|
5311
5317
|
return (weight ? weight : '400');
|
|
5312
5318
|
}, function (_a) {
|
|
@@ -5315,7 +5321,7 @@ var Price = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __makeTempla
|
|
|
5315
5321
|
}, function (_a) {
|
|
5316
5322
|
var _b;
|
|
5317
5323
|
var size = _a.size;
|
|
5318
|
-
return (_b = getStylesBySize$
|
|
5324
|
+
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5319
5325
|
}, function (_a) {
|
|
5320
5326
|
var color = _a.color;
|
|
5321
5327
|
return color;
|
|
@@ -5325,15 +5331,15 @@ var Price = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __makeTempla
|
|
|
5325
5331
|
}, function (_a) {
|
|
5326
5332
|
var _b;
|
|
5327
5333
|
var margin = _a.margin, size = _a.size;
|
|
5328
|
-
return (margin ? (_b = getStylesBySize$
|
|
5334
|
+
return (margin ? (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
5329
5335
|
}, function (_a) {
|
|
5330
5336
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5331
5337
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5332
5338
|
});
|
|
5333
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5339
|
+
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) {
|
|
5334
5340
|
var _b;
|
|
5335
5341
|
var size = _a.size;
|
|
5336
|
-
return (_b = getStylesBySize$
|
|
5342
|
+
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
5337
5343
|
});
|
|
5338
5344
|
function getTestId() {
|
|
5339
5345
|
var args = [];
|
|
@@ -5361,11 +5367,11 @@ var PriceLabel = function (_a) {
|
|
|
5361
5367
|
: ComponentSize.XSmall;
|
|
5362
5368
|
return (jsx$1(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));
|
|
5363
5369
|
};
|
|
5364
|
-
return (jsxs$1(Container
|
|
5370
|
+
return (jsxs$1(Container$$, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5365
5371
|
};
|
|
5366
|
-
var templateObject_1$
|
|
5372
|
+
var templateObject_1$1y, templateObject_2$$, templateObject_3$P;
|
|
5367
5373
|
|
|
5368
|
-
var getStylesBySize$
|
|
5374
|
+
var getStylesBySize$b = function (size) {
|
|
5369
5375
|
switch (size) {
|
|
5370
5376
|
case ComponentSize.Large:
|
|
5371
5377
|
return {
|
|
@@ -5393,7 +5399,7 @@ var getStylesBySize$c = function (size) {
|
|
|
5393
5399
|
};
|
|
5394
5400
|
}
|
|
5395
5401
|
};
|
|
5396
|
-
var Container
|
|
5402
|
+
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) {
|
|
5397
5403
|
var backgroundColor = _a.backgroundColor;
|
|
5398
5404
|
return backgroundColor;
|
|
5399
5405
|
}, function (_a) {
|
|
@@ -5402,39 +5408,39 @@ var Container$$ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __
|
|
|
5402
5408
|
}, function (_a) {
|
|
5403
5409
|
var _b;
|
|
5404
5410
|
var size = _a.size;
|
|
5405
|
-
return (_b = getStylesBySize$
|
|
5411
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5406
5412
|
}, function (_a) {
|
|
5407
5413
|
var _b;
|
|
5408
5414
|
var size = _a.size;
|
|
5409
|
-
return (_b = getStylesBySize$
|
|
5415
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5410
5416
|
}, function (_a) {
|
|
5411
5417
|
var size = _a.size;
|
|
5412
5418
|
return (size === ComponentSize.Small ? '2rem' : 'unset');
|
|
5413
5419
|
}, function (_a) {
|
|
5414
5420
|
var _b;
|
|
5415
5421
|
var size = _a.size;
|
|
5416
|
-
return (_b = getStylesBySize$
|
|
5422
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5417
5423
|
});
|
|
5418
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5424
|
+
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) {
|
|
5419
5425
|
var textColor = _a.textColor;
|
|
5420
5426
|
return textColor;
|
|
5421
5427
|
}, function (_a) {
|
|
5422
5428
|
var _b;
|
|
5423
5429
|
var size = _a.size;
|
|
5424
|
-
return (_b = getStylesBySize$
|
|
5430
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5425
5431
|
}, function (_a) {
|
|
5426
5432
|
var _b;
|
|
5427
5433
|
var size = _a.size;
|
|
5428
|
-
return (_b = getStylesBySize$
|
|
5434
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5429
5435
|
});
|
|
5430
5436
|
var ClubOfferTag = function (_a) {
|
|
5431
5437
|
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 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5432
5438
|
var theme = useTheme();
|
|
5433
|
-
return (jsx$1(Container
|
|
5439
|
+
return (jsx$1(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: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5434
5440
|
};
|
|
5435
|
-
var templateObject_1$
|
|
5441
|
+
var templateObject_1$1x, templateObject_2$_;
|
|
5436
5442
|
|
|
5437
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5443
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5438
5444
|
var PriceLabelV2 = function (_a) {
|
|
5439
5445
|
var _b;
|
|
5440
5446
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay"]);
|
|
@@ -5484,7 +5490,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5484
5490
|
var savetoString = saveto.toFixed(2);
|
|
5485
5491
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5486
5492
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5487
|
-
return (jsxs$1(Container
|
|
5493
|
+
return (jsxs$1(Container$$, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5488
5494
|
marginTop: '-5px',
|
|
5489
5495
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(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), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5490
5496
|
marginTop: '-6px',
|
|
@@ -5500,10 +5506,10 @@ var PriceLabelV2 = function (_a) {
|
|
|
5500
5506
|
lineHeight: '22px',
|
|
5501
5507
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5502
5508
|
};
|
|
5503
|
-
var templateObject_1$
|
|
5509
|
+
var templateObject_1$1w;
|
|
5504
5510
|
|
|
5505
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5506
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5511
|
+
var FlexContainer = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5512
|
+
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) {
|
|
5507
5513
|
var selected = _a.selected, theme = _a.theme;
|
|
5508
5514
|
return selected
|
|
5509
5515
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5517,11 +5523,11 @@ var ContainerBase = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __
|
|
|
5517
5523
|
var theme = _a.theme;
|
|
5518
5524
|
return theme.colors.pallete.primary.color;
|
|
5519
5525
|
});
|
|
5520
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5526
|
+
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) {
|
|
5521
5527
|
var onClick = _a.onClick;
|
|
5522
5528
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5523
5529
|
});
|
|
5524
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5530
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5525
5531
|
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) {
|
|
5526
5532
|
var theme = _a.theme;
|
|
5527
5533
|
return theme.colors.shades[200].color;
|
|
@@ -5530,8 +5536,8 @@ var SubscriptionHeader = newStyled.div(templateObject_5$o || (templateObject_5$o
|
|
|
5530
5536
|
return theme.colors.pallete.primary.color;
|
|
5531
5537
|
});
|
|
5532
5538
|
var BenefitsContainer = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5533
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5534
|
-
var BenefitText = newStyled(Text$8)(templateObject_8$
|
|
5539
|
+
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"])));
|
|
5540
|
+
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"])));
|
|
5535
5541
|
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"])));
|
|
5536
5542
|
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"])));
|
|
5537
5543
|
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"])));
|
|
@@ -5539,8 +5545,8 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5539
5545
|
var selected = _a.selected, theme = _a.theme;
|
|
5540
5546
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5541
5547
|
});
|
|
5542
|
-
var Container$
|
|
5543
|
-
var templateObject_1$
|
|
5548
|
+
var Container$Z = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5549
|
+
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;
|
|
5544
5550
|
|
|
5545
5551
|
var radioIds = {
|
|
5546
5552
|
oneTime: {
|
|
@@ -5590,38 +5596,38 @@ var Autoship = function (_a) {
|
|
|
5590
5596
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5591
5597
|
};
|
|
5592
5598
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5593
|
-
return (jsxs$1(Container$
|
|
5599
|
+
return (jsxs$1(Container$Z, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer, __assign$1({ selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice, { finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer, __assign$1({ selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice, { finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5594
5600
|
? benefitsColor.selected
|
|
5595
5601
|
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxs$1(FlexContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5596
5602
|
};
|
|
5597
5603
|
|
|
5598
|
-
var Img = newStyled.img(templateObject_1$
|
|
5604
|
+
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; });
|
|
5599
5605
|
var Image$3 = function (_a) {
|
|
5600
5606
|
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;
|
|
5601
5607
|
return (jsx$1(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));
|
|
5602
5608
|
};
|
|
5603
|
-
var templateObject_1$
|
|
5609
|
+
var templateObject_1$1u;
|
|
5604
5610
|
|
|
5605
|
-
var _a$
|
|
5611
|
+
var _a$2;
|
|
5606
5612
|
var BeforeAfterVariant;
|
|
5607
5613
|
(function (BeforeAfterVariant) {
|
|
5608
5614
|
BeforeAfterVariant["UserInfoText"] = "UserInfoText";
|
|
5609
5615
|
BeforeAfterVariant["ResultFeedback"] = "ResultFeedback";
|
|
5610
5616
|
})(BeforeAfterVariant || (BeforeAfterVariant = {}));
|
|
5611
|
-
var componentSizeMapper = (_a$
|
|
5612
|
-
_a$
|
|
5613
|
-
_a$
|
|
5614
|
-
_a$
|
|
5615
|
-
_a$
|
|
5616
|
-
_a$
|
|
5617
|
-
|
|
5618
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5619
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5620
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5621
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
5617
|
+
var componentSizeMapper = (_a$2 = {},
|
|
5618
|
+
_a$2[ComponentSize.XSmall] = ComponentSize.Small,
|
|
5619
|
+
_a$2[ComponentSize.Small] = ComponentSize.Small,
|
|
5620
|
+
_a$2[ComponentSize.Medium] = ComponentSize.Medium,
|
|
5621
|
+
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5622
|
+
_a$2);
|
|
5623
|
+
|
|
5624
|
+
var CustomerDetails = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject([""], [""])));
|
|
5625
|
+
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"])));
|
|
5626
|
+
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"])));
|
|
5627
|
+
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"])));
|
|
5622
5628
|
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"])));
|
|
5623
5629
|
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"])));
|
|
5624
|
-
var templateObject_1$
|
|
5630
|
+
var templateObject_1$1t, templateObject_2$Y, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5625
5631
|
|
|
5626
5632
|
var NameWithStars = function (_a) {
|
|
5627
5633
|
var name = _a.name, size = _a.size;
|
|
@@ -5639,10 +5645,10 @@ var ResultFeedback = function (_a) {
|
|
|
5639
5645
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5640
5646
|
};
|
|
5641
5647
|
|
|
5642
|
-
var Container$
|
|
5643
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5644
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5645
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
5648
|
+
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; });
|
|
5649
|
+
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"])));
|
|
5650
|
+
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; });
|
|
5651
|
+
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) {
|
|
5646
5652
|
var theme = _a.theme;
|
|
5647
5653
|
return theme.colors.pallete.secondary.color;
|
|
5648
5654
|
}, function (_a) {
|
|
@@ -5652,10 +5658,10 @@ var UserInfoText = newStyled.div(templateObject_4$z || (templateObject_4$z = __m
|
|
|
5652
5658
|
var theme = _a.theme, size = _a.size;
|
|
5653
5659
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5654
5660
|
});
|
|
5655
|
-
var templateObject_1$
|
|
5661
|
+
var templateObject_1$1s, templateObject_2$X, templateObject_3$M, templateObject_4$A;
|
|
5656
5662
|
|
|
5657
5663
|
/* base styles & size variants */
|
|
5658
|
-
var getStylesBySize$
|
|
5664
|
+
var getStylesBySize$a = function (size, theme) {
|
|
5659
5665
|
switch (size) {
|
|
5660
5666
|
case ComponentSize.Large:
|
|
5661
5667
|
return {
|
|
@@ -5712,11 +5718,11 @@ var getStylesBySize$b = function (size, theme) {
|
|
|
5712
5718
|
}
|
|
5713
5719
|
};
|
|
5714
5720
|
|
|
5715
|
-
var _a;
|
|
5716
|
-
var componentByVariant = (_a = {},
|
|
5717
|
-
_a[BeforeAfterVariant.UserInfoText] = function (props) { return (jsx$1(UserInfoText, __assign$1({ "data-testid": "UserInfoText" }, props, { children: props.text }), void 0)); },
|
|
5718
|
-
_a[BeforeAfterVariant.ResultFeedback] = ResultFeedback,
|
|
5719
|
-
_a);
|
|
5721
|
+
var _a$1;
|
|
5722
|
+
var componentByVariant = (_a$1 = {},
|
|
5723
|
+
_a$1[BeforeAfterVariant.UserInfoText] = function (props) { return (jsx$1(UserInfoText, __assign$1({ "data-testid": "UserInfoText" }, props, { children: props.text }), void 0)); },
|
|
5724
|
+
_a$1[BeforeAfterVariant.ResultFeedback] = ResultFeedback,
|
|
5725
|
+
_a$1);
|
|
5720
5726
|
var buildInfoText = function (name, age, months) {
|
|
5721
5727
|
var infoText = age ? "".concat(name, ", ").concat(age) : name;
|
|
5722
5728
|
return months ? "".concat(infoText, " | ").concat(months, " months") : infoText;
|
|
@@ -5724,13 +5730,13 @@ var buildInfoText = function (name, age, months) {
|
|
|
5724
5730
|
var BeforeAfterCard = function (_a) {
|
|
5725
5731
|
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 ? ComponentSize.Small : _d, _e = _a.variant, variant = _e === void 0 ? BeforeAfterVariant.UserInfoText : _e, rest = __rest(_a, ["name", "age", "months", "beforeImage", "afterImage", "alignCenter", "imageBorderRadius", "size", "variant"]);
|
|
5726
5732
|
var theme = useTheme();
|
|
5727
|
-
var stylesBySize = getStylesBySize$
|
|
5733
|
+
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5728
5734
|
var infoText = buildInfoText(name, age, months);
|
|
5729
5735
|
var Component = componentByVariant[variant];
|
|
5730
|
-
return (jsxs$1(Container$
|
|
5736
|
+
return (jsxs$1(Container$Y, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5731
5737
|
};
|
|
5732
5738
|
|
|
5733
|
-
var Section = newStyled.div(templateObject_1$
|
|
5739
|
+
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) {
|
|
5734
5740
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5735
5741
|
});
|
|
5736
5742
|
var CardHeader = function (_a) {
|
|
@@ -5741,16 +5747,16 @@ var CardFooter = function (_a) {
|
|
|
5741
5747
|
var children = _a.children;
|
|
5742
5748
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
5743
5749
|
};
|
|
5744
|
-
var templateObject_1$
|
|
5750
|
+
var templateObject_1$1r;
|
|
5745
5751
|
|
|
5746
|
-
var Body = newStyled.div(templateObject_1$
|
|
5752
|
+
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"])));
|
|
5747
5753
|
var CardBody = function (_a) {
|
|
5748
5754
|
var children = _a.children;
|
|
5749
5755
|
return jsx$1(Body, { children: children }, void 0);
|
|
5750
5756
|
};
|
|
5751
|
-
var templateObject_1$
|
|
5757
|
+
var templateObject_1$1q;
|
|
5752
5758
|
|
|
5753
|
-
var Container$
|
|
5759
|
+
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) {
|
|
5754
5760
|
var flex = _a.flex;
|
|
5755
5761
|
return flex &&
|
|
5756
5762
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5765,45 +5771,51 @@ var Container$Y = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __
|
|
|
5765
5771
|
var Card$1 = function (_a) {
|
|
5766
5772
|
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;
|
|
5767
5773
|
var theme = useTheme();
|
|
5768
|
-
return (jsx$1(Container$
|
|
5774
|
+
return (jsx$1(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));
|
|
5769
5775
|
};
|
|
5770
5776
|
var Card$2 = Object.assign(Card$1, {
|
|
5771
5777
|
Header: CardHeader,
|
|
5772
5778
|
Footer: CardFooter,
|
|
5773
5779
|
Body: CardBody,
|
|
5774
5780
|
});
|
|
5775
|
-
var templateObject_1$
|
|
5781
|
+
var templateObject_1$1p;
|
|
5782
|
+
|
|
5783
|
+
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"])));
|
|
5784
|
+
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"])));
|
|
5785
|
+
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) {
|
|
5786
|
+
var color = _a.color;
|
|
5787
|
+
return color;
|
|
5788
|
+
});
|
|
5789
|
+
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"])));
|
|
5790
|
+
var templateObject_1$1o, templateObject_2$W, templateObject_3$L, templateObject_4$z;
|
|
5776
5791
|
|
|
5777
|
-
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"])));
|
|
5778
|
-
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"])));
|
|
5779
5792
|
var Minimalistic = function (_a) {
|
|
5780
5793
|
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;
|
|
5781
5794
|
var theme = useTheme();
|
|
5782
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(
|
|
5783
|
-
};
|
|
5784
|
-
var templateObject_1$1n, templateObject_2$V;
|
|
5795
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5796
|
+
};
|
|
5785
5797
|
|
|
5786
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
5787
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5798
|
+
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"])));
|
|
5799
|
+
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; });
|
|
5788
5800
|
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; });
|
|
5789
5801
|
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"])));
|
|
5790
5802
|
var Simple = function (_a) {
|
|
5791
5803
|
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;
|
|
5792
5804
|
var theme = useTheme();
|
|
5793
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$W, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "
|
|
5805
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$W, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5794
5806
|
};
|
|
5795
|
-
var templateObject_1$
|
|
5807
|
+
var templateObject_1$1n, templateObject_2$V, templateObject_3$K, templateObject_4$y;
|
|
5796
5808
|
|
|
5797
5809
|
var Bundle = {
|
|
5798
5810
|
Minimalistic: Minimalistic,
|
|
5799
5811
|
Simple: Simple,
|
|
5800
5812
|
};
|
|
5801
5813
|
|
|
5802
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
5814
|
+
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) {
|
|
5803
5815
|
var displayBNPL = _a.displayBNPL;
|
|
5804
5816
|
return (displayBNPL ? 'flex' : 'none');
|
|
5805
5817
|
});
|
|
5806
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5818
|
+
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"])));
|
|
5807
5819
|
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"])));
|
|
5808
5820
|
var BuyNowPayLater = function (_a) {
|
|
5809
5821
|
var _b;
|
|
@@ -5816,41 +5828,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
5816
5828
|
}
|
|
5817
5829
|
return (jsx$1(Container$V, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5818
5830
|
};
|
|
5819
|
-
var templateObject_1$
|
|
5831
|
+
var templateObject_1$1m, templateObject_2$U, templateObject_3$J;
|
|
5820
5832
|
|
|
5821
|
-
var Text$7 = newStyled.span(templateObject_1$
|
|
5833
|
+
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; });
|
|
5822
5834
|
var Title$5 = function (_a) {
|
|
5823
5835
|
var title = _a.title;
|
|
5824
5836
|
var theme = useTheme();
|
|
5825
5837
|
return jsx$1(Text$7, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5826
5838
|
};
|
|
5827
|
-
var templateObject_1$
|
|
5839
|
+
var templateObject_1$1l;
|
|
5828
5840
|
|
|
5829
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5841
|
+
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; });
|
|
5830
5842
|
var Promo = function (_a) {
|
|
5831
5843
|
var text = _a.text;
|
|
5832
5844
|
var theme = useTheme();
|
|
5833
5845
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5834
5846
|
};
|
|
5835
|
-
var templateObject_1$
|
|
5847
|
+
var templateObject_1$1k;
|
|
5836
5848
|
|
|
5837
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5849
|
+
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; });
|
|
5838
5850
|
var Description$1 = function (_a) {
|
|
5839
5851
|
var text = _a.text;
|
|
5840
5852
|
var theme = useTheme();
|
|
5841
5853
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5842
5854
|
};
|
|
5843
|
-
var templateObject_1$
|
|
5855
|
+
var templateObject_1$1j;
|
|
5844
5856
|
|
|
5845
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
5857
|
+
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"); });
|
|
5846
5858
|
var CloseButton$1 = function (_a) {
|
|
5847
5859
|
var onClick = _a.onClick, size = _a.size;
|
|
5848
5860
|
var theme = useTheme();
|
|
5849
5861
|
return (jsx$1(Container$U, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
5850
5862
|
};
|
|
5851
|
-
var templateObject_1$
|
|
5863
|
+
var templateObject_1$1i;
|
|
5852
5864
|
|
|
5853
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
5865
|
+
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) {
|
|
5854
5866
|
var backgroundColor = _a.backgroundColor;
|
|
5855
5867
|
return backgroundColor;
|
|
5856
5868
|
}, function (_a) {
|
|
@@ -5865,7 +5877,7 @@ var OfferBanner = function (_a) {
|
|
|
5865
5877
|
var theme = useTheme();
|
|
5866
5878
|
return (jsx$1(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));
|
|
5867
5879
|
};
|
|
5868
|
-
var templateObject_1$
|
|
5880
|
+
var templateObject_1$1h;
|
|
5869
5881
|
|
|
5870
5882
|
var CartProductItem = {
|
|
5871
5883
|
Title: Title$5,
|
|
@@ -5875,7 +5887,7 @@ var CartProductItem = {
|
|
|
5875
5887
|
CloseButton: CloseButton$1,
|
|
5876
5888
|
};
|
|
5877
5889
|
|
|
5878
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
5890
|
+
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) {
|
|
5879
5891
|
var height = _a.height;
|
|
5880
5892
|
return (height ? height : '1.5em');
|
|
5881
5893
|
}, function (_a) {
|
|
@@ -5902,22 +5914,22 @@ var SkeletonBox = function (_a) {
|
|
|
5902
5914
|
var theme = useTheme();
|
|
5903
5915
|
return jsx$1(Container$T, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
5904
5916
|
};
|
|
5905
|
-
var templateObject_1$
|
|
5917
|
+
var templateObject_1$1g;
|
|
5906
5918
|
|
|
5907
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
5908
|
-
var MobileContainer = newStyled(Container$S)(templateObject_2$
|
|
5919
|
+
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"])));
|
|
5920
|
+
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"])));
|
|
5909
5921
|
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"])));
|
|
5910
5922
|
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"])));
|
|
5911
5923
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
5912
5924
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
5913
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
5914
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
5925
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
5926
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
5915
5927
|
var ClubPriceLabel = function (_a) {
|
|
5916
5928
|
var clubPrice = _a.clubPrice;
|
|
5917
5929
|
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
5918
5930
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$S, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
5919
5931
|
};
|
|
5920
|
-
var templateObject_1$
|
|
5932
|
+
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;
|
|
5921
5933
|
|
|
5922
5934
|
var Spacing = function (_a) {
|
|
5923
5935
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -5925,8 +5937,8 @@ var Spacing = function (_a) {
|
|
|
5925
5937
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
5926
5938
|
};
|
|
5927
5939
|
|
|
5928
|
-
var Container$R = newStyled('div')(templateObject_1$
|
|
5929
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
5940
|
+
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"])));
|
|
5941
|
+
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"])));
|
|
5930
5942
|
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"])));
|
|
5931
5943
|
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) {
|
|
5932
5944
|
var index = _a.index;
|
|
@@ -5939,12 +5951,12 @@ var StrengthBars = function (_a) {
|
|
|
5939
5951
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
5940
5952
|
return (jsxs$1(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
5941
5953
|
};
|
|
5942
|
-
var templateObject_1$
|
|
5954
|
+
var templateObject_1$1e, templateObject_2$S, templateObject_3$H, templateObject_4$w;
|
|
5943
5955
|
|
|
5944
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
5945
|
-
var templateObject_1$
|
|
5956
|
+
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"])));
|
|
5957
|
+
var templateObject_1$1d;
|
|
5946
5958
|
|
|
5947
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
5959
|
+
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) {
|
|
5948
5960
|
var marginRight = _a.marginRight;
|
|
5949
5961
|
return marginRight;
|
|
5950
5962
|
});
|
|
@@ -5960,7 +5972,7 @@ var StarList = function (_a) {
|
|
|
5960
5972
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
5961
5973
|
}) }, void 0));
|
|
5962
5974
|
};
|
|
5963
|
-
var templateObject_1$
|
|
5975
|
+
var templateObject_1$1c;
|
|
5964
5976
|
|
|
5965
5977
|
/* base styles & size variants */
|
|
5966
5978
|
var LabelStyles = {
|
|
@@ -6001,8 +6013,8 @@ var LabelStyles = {
|
|
|
6001
6013
|
});
|
|
6002
6014
|
},
|
|
6003
6015
|
};
|
|
6004
|
-
var Container$P = newStyled.a(templateObject_1$
|
|
6005
|
-
var templateObject_1$
|
|
6016
|
+
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"])));
|
|
6017
|
+
var templateObject_1$1b;
|
|
6006
6018
|
|
|
6007
6019
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6008
6020
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6053,11 +6065,11 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6053
6065
|
height: height,
|
|
6054
6066
|
});
|
|
6055
6067
|
});
|
|
6056
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6057
|
-
var Container$O = newStyled.a(templateObject_2$
|
|
6068
|
+
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"])));
|
|
6069
|
+
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"])));
|
|
6058
6070
|
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"])));
|
|
6059
6071
|
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; });
|
|
6060
|
-
var getStylesBySize$
|
|
6072
|
+
var getStylesBySize$9 = function (size) {
|
|
6061
6073
|
switch (size) {
|
|
6062
6074
|
case ComponentSize.Medium:
|
|
6063
6075
|
return {
|
|
@@ -6090,7 +6102,7 @@ var BottomTagContainer$4 = newStyled.div(templateObject_6$j || (templateObject_6
|
|
|
6090
6102
|
var style = _a.style;
|
|
6091
6103
|
return style.width;
|
|
6092
6104
|
});
|
|
6093
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6105
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6094
6106
|
var ProductItemMobile = function (_a) {
|
|
6095
6107
|
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 ? {
|
|
6096
6108
|
display: false,
|
|
@@ -6110,7 +6122,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6110
6122
|
description: '',
|
|
6111
6123
|
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading;
|
|
6112
6124
|
var theme = useTheme();
|
|
6113
|
-
var styles = getStylesBySize$
|
|
6125
|
+
var styles = getStylesBySize$9(size);
|
|
6114
6126
|
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
6115
6127
|
var space = useMemo(function () {
|
|
6116
6128
|
var _a;
|
|
@@ -6142,7 +6154,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6142
6154
|
};
|
|
6143
6155
|
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));
|
|
6144
6156
|
};
|
|
6145
|
-
var templateObject_1$
|
|
6157
|
+
var templateObject_1$1a, templateObject_2$R, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6146
6158
|
|
|
6147
6159
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6148
6160
|
var width = _a.width, height = _a.height;
|
|
@@ -6152,11 +6164,11 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6152
6164
|
height: height,
|
|
6153
6165
|
});
|
|
6154
6166
|
});
|
|
6155
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6156
|
-
var Container$N = newStyled.a(templateObject_2$
|
|
6167
|
+
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; });
|
|
6168
|
+
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"])));
|
|
6157
6169
|
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"])));
|
|
6158
6170
|
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; });
|
|
6159
|
-
var getStylesBySize$
|
|
6171
|
+
var getStylesBySize$8 = function (size) {
|
|
6160
6172
|
switch (size) {
|
|
6161
6173
|
case ComponentSize.Medium:
|
|
6162
6174
|
return {
|
|
@@ -6189,7 +6201,7 @@ var BottomTagContainer$3 = newStyled.div(templateObject_6$i || (templateObject_6
|
|
|
6189
6201
|
var style = _a.style;
|
|
6190
6202
|
return style.width;
|
|
6191
6203
|
});
|
|
6192
|
-
var MarginTopContainer = newStyled.div(templateObject_7$
|
|
6204
|
+
var MarginTopContainer = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6193
6205
|
var ProductItemTK = function (_a) {
|
|
6194
6206
|
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 ? {
|
|
6195
6207
|
display: false,
|
|
@@ -6209,7 +6221,7 @@ var ProductItemTK = function (_a) {
|
|
|
6209
6221
|
description: '',
|
|
6210
6222
|
} : _h, _j = _a.clubPrice, clubPrice = _j === void 0 ? '' : _j, _k = _a.showClubPriceLabel, showClubPriceLabel = _k === void 0 ? false : _k;
|
|
6211
6223
|
var theme = useTheme();
|
|
6212
|
-
var styles = getStylesBySize$
|
|
6224
|
+
var styles = getStylesBySize$8(size);
|
|
6213
6225
|
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
6214
6226
|
var space = useMemo(function () {
|
|
6215
6227
|
var _a;
|
|
@@ -6240,9 +6252,9 @@ var ProductItemTK = function (_a) {
|
|
|
6240
6252
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6241
6253
|
} }, { 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));
|
|
6242
6254
|
};
|
|
6243
|
-
var templateObject_1$
|
|
6255
|
+
var templateObject_1$19, templateObject_2$Q, templateObject_3$F, templateObject_4$u, templateObject_5$k, templateObject_6$i, templateObject_7$c;
|
|
6244
6256
|
|
|
6245
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
6257
|
+
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"])));
|
|
6246
6258
|
function withProductGrid(ProductItemComponent, data) {
|
|
6247
6259
|
function WithProductGrid(props) {
|
|
6248
6260
|
return (jsx$1(Container$M, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6252,7 +6264,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6252
6264
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6253
6265
|
return WithProductGrid;
|
|
6254
6266
|
}
|
|
6255
|
-
var templateObject_1$
|
|
6267
|
+
var templateObject_1$18;
|
|
6256
6268
|
|
|
6257
6269
|
var Collection = {
|
|
6258
6270
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6299,8 +6311,8 @@ var OutOfStock = function (_a) {
|
|
|
6299
6311
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6300
6312
|
};
|
|
6301
6313
|
|
|
6302
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6303
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6314
|
+
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"])));
|
|
6315
|
+
newStyled(lt.Label)(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6304
6316
|
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"])));
|
|
6305
6317
|
var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6306
6318
|
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"])));
|
|
@@ -6321,23 +6333,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6321
6333
|
Option: Option,
|
|
6322
6334
|
OptionsContainer: OptionsContainer,
|
|
6323
6335
|
});
|
|
6324
|
-
var templateObject_1$
|
|
6336
|
+
var templateObject_1$17, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$j;
|
|
6325
6337
|
|
|
6326
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
6338
|
+
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) {
|
|
6327
6339
|
var borderColor = _a.borderColor;
|
|
6328
6340
|
return borderColor;
|
|
6329
6341
|
}, function (_a) {
|
|
6330
6342
|
var noStock = _a.noStock;
|
|
6331
6343
|
return (noStock ? '0.4' : '1');
|
|
6332
6344
|
});
|
|
6333
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6345
|
+
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"])));
|
|
6334
6346
|
var PatternSelector = function (_a) {
|
|
6335
6347
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6336
6348
|
var theme = useTheme();
|
|
6337
6349
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6338
6350
|
return (jsx$1(Container$L, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6339
6351
|
};
|
|
6340
|
-
var templateObject_1$
|
|
6352
|
+
var templateObject_1$16, templateObject_2$O;
|
|
6341
6353
|
|
|
6342
6354
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6343
6355
|
if (options == null || options.length === 0) {
|
|
@@ -6395,8 +6407,8 @@ var SingleColorPicker = function (_a) {
|
|
|
6395
6407
|
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));
|
|
6396
6408
|
};
|
|
6397
6409
|
|
|
6398
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6399
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6410
|
+
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'); });
|
|
6411
|
+
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"])));
|
|
6400
6412
|
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) {
|
|
6401
6413
|
return props.rightToLeft &&
|
|
6402
6414
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
@@ -6409,7 +6421,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
6409
6421
|
var theme = useTheme();
|
|
6410
6422
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$1, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6411
6423
|
};
|
|
6412
|
-
var templateObject_1$
|
|
6424
|
+
var templateObject_1$15, templateObject_2$N, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$h;
|
|
6413
6425
|
|
|
6414
6426
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6415
6427
|
__proto__: null,
|
|
@@ -6430,39 +6442,45 @@ var BaseButton = function (_a) {
|
|
|
6430
6442
|
}, id: id }, { children: [renderLeading, children, renderTrailing] }), void 0));
|
|
6431
6443
|
};
|
|
6432
6444
|
|
|
6433
|
-
var
|
|
6434
|
-
|
|
6435
|
-
|
|
6436
|
-
|
|
6437
|
-
|
|
6438
|
-
|
|
6439
|
-
|
|
6440
|
-
|
|
6441
|
-
|
|
6442
|
-
|
|
6443
|
-
|
|
6444
|
-
|
|
6445
|
-
|
|
6446
|
-
|
|
6447
|
-
|
|
6448
|
-
|
|
6449
|
-
|
|
6450
|
-
|
|
6451
|
-
|
|
6452
|
-
|
|
6453
|
-
|
|
6454
|
-
|
|
6455
|
-
|
|
6456
|
-
|
|
6445
|
+
var _a;
|
|
6446
|
+
var sizeMapper = (_a = {},
|
|
6447
|
+
_a[ComponentSize.Small] = 'small',
|
|
6448
|
+
_a[ComponentSize.Medium] = 'medium',
|
|
6449
|
+
_a[ComponentSize.Large] = 'large',
|
|
6450
|
+
_a[ComponentSize.XSmall] = 'small',
|
|
6451
|
+
_a);
|
|
6452
|
+
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"], ["\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"])), function (_a) {
|
|
6453
|
+
var wide = _a.wide;
|
|
6454
|
+
return (wide ? '100%' : 'fit-content');
|
|
6455
|
+
}, function (_a) {
|
|
6456
|
+
var theme = _a.theme, size = _a.size;
|
|
6457
|
+
return theme.component.button.size[sizeMapper[size]].fontSize;
|
|
6458
|
+
}, function (_a) {
|
|
6459
|
+
var theme = _a.theme, size = _a.size;
|
|
6460
|
+
return theme.component.button.size[sizeMapper[size]].padding;
|
|
6461
|
+
}, function (_a) {
|
|
6462
|
+
var theme = _a.theme;
|
|
6463
|
+
return theme.component.button.fontWeight;
|
|
6464
|
+
}, function (_a) {
|
|
6465
|
+
var theme = _a.theme;
|
|
6466
|
+
return theme.component.button.borderRadius;
|
|
6467
|
+
}, function (_a) {
|
|
6468
|
+
var theme = _a.theme;
|
|
6469
|
+
return theme.colors.background.disabled;
|
|
6470
|
+
}, function (_a) {
|
|
6471
|
+
var theme = _a.theme;
|
|
6472
|
+
return theme.colors.text.disabled;
|
|
6473
|
+
});
|
|
6474
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n margin-right: 10px;\n ", ":hover & {\n color: ", ";\n }\n"], ["\n margin-right: 10px;\n ", ":hover & {\n color: ", ";\n }\n"])), StyledBaseButton, function (_a) {
|
|
6475
|
+
var theme = _a.theme;
|
|
6476
|
+
return theme.colors.shades[700].color;
|
|
6477
|
+
});
|
|
6478
|
+
var templateObject_1$14, templateObject_2$M;
|
|
6479
|
+
|
|
6457
6480
|
var BaseCTA = function (_a) {
|
|
6458
|
-
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, props = __rest(_a, ["text", "wide", "size"]);
|
|
6481
|
+
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
6459
6482
|
var theme = useTheme();
|
|
6460
|
-
|
|
6461
|
-
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': {
|
|
6462
|
-
backgroundColor: theme.colors.background.disabled,
|
|
6463
|
-
color: theme.colors.text.disabled,
|
|
6464
|
-
cursor: 'not-allowed',
|
|
6465
|
-
} }) }, { children: text }), void 0));
|
|
6483
|
+
return (jsxs$1(StyledBaseButton, __assign$1({}, props, { wide: wide, size: size }, { children: [iconName && (jsx$1(StyledIcon, { fill: theme.colors.shades.white.color, name: iconName, width: "24px", height: "24px" }, void 0)), text] }), void 0));
|
|
6466
6484
|
};
|
|
6467
6485
|
|
|
6468
6486
|
var ButtonPrimary = function (_a) {
|
|
@@ -6561,7 +6579,7 @@ var SectionTitle = newStyled.h1(templateObject_6$g || (templateObject_6$g = __ma
|
|
|
6561
6579
|
var theme = _a.theme;
|
|
6562
6580
|
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 ");
|
|
6563
6581
|
});
|
|
6564
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
6582
|
+
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) {
|
|
6565
6583
|
var theme = _a.theme;
|
|
6566
6584
|
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 ");
|
|
6567
6585
|
}, function (_a) {
|
|
@@ -6572,24 +6590,33 @@ var SectionDetails = newStyled.p(templateObject_7$a || (templateObject_7$a = __m
|
|
|
6572
6590
|
})
|
|
6573
6591
|
: '';
|
|
6574
6592
|
});
|
|
6575
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
6593
|
+
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; });
|
|
6576
6594
|
var DeliveryDetails = function (_a) {
|
|
6577
6595
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6578
6596
|
var theme = useTheme();
|
|
6579
6597
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6580
6598
|
};
|
|
6581
|
-
var templateObject_1$12, templateObject_2$K, templateObject_3$B, templateObject_4$q, templateObject_5$h, templateObject_6$g, templateObject_7$
|
|
6599
|
+
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;
|
|
6582
6600
|
|
|
6583
|
-
var Backdrop = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top:
|
|
6601
|
+
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) {
|
|
6602
|
+
var top = _a.top;
|
|
6603
|
+
return top;
|
|
6604
|
+
}, function (_a) {
|
|
6584
6605
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6585
6606
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6586
6607
|
});
|
|
6587
|
-
var Sidebar = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n height:
|
|
6608
|
+
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) {
|
|
6609
|
+
var height = _a.height;
|
|
6610
|
+
return height;
|
|
6611
|
+
}, function (_a) {
|
|
6588
6612
|
var width = _a.width;
|
|
6589
6613
|
return width;
|
|
6590
6614
|
}, function (_a) {
|
|
6591
6615
|
var position = _a.position;
|
|
6592
6616
|
return position;
|
|
6617
|
+
}, function (_a) {
|
|
6618
|
+
var top = _a.top;
|
|
6619
|
+
return top;
|
|
6593
6620
|
}, function (_a) {
|
|
6594
6621
|
var backgroundColor = _a.backgroundColor;
|
|
6595
6622
|
return backgroundColor;
|
|
@@ -6600,9 +6627,9 @@ var Sidebar = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTe
|
|
|
6600
6627
|
: "transform: translateX(".concat(position === 'left' ? '-100%' : '100%', ");");
|
|
6601
6628
|
});
|
|
6602
6629
|
var Drawer = function (_a) {
|
|
6603
|
-
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;
|
|
6604
|
-
var
|
|
6605
|
-
var
|
|
6630
|
+
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;
|
|
6631
|
+
var _h = useState(isOpen), isOpenState = _h[0], setIsOpen = _h[1];
|
|
6632
|
+
var _j = useState(isOpen), isMounted = _j[0], setIsMounted = _j[1];
|
|
6606
6633
|
useEffect(function () {
|
|
6607
6634
|
if (isOpen === false) {
|
|
6608
6635
|
setIsOpen(isOpen);
|
|
@@ -6623,7 +6650,7 @@ var Drawer = function (_a) {
|
|
|
6623
6650
|
clearTimeout(timeout);
|
|
6624
6651
|
};
|
|
6625
6652
|
}, [isOpen, onClose, onOpen]);
|
|
6626
|
-
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
6653
|
+
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
6627
6654
|
};
|
|
6628
6655
|
var templateObject_1$11, templateObject_2$J;
|
|
6629
6656
|
|
|
@@ -6738,11 +6765,11 @@ var MobileHeader = newStyled.div(templateObject_3$w || (templateObject_3$w = __m
|
|
|
6738
6765
|
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"])));
|
|
6739
6766
|
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; });
|
|
6740
6767
|
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; });
|
|
6741
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
6742
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
6768
|
+
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'); });
|
|
6769
|
+
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; });
|
|
6743
6770
|
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"])));
|
|
6744
6771
|
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"])));
|
|
6745
|
-
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$l, templateObject_5$e, templateObject_6$d, templateObject_7$
|
|
6772
|
+
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;
|
|
6746
6773
|
|
|
6747
6774
|
var getStylesBySize$7 = function (size, theme) {
|
|
6748
6775
|
switch (size) {
|
|
@@ -6814,13 +6841,13 @@ var Tags = function (_a) {
|
|
|
6814
6841
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
6815
6842
|
var theme = useTheme();
|
|
6816
6843
|
return (jsx$1(UL, __assign$1({ "data-testid": "tags-ul" }, { children: items.map(function (item, index) {
|
|
6817
|
-
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
6844
|
+
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
6818
6845
|
}) }), void 0));
|
|
6819
6846
|
};
|
|
6820
6847
|
var templateObject_1$X, templateObject_2$D, templateObject_3$v;
|
|
6821
6848
|
|
|
6822
6849
|
var Filters = function (_a) {
|
|
6823
|
-
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;
|
|
6850
|
+
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;
|
|
6824
6851
|
var getInitialCheckedItems = function () {
|
|
6825
6852
|
var checkedItems = [];
|
|
6826
6853
|
values.forEach(function (filter, sectionIndex) {
|
|
@@ -6828,6 +6855,7 @@ var Filters = function (_a) {
|
|
|
6828
6855
|
if (item.checked && !item.blockUncheck) {
|
|
6829
6856
|
checkedItems.push({
|
|
6830
6857
|
sectionIndex: sectionIndex,
|
|
6858
|
+
sectionTitle: item.label,
|
|
6831
6859
|
itemIndex: itemIndex,
|
|
6832
6860
|
label: item.label,
|
|
6833
6861
|
});
|
|
@@ -6837,9 +6865,9 @@ var Filters = function (_a) {
|
|
|
6837
6865
|
return checkedItems;
|
|
6838
6866
|
};
|
|
6839
6867
|
var theme = useTheme();
|
|
6840
|
-
var
|
|
6841
|
-
var
|
|
6842
|
-
var
|
|
6868
|
+
var _d = useState(values), filters = _d[0], setFilter = _d[1];
|
|
6869
|
+
var _e = useState(getInitialCheckedItems()), checkedItems = _e[0], setCheckedItems = _e[1];
|
|
6870
|
+
var _f = useState(), filterState = _f[0], setFilterSection = _f[1];
|
|
6843
6871
|
useEffect(function () {
|
|
6844
6872
|
if (filters.length && filterState) {
|
|
6845
6873
|
onChange(filters, filterState);
|
|
@@ -6868,7 +6896,12 @@ var Filters = function (_a) {
|
|
|
6868
6896
|
}
|
|
6869
6897
|
return checked
|
|
6870
6898
|
? __spreadArray(__spreadArray([], (currentFilter.isMultiselect ? prev : []), true), [
|
|
6871
|
-
{
|
|
6899
|
+
{
|
|
6900
|
+
sectionIndex: sectionIndex,
|
|
6901
|
+
itemIndex: itemIndex,
|
|
6902
|
+
label: filters[sectionIndex].items[itemIndex].label,
|
|
6903
|
+
sectionTitle: filters[sectionIndex].title,
|
|
6904
|
+
},
|
|
6872
6905
|
], false) : prev.filter(function (item) { return item.sectionIndex !== sectionIndex || item.itemIndex !== itemIndex; });
|
|
6873
6906
|
});
|
|
6874
6907
|
setFilter(function (prev) {
|
|
@@ -6899,25 +6932,38 @@ var Filters = function (_a) {
|
|
|
6899
6932
|
});
|
|
6900
6933
|
onResetValues();
|
|
6901
6934
|
};
|
|
6935
|
+
var getItemsSelectedNumberText = function (filter) {
|
|
6936
|
+
var itemsSelectedNumber = 0;
|
|
6937
|
+
var itemsSelectedNumberText = '';
|
|
6938
|
+
if (showSelectedNumberInSection) {
|
|
6939
|
+
itemsSelectedNumber = checkedItems.filter(function (x) { return x.sectionTitle == filter.title; }).length;
|
|
6940
|
+
itemsSelectedNumberText =
|
|
6941
|
+
itemsSelectedNumber > 0 && showSelectedNumberInSection ? "(".concat(itemsSelectedNumber, ")") : '';
|
|
6942
|
+
}
|
|
6943
|
+
return itemsSelectedNumberText;
|
|
6944
|
+
};
|
|
6902
6945
|
return (jsxs$1(Fragment$2, { children: [!isMobile ? (jsx$1("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: !!checkedItems.length && (jsxs$1(Fragment$2, { children: [jsxs$1(Header$1, { children: [jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsx$1(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsx$1(Tags, { color: tagsColor, items: checkedItems.map(function (item) {
|
|
6903
6946
|
return item.label === '$75 And Above' ? '+$75' : item.label;
|
|
6904
6947
|
}), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }, void 0)) }), void 0)) : (jsxs$1(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsx$1(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), !!checkedItems.length && (jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0))] }), void 0)), filters
|
|
6905
6948
|
.filter(function (filter) { return filter.isLinkOption; })
|
|
6906
|
-
.map(function (option, index) { return (jsx$1(OptionContainer, __assign$1({ showInMobile: option.showInMobile, "data-testid": "linkOption" }, { children: jsx$1(FilterLink, __assign$1({ color: option.color || theme.colors.shades['550'].color, href: option.link }, { children: option.title }), void 0) }), index)); }), filters
|
|
6949
|
+
.map(function (option, index) { return (jsx$1(OptionContainer, __assign$1({ showInMobile: option.showInMobile, showInTablet: option.showInTablet, "data-testid": "linkOption" }, { children: jsx$1(FilterLink, __assign$1({ color: option.color || theme.colors.shades['550'].color, href: option.link }, { children: option.title }), void 0) }), "option-container-".concat(index))); }), filters
|
|
6907
6950
|
.filter(function (filter) { return !filter.isLinkOption; })
|
|
6908
|
-
.map(function (filter) {
|
|
6909
|
-
|
|
6910
|
-
|
|
6911
|
-
|
|
6912
|
-
|
|
6913
|
-
|
|
6914
|
-
|
|
6915
|
-
|
|
6916
|
-
|
|
6917
|
-
|
|
6918
|
-
|
|
6919
|
-
|
|
6920
|
-
|
|
6951
|
+
.map(function (filter) {
|
|
6952
|
+
var itemsSelectedNumberText = getItemsSelectedNumberText(filter);
|
|
6953
|
+
return (jsx$1(Accordion, __assign$1({ title: "".concat(filter.title, " ").concat(itemsSelectedNumberText), isOpenByDefault: filter.isOpenByDefault, showInMobile: filter.showInMobile }, { children: jsxs$1(SectionContent, __assign$1({ cols: filter.columns }, { children: [filter.type === 'size' &&
|
|
6954
|
+
filter.items.map(function (item, itemIndex) {
|
|
6955
|
+
var calculatedSectionIndex = filters.findIndex(function (filt) { return filt.title === filter.title; });
|
|
6956
|
+
return (jsx$1(SelectorSecondary, { size: ComponentSize.Medium, text: item.label, active: item.checked, disabled: item.blockUncheck, onClick: function () {
|
|
6957
|
+
return handleCheckboxClick({
|
|
6958
|
+
sectionIndex: calculatedSectionIndex,
|
|
6959
|
+
itemIndex: itemIndex,
|
|
6960
|
+
checked: !item.checked,
|
|
6961
|
+
});
|
|
6962
|
+
}, width: "50px", id: "filter[".concat(calculatedSectionIndex, ",").concat(itemIndex, "]") }, item.label));
|
|
6963
|
+
}), filter.type === 'color' &&
|
|
6964
|
+
filter.items.map(function (item, itemIndex) { return (jsx$1(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 &&
|
|
6965
|
+
filter.items.map(function (item, itemIndex) { return (jsx$1(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; })));
|
|
6966
|
+
}), isMobile && (jsxs$1(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxs$1(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsx$1(MobileIconsContainer, { children: jsx$1(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsx$1(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsx$1(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
|
|
6921
6967
|
};
|
|
6922
6968
|
var FilterCheckbox = function (_a) {
|
|
6923
6969
|
var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked, blockUncheck = _a.blockUncheck;
|
|
@@ -11311,8 +11357,8 @@ var Container$G = newStyled.div(templateObject_3$u || (templateObject_3$u = __ma
|
|
|
11311
11357
|
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"])));
|
|
11312
11358
|
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"])));
|
|
11313
11359
|
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"])));
|
|
11314
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11315
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11360
|
+
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"])));
|
|
11361
|
+
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"])));
|
|
11316
11362
|
var ImagePreviewList = function (_a) {
|
|
11317
11363
|
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;
|
|
11318
11364
|
var handleScrollVerticalPrev = function () {
|
|
@@ -11329,7 +11375,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11329
11375
|
arrowPadding: 1.625,
|
|
11330
11376
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.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 (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11331
11377
|
};
|
|
11332
|
-
var templateObject_1$S, templateObject_2$A, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$
|
|
11378
|
+
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;
|
|
11333
11379
|
|
|
11334
11380
|
var propTypes = {exports: {}};
|
|
11335
11381
|
|
|
@@ -12932,7 +12978,7 @@ var BottomTagContainer$2 = newStyled.div(templateObject_3$t || (templateObject_3
|
|
|
12932
12978
|
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"])));
|
|
12933
12979
|
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"])));
|
|
12934
12980
|
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"])));
|
|
12935
|
-
var Text$3 = newStyled.div(templateObject_7$
|
|
12981
|
+
var Text$3 = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
12936
12982
|
var ImageProductWithTags$1 = function (_a) {
|
|
12937
12983
|
var _b, _c;
|
|
12938
12984
|
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;
|
|
@@ -12941,9 +12987,9 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
12941
12987
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
12942
12988
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(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')) && (jsxs$1(Fragment$2, { children: [jsx$1(Video$1, { children: jsx$1("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), jsxs$1(VideoTag$1, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsx$1(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
12943
12989
|
};
|
|
12944
|
-
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$
|
|
12990
|
+
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
12945
12991
|
|
|
12946
|
-
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:
|
|
12992
|
+
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"])));
|
|
12947
12993
|
var ProductGallery = function (_a) {
|
|
12948
12994
|
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;
|
|
12949
12995
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -13330,8 +13376,8 @@ var BottomTagContainer$1 = newStyled.div(templateObject_3$p || (templateObject_3
|
|
|
13330
13376
|
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"])));
|
|
13331
13377
|
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"])));
|
|
13332
13378
|
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"])));
|
|
13333
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
13334
|
-
var NavButtonContainer = newStyled.div(templateObject_8$
|
|
13379
|
+
var Text$2 = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13380
|
+
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"])));
|
|
13335
13381
|
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"])));
|
|
13336
13382
|
var settings = {
|
|
13337
13383
|
dots: true,
|
|
@@ -13425,7 +13471,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13425
13471
|
};
|
|
13426
13472
|
}, [preventTouch, ref, touchStart]);
|
|
13427
13473
|
}
|
|
13428
|
-
var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$
|
|
13474
|
+
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;
|
|
13429
13475
|
|
|
13430
13476
|
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"])));
|
|
13431
13477
|
var ProductGalleryMobile = function (_a) {
|
|
@@ -17825,8 +17871,8 @@ var Tag$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemp
|
|
|
17825
17871
|
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"])));
|
|
17826
17872
|
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"])));
|
|
17827
17873
|
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"])));
|
|
17828
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
17829
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
17874
|
+
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"])));
|
|
17875
|
+
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"])));
|
|
17830
17876
|
var PackSelector = function (_a) {
|
|
17831
17877
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17832
17878
|
return (jsx$1(Container$p, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -17856,7 +17902,7 @@ var PackCard = function (_a) {
|
|
|
17856
17902
|
currency: currencyCode || 'USD',
|
|
17857
17903
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17858
17904
|
};
|
|
17859
|
-
var templateObject_1$w, templateObject_2$n, templateObject_3$l, templateObject_4$f, templateObject_5$8, templateObject_6$7, templateObject_7$
|
|
17905
|
+
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;
|
|
17860
17906
|
|
|
17861
17907
|
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"])));
|
|
17862
17908
|
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"])));
|
|
@@ -18317,8 +18363,8 @@ var StarsContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __m
|
|
|
18317
18363
|
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"])));
|
|
18318
18364
|
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"])));
|
|
18319
18365
|
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"])));
|
|
18320
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
18321
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
18366
|
+
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"])));
|
|
18367
|
+
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"])));
|
|
18322
18368
|
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"])));
|
|
18323
18369
|
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"])));
|
|
18324
18370
|
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"])));
|
|
@@ -18352,7 +18398,7 @@ var Review$1 = function (_a) {
|
|
|
18352
18398
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$h, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18353
18399
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18354
18400
|
};
|
|
18355
|
-
var templateObject_1$o, templateObject_2$h, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$
|
|
18401
|
+
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;
|
|
18356
18402
|
|
|
18357
18403
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18358
18404
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
@@ -18362,8 +18408,8 @@ var Content = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTe
|
|
|
18362
18408
|
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"])));
|
|
18363
18409
|
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"])));
|
|
18364
18410
|
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"])));
|
|
18365
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
18366
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
18411
|
+
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"])));
|
|
18412
|
+
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"])));
|
|
18367
18413
|
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"])));
|
|
18368
18414
|
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"])));
|
|
18369
18415
|
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"])));
|
|
@@ -18408,7 +18454,7 @@ var Review = function (_a) {
|
|
|
18408
18454
|
: description,
|
|
18409
18455
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
18410
18456
|
};
|
|
18411
|
-
var templateObject_1$n, templateObject_2$g, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$
|
|
18457
|
+
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;
|
|
18412
18458
|
|
|
18413
18459
|
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"])));
|
|
18414
18460
|
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"])));
|
|
@@ -18416,7 +18462,7 @@ var ReviewsCount = newStyled.div(templateObject_3$d || (templateObject_3$d = __m
|
|
|
18416
18462
|
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"])));
|
|
18417
18463
|
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"])));
|
|
18418
18464
|
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"])));
|
|
18419
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
18465
|
+
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) {
|
|
18420
18466
|
var backgroundUrl = _a.backgroundUrl;
|
|
18421
18467
|
return "url(".concat(backgroundUrl, ")");
|
|
18422
18468
|
});
|
|
@@ -18426,7 +18472,7 @@ var ReviewsHeader = function (_a) {
|
|
|
18426
18472
|
var theme = useTheme();
|
|
18427
18473
|
return (jsxs$1(Container$f, { children: [jsx$1(Text$8, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$8, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18428
18474
|
};
|
|
18429
|
-
var templateObject_1$m, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$
|
|
18475
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18430
18476
|
|
|
18431
18477
|
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"])));
|
|
18432
18478
|
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; });
|
|
@@ -19013,18 +19059,27 @@ var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __make
|
|
|
19013
19059
|
var theme = _a.theme;
|
|
19014
19060
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19015
19061
|
});
|
|
19016
|
-
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 (
|
|
19017
|
-
var
|
|
19018
|
-
|
|
19062
|
+
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) {
|
|
19063
|
+
var highlightColor = _a.highlightColor;
|
|
19064
|
+
return highlightColor;
|
|
19065
|
+
});
|
|
19066
|
+
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) {
|
|
19067
|
+
var showTotalLabel = _a.showTotalLabel;
|
|
19068
|
+
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19069
|
+
});
|
|
19070
|
+
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"])));
|
|
19071
|
+
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) {
|
|
19019
19072
|
var theme = _a.theme;
|
|
19020
19073
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19021
19074
|
});
|
|
19075
|
+
var TotalLabel = newStyled(Text$8)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19076
|
+
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;
|
|
19077
|
+
|
|
19022
19078
|
var Total = function (_a) {
|
|
19023
|
-
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
19079
|
+
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;
|
|
19024
19080
|
var theme = useTheme();
|
|
19025
|
-
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$3, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19026
|
-
};
|
|
19027
|
-
var templateObject_1$4, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2;
|
|
19081
|
+
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$3, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19082
|
+
};
|
|
19028
19083
|
|
|
19029
19084
|
var Wrapper = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19030
19085
|
var color = _a.color;
|