@trafilea/afrodita-components 6.1.0 → 6.2.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 +36 -30
- package/build/index.esm.js +392 -395
- package/build/index.esm.js.map +1 -1
- package/build/index.js +391 -394
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +3 -1
- package/build/theme/shapermint.theme.d.ts +3 -1
- package/build/theme/thespadr.theme.d.ts +3 -1
- package/build/theme/truekind.theme.d.ts +3 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3093,22 +3093,21 @@ var inline = function (text) {
|
|
|
3093
3093
|
};
|
|
3094
3094
|
|
|
3095
3095
|
var ThemeProvider = function (_a) {
|
|
3096
|
-
var theme = _a.theme, children = _a.children;
|
|
3096
|
+
var theme = _a.theme, isSameOriginIcons = _a.isSameOriginIcons, children = _a.children;
|
|
3097
|
+
//TODO Analyze why we are doing this and remove
|
|
3097
3098
|
var parsedTheme = React$2.useMemo(function () { return applyVariablesIntoTheme(theme); }, [theme]);
|
|
3098
|
-
|
|
3099
|
+
var themeWithOtherVariables = __assign$1(__assign$1({}, parsedTheme), { assets: __assign$1(__assign$1({}, parsedTheme.assets), { isSameOriginIcons: isSameOriginIcons }) });
|
|
3100
|
+
return (jsxRuntime.jsx(ThemeProvider$1, __assign$1({ theme: themeWithOtherVariables }, { children: jsxRuntime.jsx(AssetsProvider, __assign$1({ assets: themeWithOtherVariables.assets }, { children: children }), void 0) }), void 0));
|
|
3099
3101
|
};
|
|
3100
3102
|
var useTheme = function () { return useTheme$1(); };
|
|
3101
3103
|
var DefaultContainer = function (props) { return jsxRuntime.jsx("div", __assign$1({}, props), void 0); };
|
|
3102
3104
|
var ThemeVariables = function (_a) {
|
|
3103
|
-
var _b;
|
|
3104
|
-
var
|
|
3105
|
-
|
|
3106
|
-
React$2.useEffect(function () {
|
|
3107
|
-
setVariables(transformThemeIntoVariables(theme));
|
|
3108
|
-
}, [theme]);
|
|
3109
|
-
return (jsxRuntime.jsx(Container, { children: jsxRuntime.jsx("style", { "data-theme-name": ((_b = theme.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || 'unamed-theme', dangerouslySetInnerHTML: { __html: variables } }, void 0) }, void 0));
|
|
3105
|
+
var theme = _a.theme, _b = _a.Container, Container = _b === void 0 ? DefaultContainer : _b;
|
|
3106
|
+
var variables = transformThemeIntoVariables(theme);
|
|
3107
|
+
return (jsxRuntime.jsx(Container, { children: jsxRuntime.jsx("style", { "data-theme-name": theme.name.toLowerCase(), dangerouslySetInnerHTML: { __html: variables } }, void 0) }, void 0));
|
|
3110
3108
|
};
|
|
3111
3109
|
var AssetsContext = React$2.createContext({
|
|
3110
|
+
isSameOriginIcons: false,
|
|
3112
3111
|
cdn: '',
|
|
3113
3112
|
images: {
|
|
3114
3113
|
favicon: '',
|
|
@@ -3117,12 +3116,53 @@ var AssetsContext = React$2.createContext({
|
|
|
3117
3116
|
});
|
|
3118
3117
|
var AssetsProvider = function (_a) {
|
|
3119
3118
|
var assets = _a.assets, children = _a.children;
|
|
3120
|
-
|
|
3121
|
-
return jsxRuntime.jsx(AssetsContext.Provider, __assign$1({ value: context }, { children: children }), void 0);
|
|
3119
|
+
return jsxRuntime.jsx(AssetsContext.Provider, __assign$1({ value: assets }, { children: children }), void 0);
|
|
3122
3120
|
};
|
|
3123
3121
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
3124
3122
|
|
|
3125
|
-
var
|
|
3123
|
+
var formatPrice = function (value, _a) {
|
|
3124
|
+
var _b;
|
|
3125
|
+
var _c = _a === void 0 ? {} : _a, _d = _c.locale, locale = _d === void 0 ? 'en-US' : _d, _e = _c.currency, currency = _e === void 0 ? 'USD' : _e;
|
|
3126
|
+
var _f = value.toFixed(3).split('.'), integer = _f[0], fraction = _f[1];
|
|
3127
|
+
// this prevents `Intl.NumberFormat` from rounding the number
|
|
3128
|
+
var valueToFormat = parseFloat("".concat(integer, ".").concat((_b = fraction === null || fraction === void 0 ? void 0 : fraction.slice(0, 2)) !== null && _b !== void 0 ? _b : 0));
|
|
3129
|
+
return new Intl.NumberFormat(locale, {
|
|
3130
|
+
style: 'currency',
|
|
3131
|
+
currency: currency,
|
|
3132
|
+
maximumFractionDigits: 3,
|
|
3133
|
+
}).format(valueToFormat);
|
|
3134
|
+
};
|
|
3135
|
+
|
|
3136
|
+
var Container$17 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __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) {
|
|
3137
|
+
var height = _a.height;
|
|
3138
|
+
return (height ? height : '1.5em');
|
|
3139
|
+
}, function (_a) {
|
|
3140
|
+
var width = _a.width;
|
|
3141
|
+
return (width ? width : '100%');
|
|
3142
|
+
}, function (_a) {
|
|
3143
|
+
var theme = _a.theme;
|
|
3144
|
+
return theme.colors.background.disabled;
|
|
3145
|
+
}, function (_a) {
|
|
3146
|
+
var theme = _a.theme;
|
|
3147
|
+
return theme.radius.regular;
|
|
3148
|
+
}, function (_a) {
|
|
3149
|
+
var theme = _a.theme;
|
|
3150
|
+
return theme.colors.shades['10'].color;
|
|
3151
|
+
}, function (_a) {
|
|
3152
|
+
var theme = _a.theme;
|
|
3153
|
+
return theme.colors.background.disabled;
|
|
3154
|
+
}, function (_a) {
|
|
3155
|
+
var theme = _a.theme;
|
|
3156
|
+
return theme.colors.shades['10'].color;
|
|
3157
|
+
});
|
|
3158
|
+
var SkeletonBox = function (_a) {
|
|
3159
|
+
var width = _a.width, height = _a.height;
|
|
3160
|
+
var theme = useTheme();
|
|
3161
|
+
return jsxRuntime.jsx(Container$17, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3162
|
+
};
|
|
3163
|
+
var templateObject_1$1O;
|
|
3164
|
+
|
|
3165
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3126
3166
|
var width = _a.width;
|
|
3127
3167
|
return width;
|
|
3128
3168
|
}, function (_a) {
|
|
@@ -3151,7 +3191,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1a || (templateObject_2$
|
|
|
3151
3191
|
var opacity = _a.opacity;
|
|
3152
3192
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3153
3193
|
});
|
|
3154
|
-
var templateObject_1$
|
|
3194
|
+
var templateObject_1$1N, templateObject_2$1a;
|
|
3155
3195
|
|
|
3156
3196
|
/* eslint-disable no-undef */
|
|
3157
3197
|
var cache = new Map();
|
|
@@ -3222,15 +3262,10 @@ var getIconDimension = function (dimension) {
|
|
|
3222
3262
|
return "".concat(dimension, "rem");
|
|
3223
3263
|
};
|
|
3224
3264
|
|
|
3225
|
-
|
|
3226
|
-
var
|
|
3227
|
-
var
|
|
3228
|
-
var
|
|
3229
|
-
var _c = React$2.useState(false), error = _c[0], setError = _c[1];
|
|
3230
|
-
var _d = React$2.useState(), localSource = _d[0], setLocalSource = _d[1];
|
|
3231
|
-
var newWidth = width && getIconDimension(width);
|
|
3232
|
-
var newHeight = height ? getIconDimension(height) : getIconDimension(width);
|
|
3233
|
-
var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
|
|
3265
|
+
var IconFromExtSource = function (_a) {
|
|
3266
|
+
var height = _a.height, width = _a.width, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, iconURL = _a.iconURL, svgId = _a.svgId, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "iconURL", "svgId"]);
|
|
3267
|
+
var _b = React$2.useState(false), error = _b[0], setError = _b[1];
|
|
3268
|
+
var _c = React$2.useState(), localSource = _c[0], setLocalSource = _c[1];
|
|
3234
3269
|
React$2.useEffect(function () {
|
|
3235
3270
|
var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
3236
3271
|
var localSource;
|
|
@@ -3255,19 +3290,32 @@ var Icon$1 = function (_a) {
|
|
|
3255
3290
|
}
|
|
3256
3291
|
return localSource === null || localSource === void 0 ? void 0 : localSource.cleanup;
|
|
3257
3292
|
}, [iconURL, localSource === null || localSource === void 0 ? void 0 : localSource.cleanup]);
|
|
3258
|
-
var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height:
|
|
3293
|
+
var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height: height, width: width }, rest);
|
|
3259
3294
|
if (error) {
|
|
3260
3295
|
return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: iconURL }), void 0);
|
|
3261
3296
|
}
|
|
3262
3297
|
if (!localSource) {
|
|
3263
|
-
return jsxRuntime.jsx(
|
|
3298
|
+
return jsxRuntime.jsx(SkeletonBox, { width: width, height: height }, void 0);
|
|
3264
3299
|
}
|
|
3265
3300
|
if (!fill && !svgProps) {
|
|
3266
3301
|
return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3267
3302
|
}
|
|
3303
|
+
return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { xlinkHref: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3304
|
+
};
|
|
3305
|
+
|
|
3306
|
+
/* eslint-disable react/forbid-component-props */
|
|
3307
|
+
var Icon$1 = function (_a) {
|
|
3308
|
+
var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps"]);
|
|
3309
|
+
var assets = useTheme().assets;
|
|
3310
|
+
var newWidth = width && getIconDimension(width);
|
|
3311
|
+
var newHeight = height ? getIconDimension(height) : getIconDimension(width);
|
|
3312
|
+
var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
|
|
3268
3313
|
var svgSplit = name.split('/');
|
|
3269
3314
|
var svgId = svgSplit[svgSplit.length - 1];
|
|
3270
|
-
|
|
3315
|
+
if (assets.isSameOriginIcons) {
|
|
3316
|
+
return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { xlinkHref: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3317
|
+
}
|
|
3318
|
+
return (jsxRuntime.jsx(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
|
|
3271
3319
|
};
|
|
3272
3320
|
|
|
3273
3321
|
var Add = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
@@ -4011,7 +4059,7 @@ function jsxs(type, props, key) {
|
|
|
4011
4059
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4012
4060
|
// `variants` styles that are consistent through all themes.
|
|
4013
4061
|
var TAGS = {
|
|
4014
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4062
|
+
hero1: newStyled.h1(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""]))),
|
|
4015
4063
|
hero2: newStyled.h2(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject([""], [""]))),
|
|
4016
4064
|
hero3: newStyled.h3(templateObject_3$U || (templateObject_3$U = __makeTemplateObject([""], [""]))),
|
|
4017
4065
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
@@ -4147,95 +4195,9 @@ var DEFAULTS = {
|
|
|
4147
4195
|
size: 'regular',
|
|
4148
4196
|
},
|
|
4149
4197
|
};
|
|
4150
|
-
var templateObject_1$
|
|
4151
|
-
|
|
4152
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
4153
|
-
var timerColor = _a.timerColor;
|
|
4154
|
-
return timerColor || '';
|
|
4155
|
-
});
|
|
4156
|
-
var timeToSeconds = function (_a) {
|
|
4157
|
-
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
4158
|
-
return hours * 3600 + minutes * 60 + seconds;
|
|
4159
|
-
};
|
|
4160
|
-
var secondsToTime = function (secs) {
|
|
4161
|
-
var hours = Math.floor(secs / 3600);
|
|
4162
|
-
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
4163
|
-
var seconds = secs - hours * 3600 - minutes * 60;
|
|
4164
|
-
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
4165
|
-
};
|
|
4166
|
-
var Timer = function (_a) {
|
|
4167
|
-
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.timerColor, timerColor = _d === void 0 ? '#292929' : _d, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "timerColor"]);
|
|
4168
|
-
var _e = React$2.useState(timeToSeconds(rest)), secs = _e[0], setSecs = _e[1];
|
|
4169
|
-
React$2.useEffect(function () {
|
|
4170
|
-
var timer = setInterval(function () {
|
|
4171
|
-
setSecs(function (seconds) {
|
|
4172
|
-
if (seconds === 1) {
|
|
4173
|
-
clearInterval(timer);
|
|
4174
|
-
onTimeUp();
|
|
4175
|
-
return 0;
|
|
4176
|
-
}
|
|
4177
|
-
return seconds - 1;
|
|
4178
|
-
});
|
|
4179
|
-
}, 1000);
|
|
4180
|
-
if (secs <= 0)
|
|
4181
|
-
clearInterval(timer);
|
|
4182
|
-
return function () { return clearInterval(timer); };
|
|
4183
|
-
}, [onTimeUp, secs]);
|
|
4184
|
-
var _f = secondsToTime(secs), hours = _f.hours, minutes = _f.minutes, seconds = _f.seconds;
|
|
4185
|
-
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
4186
|
-
};
|
|
4187
|
-
var templateObject_1$1M;
|
|
4198
|
+
var templateObject_1$1M, 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;
|
|
4188
4199
|
|
|
4189
|
-
var
|
|
4190
|
-
var textPosition = _a.textPosition;
|
|
4191
|
-
return textPosition;
|
|
4192
|
-
}, function (_a) {
|
|
4193
|
-
var backgroundColor = _a.backgroundColor;
|
|
4194
|
-
return backgroundColor;
|
|
4195
|
-
}, function (_a) {
|
|
4196
|
-
var borderRadius = _a.borderRadius;
|
|
4197
|
-
return borderRadius || 'unset';
|
|
4198
|
-
}, function (_a) {
|
|
4199
|
-
var borderRadius = _a.borderRadius;
|
|
4200
|
-
return borderRadius || '8px';
|
|
4201
|
-
});
|
|
4202
|
-
var templateObject_1$1L;
|
|
4203
|
-
|
|
4204
|
-
var HurryUp = function (_a) {
|
|
4205
|
-
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.showSeconds, showSeconds = _e === void 0 ? true : _e, timerColor = _a.timerColor;
|
|
4206
|
-
var theme = useTheme();
|
|
4207
|
-
var _f = React__default["default"].useMemo(function () {
|
|
4208
|
-
var tomorrowDate = new Date();
|
|
4209
|
-
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
4210
|
-
tomorrowDate.setHours(0, 0, 0, 0);
|
|
4211
|
-
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
4212
|
-
var hours = Math.floor(totalSeconds / 3600);
|
|
4213
|
-
var restOfHour = Math.floor(totalSeconds % 3600);
|
|
4214
|
-
var minutes = Math.floor(restOfHour / 60);
|
|
4215
|
-
var seconds = Math.floor(totalSeconds % 60);
|
|
4216
|
-
return {
|
|
4217
|
-
hours: hours,
|
|
4218
|
-
minutes: minutes,
|
|
4219
|
-
seconds: seconds,
|
|
4220
|
-
};
|
|
4221
|
-
}, []), hours = _f.hours, minutes = _f.minutes, seconds = _f.seconds;
|
|
4222
|
-
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsxRuntime.jsx(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && (jsxRuntime.jsx(Timer, { hours: hours, minutes: minutes, seconds: seconds, showSeconds: showSeconds, timerColor: timerColor, onTimeUp: function () { } }, void 0))] }), void 0));
|
|
4223
|
-
};
|
|
4224
|
-
|
|
4225
|
-
var formatPrice = function (value, _a) {
|
|
4226
|
-
var _b;
|
|
4227
|
-
var _c = _a === void 0 ? {} : _a, _d = _c.locale, locale = _d === void 0 ? 'en-US' : _d, _e = _c.currency, currency = _e === void 0 ? 'USD' : _e;
|
|
4228
|
-
var _f = value.toFixed(3).split('.'), integer = _f[0], fraction = _f[1];
|
|
4229
|
-
// this prevents `Intl.NumberFormat` from rounding the number
|
|
4230
|
-
var valueToFormat = parseFloat("".concat(integer, ".").concat((_b = fraction === null || fraction === void 0 ? void 0 : fraction.slice(0, 2)) !== null && _b !== void 0 ? _b : 0));
|
|
4231
|
-
return new Intl.NumberFormat(locale, {
|
|
4232
|
-
style: 'currency',
|
|
4233
|
-
currency: currency,
|
|
4234
|
-
maximumFractionDigits: 3,
|
|
4235
|
-
}).format(valueToFormat);
|
|
4236
|
-
};
|
|
4237
|
-
|
|
4238
|
-
var Container$17 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4200
|
+
var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4239
4201
|
var Card$3 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4240
4202
|
var Tag$2 = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4241
4203
|
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"])));
|
|
@@ -4243,7 +4205,7 @@ var Check$1 = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTe
|
|
|
4243
4205
|
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"])));
|
|
4244
4206
|
var PackSelectorV2 = function (_a) {
|
|
4245
4207
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4246
|
-
return (jsxRuntime.jsx(Container$
|
|
4208
|
+
return (jsxRuntime.jsx(Container$16, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4247
4209
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4248
4210
|
}) }), void 0));
|
|
4249
4211
|
};
|
|
@@ -4265,27 +4227,27 @@ var PackCard$1 = function (_a) {
|
|
|
4265
4227
|
currency: currencyCode || 'USD',
|
|
4266
4228
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4267
4229
|
};
|
|
4268
|
-
var templateObject_1$
|
|
4230
|
+
var templateObject_1$1L, templateObject_2$18, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4269
4231
|
|
|
4270
|
-
var Container$
|
|
4232
|
+
var Container$15 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4271
4233
|
var DropContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4272
4234
|
var DropList = function (_a) {
|
|
4273
4235
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4274
|
-
return (jsxRuntime.jsx(Container$
|
|
4236
|
+
return (jsxRuntime.jsx(Container$15, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4275
4237
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4276
4238
|
}) }, void 0));
|
|
4277
4239
|
};
|
|
4278
|
-
var templateObject_1$
|
|
4240
|
+
var templateObject_1$1K, templateObject_2$17;
|
|
4279
4241
|
|
|
4280
4242
|
var DROPS_TOTAL = 5;
|
|
4281
|
-
var Container$
|
|
4243
|
+
var Container$14 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4282
4244
|
var Title$8 = newStyled.p(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4283
4245
|
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"])));
|
|
4284
4246
|
var AbsorbencyLevel = function (_a) {
|
|
4285
4247
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4286
|
-
return (jsxRuntime.jsxs(Container$
|
|
4248
|
+
return (jsxRuntime.jsxs(Container$14, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4287
4249
|
};
|
|
4288
|
-
var templateObject_1$
|
|
4250
|
+
var templateObject_1$1J, templateObject_2$16, templateObject_3$S;
|
|
4289
4251
|
|
|
4290
4252
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4291
4253
|
`),"","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(`
|
|
@@ -4361,7 +4323,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4361
4323
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4362
4324
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4363
4325
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4364
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4326
|
+
var StyledContent = newStyled.button(templateObject_1$1I || (templateObject_1$1I = __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"])));
|
|
4365
4327
|
var Accordion$1 = function (_a) {
|
|
4366
4328
|
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;
|
|
4367
4329
|
var theme = useTheme();
|
|
@@ -4385,9 +4347,9 @@ var Accordion$1 = function (_a) {
|
|
|
4385
4347
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4386
4348
|
} }), void 0));
|
|
4387
4349
|
};
|
|
4388
|
-
var templateObject_1$
|
|
4350
|
+
var templateObject_1$1I;
|
|
4389
4351
|
|
|
4390
|
-
var Container$
|
|
4352
|
+
var Container$13 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4391
4353
|
var AccordionOptions = function (_a) {
|
|
4392
4354
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4393
4355
|
var _b = React$2.useState({
|
|
@@ -4400,7 +4362,7 @@ var AccordionOptions = function (_a) {
|
|
|
4400
4362
|
}
|
|
4401
4363
|
return false;
|
|
4402
4364
|
};
|
|
4403
|
-
return (jsxRuntime.jsx(Container$
|
|
4365
|
+
return (jsxRuntime.jsx(Container$13, { children: accordions.map(function (accordion, index) {
|
|
4404
4366
|
var forceOpenValue = getForceOpen(index);
|
|
4405
4367
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4406
4368
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4411,7 +4373,7 @@ var AccordionOptions = function (_a) {
|
|
|
4411
4373
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4412
4374
|
}) }, void 0));
|
|
4413
4375
|
};
|
|
4414
|
-
var templateObject_1$
|
|
4376
|
+
var templateObject_1$1H;
|
|
4415
4377
|
|
|
4416
4378
|
exports.CardSectionType = void 0;
|
|
4417
4379
|
(function (CardSectionType) {
|
|
@@ -4573,6 +4535,15 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4573
4535
|
literal: true,
|
|
4574
4536
|
});
|
|
4575
4537
|
|
|
4538
|
+
var ErrorText = newStyled.h3(templateObject_1$1G || (templateObject_1$1G = __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; });
|
|
4539
|
+
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"])));
|
|
4540
|
+
var Error$1 = function (_a) {
|
|
4541
|
+
var error = _a.error;
|
|
4542
|
+
var theme = useTheme();
|
|
4543
|
+
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4544
|
+
};
|
|
4545
|
+
var templateObject_1$1G, templateObject_2$15;
|
|
4546
|
+
|
|
4576
4547
|
var BaseSelectButton = function (_a) {
|
|
4577
4548
|
var children = _a.children, as = _a.as;
|
|
4578
4549
|
return jsxRuntime.jsx(Ee.Button, __assign$1({ as: as }, { children: children }), void 0);
|
|
@@ -4637,17 +4608,17 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4637
4608
|
});
|
|
4638
4609
|
});
|
|
4639
4610
|
var BaseDropdownButton = function (_a) {
|
|
4640
|
-
var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter;
|
|
4611
|
+
var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter, testId = _a.testId;
|
|
4641
4612
|
var theme = useTheme();
|
|
4642
4613
|
return (jsx(BaseSelect$1.Button, __assign$1({ as: React$2.Fragment }, { children: function (_a) {
|
|
4643
4614
|
var open = _a.open;
|
|
4644
|
-
return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, isSortOrFilter: isSortOrFilter }, { children: [children, open ? (jsx(CloseIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0)) : (jsx(OpenIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0))] }), void 0));
|
|
4615
|
+
return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, "data-testid": testId, isSortOrFilter: isSortOrFilter }, { children: [children, open ? (jsx(CloseIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0)) : (jsx(OpenIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0))] }), void 0));
|
|
4645
4616
|
} }), void 0));
|
|
4646
4617
|
};
|
|
4647
4618
|
var withLabel = function (Button, label) {
|
|
4648
4619
|
return function WithLabel(_a) {
|
|
4649
|
-
var CloseIcon = _a.CloseIcon, OpenIcon = _a.OpenIcon, children = _a.children, wide = _a.wide;
|
|
4650
|
-
return (jsx(Button, __assign$1({ CloseIcon: CloseIcon, OpenIcon: OpenIcon, wide: wide }, { children: jsxs("div", __assign$1({ css: {
|
|
4620
|
+
var CloseIcon = _a.CloseIcon, OpenIcon = _a.OpenIcon, children = _a.children, testId = _a.testId, wide = _a.wide;
|
|
4621
|
+
return (jsx(Button, __assign$1({ CloseIcon: CloseIcon, OpenIcon: OpenIcon, wide: wide, "data-testid": testId }, { children: jsxs("div", __assign$1({ css: {
|
|
4651
4622
|
display: 'flex',
|
|
4652
4623
|
flexDirection: 'column',
|
|
4653
4624
|
alignItems: 'flex-start',
|
|
@@ -4657,15 +4628,6 @@ var withLabel = function (Button, label) {
|
|
|
4657
4628
|
};
|
|
4658
4629
|
};
|
|
4659
4630
|
|
|
4660
|
-
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; });
|
|
4661
|
-
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"])));
|
|
4662
|
-
var Error$1 = function (_a) {
|
|
4663
|
-
var error = _a.error;
|
|
4664
|
-
var theme = useTheme();
|
|
4665
|
-
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4666
|
-
};
|
|
4667
|
-
var templateObject_1$1E, templateObject_2$15;
|
|
4668
|
-
|
|
4669
4631
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4670
4632
|
var theme = _a.theme;
|
|
4671
4633
|
return ({
|
|
@@ -4831,7 +4793,7 @@ var CustomCheckboxStyles = {
|
|
|
4831
4793
|
},
|
|
4832
4794
|
};
|
|
4833
4795
|
|
|
4834
|
-
var Container$
|
|
4796
|
+
var Container$12 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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"])));
|
|
4835
4797
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4836
4798
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4837
4799
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4856,9 +4818,9 @@ var Checkbox = function (_a) {
|
|
|
4856
4818
|
}
|
|
4857
4819
|
onChange(e.target.checked);
|
|
4858
4820
|
};
|
|
4859
|
-
return (jsxRuntime.jsxs(Container$
|
|
4821
|
+
return (jsxRuntime.jsxs(Container$12, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4860
4822
|
};
|
|
4861
|
-
var templateObject_1$
|
|
4823
|
+
var templateObject_1$1E, templateObject_2$14;
|
|
4862
4824
|
|
|
4863
4825
|
var CustomOption = newStyled.li(function (_a) {
|
|
4864
4826
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4907,7 +4869,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4907
4869
|
Option: BaseDropdownOption,
|
|
4908
4870
|
});
|
|
4909
4871
|
|
|
4910
|
-
var Container$
|
|
4872
|
+
var Container$11 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject([""], [""])));
|
|
4911
4873
|
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"])));
|
|
4912
4874
|
function SimpleDropdown(_a) {
|
|
4913
4875
|
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;
|
|
@@ -4938,10 +4900,10 @@ function SimpleDropdown(_a) {
|
|
|
4938
4900
|
setSelectedValue(value);
|
|
4939
4901
|
}, [value, options, initialValue]);
|
|
4940
4902
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4941
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4942
|
-
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort,
|
|
4903
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$11 : React$2.Fragment;
|
|
4904
|
+
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4943
4905
|
}
|
|
4944
|
-
var templateObject_1$
|
|
4906
|
+
var templateObject_1$1D, templateObject_2$13;
|
|
4945
4907
|
|
|
4946
4908
|
/* base styles & size variants */
|
|
4947
4909
|
var CustomRadioStyles$2 = {
|
|
@@ -5006,8 +4968,8 @@ var ContainerStyles$2 = {
|
|
|
5006
4968
|
},
|
|
5007
4969
|
};
|
|
5008
4970
|
|
|
5009
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5010
|
-
var Container$
|
|
4971
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4972
|
+
var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5011
4973
|
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) {
|
|
5012
4974
|
var disabled = _a.disabled;
|
|
5013
4975
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -5030,9 +4992,9 @@ var RadioInput = function (_a) {
|
|
|
5030
4992
|
var value = event.currentTarget.value;
|
|
5031
4993
|
onChange({ value: value, label: label });
|
|
5032
4994
|
};
|
|
5033
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
4995
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$10, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5034
4996
|
};
|
|
5035
|
-
var templateObject_1$
|
|
4997
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$R;
|
|
5036
4998
|
|
|
5037
4999
|
var TooltipArrow = function (_a) {
|
|
5038
5000
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -5112,7 +5074,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5112
5074
|
}
|
|
5113
5075
|
};
|
|
5114
5076
|
|
|
5115
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5077
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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) {
|
|
5116
5078
|
var position = _a.position;
|
|
5117
5079
|
return getWrapperFlexDirection(position);
|
|
5118
5080
|
});
|
|
@@ -5164,7 +5126,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5164
5126
|
return color;
|
|
5165
5127
|
});
|
|
5166
5128
|
var IconContainer$5 = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5167
|
-
var templateObject_1$
|
|
5129
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$Q, templateObject_4$D, templateObject_5$p, templateObject_6$n, templateObject_7$g;
|
|
5168
5130
|
|
|
5169
5131
|
var Tooltip = function (_a) {
|
|
5170
5132
|
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;
|
|
@@ -5232,7 +5194,7 @@ var getStylesBySize$d = function (size, bordersRounded, theme) {
|
|
|
5232
5194
|
};
|
|
5233
5195
|
}
|
|
5234
5196
|
};
|
|
5235
|
-
var Container
|
|
5197
|
+
var Container$$ = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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) {
|
|
5236
5198
|
var backgroundColor = _a.backgroundColor;
|
|
5237
5199
|
return backgroundColor;
|
|
5238
5200
|
}, function (_a) {
|
|
@@ -5269,9 +5231,9 @@ var H3$3 = newStyled.h3(templateObject_2$10 || (templateObject_2$10 = __makeTemp
|
|
|
5269
5231
|
var DiscountTag = function (_a) {
|
|
5270
5232
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5271
5233
|
var theme = useTheme();
|
|
5272
|
-
return (jsxRuntime.jsx(Container
|
|
5234
|
+
return (jsxRuntime.jsx(Container$$, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5273
5235
|
};
|
|
5274
|
-
var templateObject_1$
|
|
5236
|
+
var templateObject_1$1A, templateObject_2$10;
|
|
5275
5237
|
|
|
5276
5238
|
function getWindowDimensions() {
|
|
5277
5239
|
var width = window.innerWidth, height = window.innerHeight;
|
|
@@ -5337,7 +5299,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5337
5299
|
return (_c = getStylesBySize$c(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5338
5300
|
}
|
|
5339
5301
|
};
|
|
5340
|
-
var Container
|
|
5302
|
+
var Container$_ = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5341
5303
|
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) {
|
|
5342
5304
|
var weight = _a.weight;
|
|
5343
5305
|
return (weight ? weight : '400');
|
|
@@ -5393,9 +5355,9 @@ var PriceLabel = function (_a) {
|
|
|
5393
5355
|
: exports.ComponentSize.XSmall;
|
|
5394
5356
|
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5395
5357
|
};
|
|
5396
|
-
return (jsxRuntime.jsxs(Container
|
|
5358
|
+
return (jsxRuntime.jsxs(Container$_, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5397
5359
|
};
|
|
5398
|
-
var templateObject_1$
|
|
5360
|
+
var templateObject_1$1z, templateObject_2$$, templateObject_3$P;
|
|
5399
5361
|
|
|
5400
5362
|
var getStylesBySize$b = function (size) {
|
|
5401
5363
|
switch (size) {
|
|
@@ -5425,7 +5387,7 @@ var getStylesBySize$b = function (size) {
|
|
|
5425
5387
|
};
|
|
5426
5388
|
}
|
|
5427
5389
|
};
|
|
5428
|
-
var Container$
|
|
5390
|
+
var Container$Z = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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) {
|
|
5429
5391
|
var backgroundColor = _a.backgroundColor;
|
|
5430
5392
|
return backgroundColor;
|
|
5431
5393
|
}, function (_a) {
|
|
@@ -5462,11 +5424,11 @@ var H3$2 = newStyled.h3(templateObject_2$_ || (templateObject_2$_ = __makeTempla
|
|
|
5462
5424
|
var ClubOfferTag = function (_a) {
|
|
5463
5425
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5464
5426
|
var theme = useTheme();
|
|
5465
|
-
return (jsxRuntime.jsx(Container$
|
|
5427
|
+
return (jsxRuntime.jsx(Container$Z, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5466
5428
|
};
|
|
5467
|
-
var templateObject_1$
|
|
5429
|
+
var templateObject_1$1y, templateObject_2$_;
|
|
5468
5430
|
|
|
5469
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5431
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5470
5432
|
var PriceLabelV2 = function (_a) {
|
|
5471
5433
|
var _b;
|
|
5472
5434
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay"]);
|
|
@@ -5516,7 +5478,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5516
5478
|
var savetoString = saveto.toFixed(2);
|
|
5517
5479
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5518
5480
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5519
|
-
return (jsxRuntime.jsxs(Container
|
|
5481
|
+
return (jsxRuntime.jsxs(Container$_, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5520
5482
|
marginTop: '-5px',
|
|
5521
5483
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5522
5484
|
marginTop: '-6px',
|
|
@@ -5532,9 +5494,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5532
5494
|
lineHeight: '22px',
|
|
5533
5495
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5534
5496
|
};
|
|
5535
|
-
var templateObject_1$
|
|
5497
|
+
var templateObject_1$1x;
|
|
5536
5498
|
|
|
5537
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5499
|
+
var FlexContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5538
5500
|
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) {
|
|
5539
5501
|
var selected = _a.selected, theme = _a.theme;
|
|
5540
5502
|
return selected
|
|
@@ -5571,8 +5533,8 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5571
5533
|
var selected = _a.selected, theme = _a.theme;
|
|
5572
5534
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5573
5535
|
});
|
|
5574
|
-
var Container$
|
|
5575
|
-
var templateObject_1$
|
|
5536
|
+
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5537
|
+
var templateObject_1$1w, 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;
|
|
5576
5538
|
|
|
5577
5539
|
var radioIds = {
|
|
5578
5540
|
oneTime: {
|
|
@@ -5622,17 +5584,17 @@ var Autoship = function (_a) {
|
|
|
5622
5584
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5623
5585
|
};
|
|
5624
5586
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5625
|
-
return (jsxRuntime.jsxs(Container$
|
|
5587
|
+
return (jsxRuntime.jsxs(Container$Y, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5626
5588
|
? benefitsColor.selected
|
|
5627
|
-
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5589
|
+
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5628
5590
|
};
|
|
5629
5591
|
|
|
5630
|
-
var Img = newStyled.img(templateObject_1$
|
|
5592
|
+
var Img = newStyled.img(templateObject_1$1v || (templateObject_1$1v = __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; });
|
|
5631
5593
|
var Image$3 = function (_a) {
|
|
5632
5594
|
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;
|
|
5633
5595
|
return (jsxRuntime.jsx(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
5634
5596
|
};
|
|
5635
|
-
var templateObject_1$
|
|
5597
|
+
var templateObject_1$1v;
|
|
5636
5598
|
|
|
5637
5599
|
var _a$2;
|
|
5638
5600
|
exports.BeforeAfterVariant = void 0;
|
|
@@ -5647,13 +5609,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5647
5609
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5648
5610
|
_a$2);
|
|
5649
5611
|
|
|
5650
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5612
|
+
var CustomerDetails = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject([""], [""])));
|
|
5651
5613
|
var CustomerInfo = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5652
5614
|
var Name = newStyled.h4(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
5653
5615
|
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"])));
|
|
5654
5616
|
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"])));
|
|
5655
5617
|
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"])));
|
|
5656
|
-
var templateObject_1$
|
|
5618
|
+
var templateObject_1$1u, templateObject_2$Y, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5657
5619
|
|
|
5658
5620
|
var NameWithStars = function (_a) {
|
|
5659
5621
|
var name = _a.name, size = _a.size;
|
|
@@ -5671,7 +5633,7 @@ var ResultFeedback = function (_a) {
|
|
|
5671
5633
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5672
5634
|
};
|
|
5673
5635
|
|
|
5674
|
-
var Container$
|
|
5636
|
+
var Container$X = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
5675
5637
|
var ImageContainer$5 = newStyled.div(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
5676
5638
|
var ImageCard = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
5677
5639
|
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) {
|
|
@@ -5684,7 +5646,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5684
5646
|
var theme = _a.theme, size = _a.size;
|
|
5685
5647
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5686
5648
|
});
|
|
5687
|
-
var templateObject_1$
|
|
5649
|
+
var templateObject_1$1t, templateObject_2$X, templateObject_3$M, templateObject_4$A;
|
|
5688
5650
|
|
|
5689
5651
|
/* base styles & size variants */
|
|
5690
5652
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5759,10 +5721,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
5759
5721
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5760
5722
|
var infoText = buildInfoText(name, age, months);
|
|
5761
5723
|
var Component = componentByVariant[variant];
|
|
5762
|
-
return (jsxRuntime.jsxs(Container$
|
|
5724
|
+
return (jsxRuntime.jsxs(Container$X, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5763
5725
|
};
|
|
5764
5726
|
|
|
5765
|
-
var Section = newStyled.div(templateObject_1$
|
|
5727
|
+
var Section = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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) {
|
|
5766
5728
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5767
5729
|
});
|
|
5768
5730
|
var CardHeader = function (_a) {
|
|
@@ -5773,16 +5735,16 @@ var CardFooter = function (_a) {
|
|
|
5773
5735
|
var children = _a.children;
|
|
5774
5736
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
5775
5737
|
};
|
|
5776
|
-
var templateObject_1$
|
|
5738
|
+
var templateObject_1$1s;
|
|
5777
5739
|
|
|
5778
|
-
var Body = newStyled.div(templateObject_1$
|
|
5740
|
+
var Body = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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"])));
|
|
5779
5741
|
var CardBody = function (_a) {
|
|
5780
5742
|
var children = _a.children;
|
|
5781
5743
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
5782
5744
|
};
|
|
5783
|
-
var templateObject_1$
|
|
5745
|
+
var templateObject_1$1r;
|
|
5784
5746
|
|
|
5785
|
-
var Container$
|
|
5747
|
+
var Container$W = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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) {
|
|
5786
5748
|
var flex = _a.flex;
|
|
5787
5749
|
return flex &&
|
|
5788
5750
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5797,23 +5759,23 @@ var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __
|
|
|
5797
5759
|
var Card$1 = function (_a) {
|
|
5798
5760
|
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;
|
|
5799
5761
|
var theme = useTheme();
|
|
5800
|
-
return (jsxRuntime.jsx(Container$
|
|
5762
|
+
return (jsxRuntime.jsx(Container$W, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
5801
5763
|
};
|
|
5802
5764
|
var Card$2 = Object.assign(Card$1, {
|
|
5803
5765
|
Header: CardHeader,
|
|
5804
5766
|
Footer: CardFooter,
|
|
5805
5767
|
Body: CardBody,
|
|
5806
5768
|
});
|
|
5807
|
-
var templateObject_1$
|
|
5769
|
+
var templateObject_1$1q;
|
|
5808
5770
|
|
|
5809
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5771
|
+
var StyledWrapper = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
5810
5772
|
var StyledContainer = newStyled.div(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5811
5773
|
var TextLabel = newStyled(Text$8)(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
5812
5774
|
var color = _a.color;
|
|
5813
5775
|
return color;
|
|
5814
5776
|
});
|
|
5815
5777
|
var YouAreSaving = newStyled(Text$8)(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
5816
|
-
var templateObject_1$
|
|
5778
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$L, templateObject_4$z;
|
|
5817
5779
|
|
|
5818
5780
|
var Minimalistic = function (_a) {
|
|
5819
5781
|
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;
|
|
@@ -5821,23 +5783,23 @@ var Minimalistic = function (_a) {
|
|
|
5821
5783
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5822
5784
|
};
|
|
5823
5785
|
|
|
5824
|
-
var Container$
|
|
5786
|
+
var Container$V = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5825
5787
|
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; });
|
|
5826
5788
|
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; });
|
|
5827
5789
|
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"])));
|
|
5828
5790
|
var Simple = function (_a) {
|
|
5829
5791
|
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;
|
|
5830
5792
|
var theme = useTheme();
|
|
5831
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
5793
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$V, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5832
5794
|
};
|
|
5833
|
-
var templateObject_1$
|
|
5795
|
+
var templateObject_1$1o, templateObject_2$V, templateObject_3$K, templateObject_4$y;
|
|
5834
5796
|
|
|
5835
5797
|
var Bundle = {
|
|
5836
5798
|
Minimalistic: Minimalistic,
|
|
5837
5799
|
Simple: Simple,
|
|
5838
5800
|
};
|
|
5839
5801
|
|
|
5840
|
-
var Container$
|
|
5802
|
+
var Container$U = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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) {
|
|
5841
5803
|
var displayBNPL = _a.displayBNPL;
|
|
5842
5804
|
return (displayBNPL ? 'flex' : 'none');
|
|
5843
5805
|
});
|
|
@@ -5852,43 +5814,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
5852
5814
|
console.error('Icon', iconName, 'not found');
|
|
5853
5815
|
return null;
|
|
5854
5816
|
}
|
|
5855
|
-
return (jsxRuntime.jsx(Container$
|
|
5817
|
+
return (jsxRuntime.jsx(Container$U, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5856
5818
|
};
|
|
5857
|
-
var templateObject_1$
|
|
5819
|
+
var templateObject_1$1n, templateObject_2$U, templateObject_3$J;
|
|
5858
5820
|
|
|
5859
|
-
var Text$7 = newStyled.span(templateObject_1$
|
|
5821
|
+
var Text$7 = newStyled.span(templateObject_1$1m || (templateObject_1$1m = __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; });
|
|
5860
5822
|
var Title$5 = function (_a) {
|
|
5861
5823
|
var title = _a.title;
|
|
5862
5824
|
var theme = useTheme();
|
|
5863
5825
|
return jsxRuntime.jsx(Text$7, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5864
5826
|
};
|
|
5865
|
-
var templateObject_1$
|
|
5827
|
+
var templateObject_1$1m;
|
|
5866
5828
|
|
|
5867
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5829
|
+
var P$3 = newStyled.p(templateObject_1$1l || (templateObject_1$1l = __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; });
|
|
5868
5830
|
var Promo = function (_a) {
|
|
5869
5831
|
var text = _a.text;
|
|
5870
5832
|
var theme = useTheme();
|
|
5871
5833
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5872
5834
|
};
|
|
5873
|
-
var templateObject_1$
|
|
5835
|
+
var templateObject_1$1l;
|
|
5874
5836
|
|
|
5875
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5837
|
+
var Text$6 = newStyled.span(templateObject_1$1k || (templateObject_1$1k = __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; });
|
|
5876
5838
|
var Description$1 = function (_a) {
|
|
5877
5839
|
var text = _a.text;
|
|
5878
5840
|
var theme = useTheme();
|
|
5879
5841
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5880
5842
|
};
|
|
5881
|
-
var templateObject_1$
|
|
5843
|
+
var templateObject_1$1k;
|
|
5882
5844
|
|
|
5883
|
-
var Container$
|
|
5845
|
+
var Container$T = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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"); });
|
|
5884
5846
|
var CloseButton$1 = function (_a) {
|
|
5885
5847
|
var onClick = _a.onClick, size = _a.size;
|
|
5886
5848
|
var theme = useTheme();
|
|
5887
|
-
return (jsxRuntime.jsx(Container$
|
|
5849
|
+
return (jsxRuntime.jsx(Container$T, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
5888
5850
|
};
|
|
5889
|
-
var templateObject_1$
|
|
5851
|
+
var templateObject_1$1j;
|
|
5890
5852
|
|
|
5891
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
5853
|
+
var Text$5 = newStyled.h3(templateObject_1$1i || (templateObject_1$1i = __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) {
|
|
5892
5854
|
var backgroundColor = _a.backgroundColor;
|
|
5893
5855
|
return backgroundColor;
|
|
5894
5856
|
}, function (_a) {
|
|
@@ -5903,7 +5865,7 @@ var OfferBanner = function (_a) {
|
|
|
5903
5865
|
var theme = useTheme();
|
|
5904
5866
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
5905
5867
|
};
|
|
5906
|
-
var templateObject_1$
|
|
5868
|
+
var templateObject_1$1i;
|
|
5907
5869
|
|
|
5908
5870
|
var CartProductItem = {
|
|
5909
5871
|
Title: Title$5,
|
|
@@ -5913,36 +5875,7 @@ var CartProductItem = {
|
|
|
5913
5875
|
CloseButton: CloseButton$1,
|
|
5914
5876
|
};
|
|
5915
5877
|
|
|
5916
|
-
var Container$
|
|
5917
|
-
var height = _a.height;
|
|
5918
|
-
return (height ? height : '1.5em');
|
|
5919
|
-
}, function (_a) {
|
|
5920
|
-
var width = _a.width;
|
|
5921
|
-
return (width ? width : '100%');
|
|
5922
|
-
}, function (_a) {
|
|
5923
|
-
var theme = _a.theme;
|
|
5924
|
-
return theme.colors.background.disabled;
|
|
5925
|
-
}, function (_a) {
|
|
5926
|
-
var theme = _a.theme;
|
|
5927
|
-
return theme.radius.regular;
|
|
5928
|
-
}, function (_a) {
|
|
5929
|
-
var theme = _a.theme;
|
|
5930
|
-
return theme.colors.shades['10'].color;
|
|
5931
|
-
}, function (_a) {
|
|
5932
|
-
var theme = _a.theme;
|
|
5933
|
-
return theme.colors.background.disabled;
|
|
5934
|
-
}, function (_a) {
|
|
5935
|
-
var theme = _a.theme;
|
|
5936
|
-
return theme.colors.shades['10'].color;
|
|
5937
|
-
});
|
|
5938
|
-
var SkeletonBox = function (_a) {
|
|
5939
|
-
var width = _a.width, height = _a.height;
|
|
5940
|
-
var theme = useTheme();
|
|
5941
|
-
return jsxRuntime.jsx(Container$T, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
5942
|
-
};
|
|
5943
|
-
var templateObject_1$1g;
|
|
5944
|
-
|
|
5945
|
-
var Container$S = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
5878
|
+
var Container$S = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
5946
5879
|
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"])));
|
|
5947
5880
|
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"])));
|
|
5948
5881
|
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"])));
|
|
@@ -5955,7 +5888,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
5955
5888
|
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
5956
5889
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$S, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
5957
5890
|
};
|
|
5958
|
-
var templateObject_1$
|
|
5891
|
+
var templateObject_1$1h, templateObject_2$T, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$k, templateObject_7$e, templateObject_8$a;
|
|
5959
5892
|
|
|
5960
5893
|
var Spacing = function (_a) {
|
|
5961
5894
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -5963,7 +5896,7 @@ var Spacing = function (_a) {
|
|
|
5963
5896
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
5964
5897
|
};
|
|
5965
5898
|
|
|
5966
|
-
var Container$R = newStyled('div')(templateObject_1$
|
|
5899
|
+
var Container$R = newStyled('div')(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
5967
5900
|
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"])));
|
|
5968
5901
|
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"])));
|
|
5969
5902
|
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) {
|
|
@@ -5977,12 +5910,12 @@ var StrengthBars = function (_a) {
|
|
|
5977
5910
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
5978
5911
|
return (jsxRuntime.jsxs(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
5979
5912
|
};
|
|
5980
|
-
var templateObject_1$
|
|
5913
|
+
var templateObject_1$1g, templateObject_2$S, templateObject_3$H, templateObject_4$w;
|
|
5981
5914
|
|
|
5982
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
5983
|
-
var templateObject_1$
|
|
5915
|
+
var Container$Q = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5916
|
+
var templateObject_1$1f;
|
|
5984
5917
|
|
|
5985
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
5918
|
+
var StarContainer = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
5986
5919
|
var marginRight = _a.marginRight;
|
|
5987
5920
|
return marginRight;
|
|
5988
5921
|
});
|
|
@@ -5998,7 +5931,7 @@ var StarList = function (_a) {
|
|
|
5998
5931
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
5999
5932
|
}) }, void 0));
|
|
6000
5933
|
};
|
|
6001
|
-
var templateObject_1$
|
|
5934
|
+
var templateObject_1$1e;
|
|
6002
5935
|
|
|
6003
5936
|
/* base styles & size variants */
|
|
6004
5937
|
var LabelStyles = {
|
|
@@ -6039,8 +5972,8 @@ var LabelStyles = {
|
|
|
6039
5972
|
});
|
|
6040
5973
|
},
|
|
6041
5974
|
};
|
|
6042
|
-
var Container$P = newStyled.a(templateObject_1$
|
|
6043
|
-
var templateObject_1$
|
|
5975
|
+
var Container$P = newStyled.a(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5976
|
+
var templateObject_1$1d;
|
|
6044
5977
|
|
|
6045
5978
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6046
5979
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6091,7 +6024,7 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6091
6024
|
height: height,
|
|
6092
6025
|
});
|
|
6093
6026
|
});
|
|
6094
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6027
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6095
6028
|
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"])));
|
|
6096
6029
|
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"])));
|
|
6097
6030
|
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; });
|
|
@@ -6180,7 +6113,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6180
6113
|
};
|
|
6181
6114
|
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));
|
|
6182
6115
|
};
|
|
6183
|
-
var templateObject_1$
|
|
6116
|
+
var templateObject_1$1c, templateObject_2$R, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6184
6117
|
|
|
6185
6118
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6186
6119
|
var width = _a.width, height = _a.height;
|
|
@@ -6190,7 +6123,7 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6190
6123
|
height: height,
|
|
6191
6124
|
});
|
|
6192
6125
|
});
|
|
6193
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6126
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
6194
6127
|
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"])));
|
|
6195
6128
|
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"])));
|
|
6196
6129
|
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; });
|
|
@@ -6278,9 +6211,9 @@ var ProductItemTK = function (_a) {
|
|
|
6278
6211
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6279
6212
|
} }, { 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));
|
|
6280
6213
|
};
|
|
6281
|
-
var templateObject_1$
|
|
6214
|
+
var templateObject_1$1b, templateObject_2$Q, templateObject_3$F, templateObject_4$u, templateObject_5$k, templateObject_6$i, templateObject_7$c;
|
|
6282
6215
|
|
|
6283
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
6216
|
+
var Container$M = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
6284
6217
|
function withProductGrid(ProductItemComponent, data) {
|
|
6285
6218
|
function WithProductGrid(props) {
|
|
6286
6219
|
return (jsxRuntime.jsx(Container$M, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6290,7 +6223,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6290
6223
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6291
6224
|
return WithProductGrid;
|
|
6292
6225
|
}
|
|
6293
|
-
var templateObject_1$
|
|
6226
|
+
var templateObject_1$1a;
|
|
6294
6227
|
|
|
6295
6228
|
var Collection = {
|
|
6296
6229
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6337,7 +6270,7 @@ var OutOfStock = function (_a) {
|
|
|
6337
6270
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6338
6271
|
};
|
|
6339
6272
|
|
|
6340
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6273
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6341
6274
|
newStyled(lt.Label)(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6342
6275
|
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"])));
|
|
6343
6276
|
var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
@@ -6359,9 +6292,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6359
6292
|
Option: Option,
|
|
6360
6293
|
OptionsContainer: OptionsContainer,
|
|
6361
6294
|
});
|
|
6362
|
-
var templateObject_1$
|
|
6295
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$j;
|
|
6363
6296
|
|
|
6364
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
6297
|
+
var Container$L = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
6365
6298
|
var borderColor = _a.borderColor;
|
|
6366
6299
|
return borderColor;
|
|
6367
6300
|
}, function (_a) {
|
|
@@ -6375,7 +6308,7 @@ var PatternSelector = function (_a) {
|
|
|
6375
6308
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6376
6309
|
return (jsxRuntime.jsx(Container$L, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6377
6310
|
};
|
|
6378
|
-
var templateObject_1$
|
|
6311
|
+
var templateObject_1$18, templateObject_2$O;
|
|
6379
6312
|
|
|
6380
6313
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6381
6314
|
if (options == null || options.length === 0) {
|
|
@@ -6433,7 +6366,7 @@ var SingleColorPicker = function (_a) {
|
|
|
6433
6366
|
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));
|
|
6434
6367
|
};
|
|
6435
6368
|
|
|
6436
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6369
|
+
var Wrapper$5 = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
6437
6370
|
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"])));
|
|
6438
6371
|
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) {
|
|
6439
6372
|
return props.rightToLeft &&
|
|
@@ -6447,7 +6380,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
6447
6380
|
var theme = useTheme();
|
|
6448
6381
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$1, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6449
6382
|
};
|
|
6450
|
-
var templateObject_1$
|
|
6383
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$h;
|
|
6451
6384
|
|
|
6452
6385
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6453
6386
|
__proto__: null,
|
|
@@ -6475,7 +6408,7 @@ var sizeMapper = (_a = {},
|
|
|
6475
6408
|
_a[exports.ComponentSize.Large] = 'large',
|
|
6476
6409
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
6477
6410
|
_a);
|
|
6478
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6411
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
6479
6412
|
var wide = _a.wide;
|
|
6480
6413
|
return (wide ? '100%' : 'fit-content');
|
|
6481
6414
|
}, function (_a) {
|
|
@@ -6497,11 +6430,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$14 || (templateObj
|
|
|
6497
6430
|
var theme = _a.theme;
|
|
6498
6431
|
return theme.colors.text.disabled;
|
|
6499
6432
|
});
|
|
6500
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n margin-right: 10px;\n
|
|
6501
|
-
|
|
6502
|
-
return theme.colors.shades[700].color;
|
|
6503
|
-
});
|
|
6504
|
-
var templateObject_1$14, templateObject_2$M;
|
|
6433
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6434
|
+
var templateObject_1$16, templateObject_2$M;
|
|
6505
6435
|
|
|
6506
6436
|
var BaseCTA = function (_a) {
|
|
6507
6437
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
@@ -6568,7 +6498,7 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6568
6498
|
} }), void 0));
|
|
6569
6499
|
};
|
|
6570
6500
|
|
|
6571
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
6501
|
+
var Container$K = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
6572
6502
|
var IconContainer$4 = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
6573
6503
|
var Text$4 = newStyled.p(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6574
6504
|
var Details = newStyled.span(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
@@ -6577,9 +6507,9 @@ var Note = function (_a) {
|
|
|
6577
6507
|
var theme = useTheme();
|
|
6578
6508
|
return (jsxRuntime.jsxs(Container$K, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6579
6509
|
};
|
|
6580
|
-
var templateObject_1$
|
|
6510
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$C, templateObject_4$r;
|
|
6581
6511
|
|
|
6582
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6512
|
+
var Title$2 = newStyled.h1(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
6583
6513
|
var theme = _a.theme;
|
|
6584
6514
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
6585
6515
|
});
|
|
@@ -6622,9 +6552,9 @@ var DeliveryDetails = function (_a) {
|
|
|
6622
6552
|
var theme = useTheme();
|
|
6623
6553
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6624
6554
|
};
|
|
6625
|
-
var templateObject_1$
|
|
6555
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$B, templateObject_4$q, templateObject_5$h, templateObject_6$g, templateObject_7$b, templateObject_8$9;
|
|
6626
6556
|
|
|
6627
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6557
|
+
var Backdrop = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
6628
6558
|
var top = _a.top;
|
|
6629
6559
|
return top;
|
|
6630
6560
|
}, function (_a) {
|
|
@@ -6678,15 +6608,15 @@ var Drawer = function (_a) {
|
|
|
6678
6608
|
}, [isOpen, onClose, onOpen]);
|
|
6679
6609
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
6680
6610
|
};
|
|
6681
|
-
var templateObject_1$
|
|
6611
|
+
var templateObject_1$13, templateObject_2$J;
|
|
6682
6612
|
|
|
6683
|
-
var List = newStyled.ul(templateObject_1$
|
|
6613
|
+
var List = newStyled.ul(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
6684
6614
|
var Item$2 = newStyled.li(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
6685
6615
|
var DropdownWrapper = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
6686
6616
|
var ArrowContainer$1 = newStyled.div(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
6687
6617
|
var StyledDropdown = newStyled.ul(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
6688
6618
|
var DropdownItem = newStyled.li(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
6689
|
-
var templateObject_1$
|
|
6619
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$A, templateObject_4$p, templateObject_5$g, templateObject_6$f;
|
|
6690
6620
|
|
|
6691
6621
|
var DropdownListIcons = function (_a) {
|
|
6692
6622
|
var items = _a.items;
|
|
@@ -6699,13 +6629,13 @@ var Dropdown = function (_a) {
|
|
|
6699
6629
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
6700
6630
|
};
|
|
6701
6631
|
|
|
6702
|
-
var DropdownContainer = newStyled.div(templateObject_1
|
|
6632
|
+
var DropdownContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
6703
6633
|
var DropdownLabel = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
6704
6634
|
var SizeLabel = newStyled.span(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6705
6635
|
var DetailLabel = newStyled.span(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
6706
6636
|
var DropdownOptions = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
6707
6637
|
var DropdownOption = newStyled.div(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
6708
|
-
var templateObject_1
|
|
6638
|
+
var templateObject_1$11, templateObject_2$H, templateObject_3$z, templateObject_4$o, templateObject_5$f, templateObject_6$e;
|
|
6709
6639
|
|
|
6710
6640
|
var SizeDropdown = function (_a) {
|
|
6711
6641
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6728,7 +6658,7 @@ var SizeDropdown = function (_a) {
|
|
|
6728
6658
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
6729
6659
|
};
|
|
6730
6660
|
|
|
6731
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
6661
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
6732
6662
|
var DialogDropdownListContainer = newStyled.ul(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
6733
6663
|
var DialogDropdownListItem = newStyled.li(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
6734
6664
|
var DialogDropdownLink = newStyled.a(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
@@ -6740,7 +6670,7 @@ var DropdownDialog = function (_a) {
|
|
|
6740
6670
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6741
6671
|
}) }), void 0) }), void 0));
|
|
6742
6672
|
};
|
|
6743
|
-
var templateObject_1$
|
|
6673
|
+
var templateObject_1$10, templateObject_2$G, templateObject_3$y, templateObject_4$n;
|
|
6744
6674
|
|
|
6745
6675
|
function FilteringDropdown(_a) {
|
|
6746
6676
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -6773,7 +6703,7 @@ function FilteringDropdown(_a) {
|
|
|
6773
6703
|
}) }, void 0)] }), void 0));
|
|
6774
6704
|
}
|
|
6775
6705
|
|
|
6776
|
-
var Title$1 = newStyled.div(templateObject_1
|
|
6706
|
+
var Title$1 = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
6777
6707
|
var H3 = newStyled.h3(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
6778
6708
|
var ArrowContainer = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
6779
6709
|
var Container$J = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
@@ -6783,9 +6713,9 @@ var Accordion = function (_a) {
|
|
|
6783
6713
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6784
6714
|
return (jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
6785
6715
|
};
|
|
6786
|
-
var templateObject_1
|
|
6716
|
+
var templateObject_1$$, templateObject_2$F, templateObject_3$x, templateObject_4$m;
|
|
6787
6717
|
|
|
6788
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
6718
|
+
var SectionContent = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
6789
6719
|
var Header$1 = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
6790
6720
|
var MobileHeader = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
6791
6721
|
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"])));
|
|
@@ -6795,7 +6725,7 @@ var OptionContainer = newStyled.div(templateObject_7$a || (templateObject_7$a =
|
|
|
6795
6725
|
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; });
|
|
6796
6726
|
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"])));
|
|
6797
6727
|
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"])));
|
|
6798
|
-
var templateObject_1$
|
|
6728
|
+
var templateObject_1$_, 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;
|
|
6799
6729
|
|
|
6800
6730
|
var getStylesBySize$7 = function (size, theme) {
|
|
6801
6731
|
switch (size) {
|
|
@@ -6860,7 +6790,7 @@ var SelectorSecondary = function (_a) {
|
|
|
6860
6790
|
} }), id: id }, void 0));
|
|
6861
6791
|
};
|
|
6862
6792
|
|
|
6863
|
-
var UL = newStyled.ul(templateObject_1$
|
|
6793
|
+
var UL = newStyled.ul(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
6864
6794
|
var LI = newStyled.li(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
6865
6795
|
var CloseIconContainer = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
6866
6796
|
var Tags = function (_a) {
|
|
@@ -6870,7 +6800,7 @@ var Tags = function (_a) {
|
|
|
6870
6800
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
6871
6801
|
}) }), void 0));
|
|
6872
6802
|
};
|
|
6873
|
-
var templateObject_1$
|
|
6803
|
+
var templateObject_1$Z, templateObject_2$D, templateObject_3$v;
|
|
6874
6804
|
|
|
6875
6805
|
var Filters = function (_a) {
|
|
6876
6806
|
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;
|
|
@@ -7006,7 +6936,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7006
6936
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7007
6937
|
};
|
|
7008
6938
|
|
|
7009
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
6939
|
+
var Wrapper$4 = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
7010
6940
|
var Container$I = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
7011
6941
|
var FitGuarantee = function (_a) {
|
|
7012
6942
|
var _b;
|
|
@@ -7025,9 +6955,9 @@ var FitGuarantee = function (_a) {
|
|
|
7025
6955
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7026
6956
|
} }, { children: title }), void 0), jsxRuntime.jsx(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7027
6957
|
};
|
|
7028
|
-
var templateObject_1$
|
|
6958
|
+
var templateObject_1$Y, templateObject_2$C;
|
|
7029
6959
|
|
|
7030
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
6960
|
+
var Container$H = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
7031
6961
|
var P$2 = newStyled.p(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
7032
6962
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7033
6963
|
border: 'none',
|
|
@@ -7043,9 +6973,9 @@ var FitPredictor = function (_a) {
|
|
|
7043
6973
|
var theme = useTheme();
|
|
7044
6974
|
return (jsxs(Container$H, __assign$1({ theme: theme }, { children: [jsx(Container$H, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7045
6975
|
};
|
|
7046
|
-
var templateObject_1$
|
|
6976
|
+
var templateObject_1$X, templateObject_2$B;
|
|
7047
6977
|
|
|
7048
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
6978
|
+
var Image$1 = newStyled.img(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
7049
6979
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
7050
6980
|
return borderRadiusVariant &&
|
|
7051
6981
|
"\nborder-radius: 20px;\n";
|
|
@@ -7060,7 +6990,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
7060
6990
|
var theme = useTheme();
|
|
7061
6991
|
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
7062
6992
|
};
|
|
7063
|
-
var templateObject_1$
|
|
6993
|
+
var templateObject_1$W;
|
|
7064
6994
|
|
|
7065
6995
|
var Button$5 = newStyled.button(function () { return ({
|
|
7066
6996
|
background: 'transparent',
|
|
@@ -11304,14 +11234,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11304
11234
|
return Slider;
|
|
11305
11235
|
}(React__default["default"].Component);
|
|
11306
11236
|
|
|
11307
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11237
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
11308
11238
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11309
11239
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11310
11240
|
}, function (_a) {
|
|
11311
11241
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11312
11242
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11313
11243
|
});
|
|
11314
|
-
var templateObject_1$
|
|
11244
|
+
var templateObject_1$V;
|
|
11315
11245
|
|
|
11316
11246
|
var getStylesBySize$6 = function (size) {
|
|
11317
11247
|
// rem units
|
|
@@ -11370,7 +11300,7 @@ var SliderNavigation = function (_a) {
|
|
|
11370
11300
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
11371
11301
|
};
|
|
11372
11302
|
|
|
11373
|
-
var horizontalStyles = css(templateObject_1$
|
|
11303
|
+
var horizontalStyles = css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
11374
11304
|
var verticalStyles = css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
11375
11305
|
var Container$G = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
11376
11306
|
var position = _a.position;
|
|
@@ -11401,7 +11331,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11401
11331
|
arrowPadding: 1.625,
|
|
11402
11332
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11403
11333
|
};
|
|
11404
|
-
var templateObject_1$
|
|
11334
|
+
var templateObject_1$U, templateObject_2$A, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$7;
|
|
11405
11335
|
|
|
11406
11336
|
var propTypes = {exports: {}};
|
|
11407
11337
|
|
|
@@ -12994,7 +12924,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
12994
12924
|
afterZoomOut: PropTypes.func
|
|
12995
12925
|
} : {};
|
|
12996
12926
|
|
|
12997
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
12927
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
12998
12928
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12999
12929
|
return borderRadiusVariant &&
|
|
13000
12930
|
"\n border-radius: 40px;\n ";
|
|
@@ -13013,9 +12943,9 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
13013
12943
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13014
12944
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Video$1, { children: jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxRuntime.jsxs(VideoTag$1, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsxRuntime.jsx(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13015
12945
|
};
|
|
13016
|
-
var templateObject_1$
|
|
12946
|
+
var templateObject_1$T, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
13017
12947
|
|
|
13018
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
12948
|
+
var Container$E = newStyled.div(templateObject_1$S || (templateObject_1$S = __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"])));
|
|
13019
12949
|
var ProductGallery = function (_a) {
|
|
13020
12950
|
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;
|
|
13021
12951
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -13027,7 +12957,7 @@ var ProductGallery = function (_a) {
|
|
|
13027
12957
|
setSelectedImage(value);
|
|
13028
12958
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
13029
12959
|
};
|
|
13030
|
-
var templateObject_1$
|
|
12960
|
+
var templateObject_1$S;
|
|
13031
12961
|
|
|
13032
12962
|
var getStylesBySize$5 = function (size) {
|
|
13033
12963
|
switch (size) {
|
|
@@ -13048,7 +12978,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13048
12978
|
};
|
|
13049
12979
|
}
|
|
13050
12980
|
};
|
|
13051
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
12981
|
+
var Container$D = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13052
12982
|
var backgroundColor = _a.backgroundColor;
|
|
13053
12983
|
return backgroundColor;
|
|
13054
12984
|
}, function (_a) {
|
|
@@ -13078,9 +13008,9 @@ var IconButton = function (_a) {
|
|
|
13078
13008
|
var theme = useTheme();
|
|
13079
13009
|
return (jsxRuntime.jsx(Container$D, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13080
13010
|
};
|
|
13081
|
-
var templateObject_1$
|
|
13011
|
+
var templateObject_1$R;
|
|
13082
13012
|
|
|
13083
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13013
|
+
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
13084
13014
|
var AmazonButton = function (_a) {
|
|
13085
13015
|
var onClick = _a.onClick;
|
|
13086
13016
|
return (jsxRuntime.jsx(StyledButton$1, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13089,7 +13019,7 @@ var PaypalButton = function (_a) {
|
|
|
13089
13019
|
var onClick = _a.onClick;
|
|
13090
13020
|
return (jsxRuntime.jsx(StyledButton$1, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13091
13021
|
};
|
|
13092
|
-
var templateObject_1$
|
|
13022
|
+
var templateObject_1$Q;
|
|
13093
13023
|
|
|
13094
13024
|
var useOnClickOutside = function (ref, handler) {
|
|
13095
13025
|
React$2.useEffect(function () {
|
|
@@ -13163,7 +13093,7 @@ var IconsWithTitle = function (_a) {
|
|
|
13163
13093
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$C, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$8, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13164
13094
|
};
|
|
13165
13095
|
|
|
13166
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
13096
|
+
var Container$B = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13167
13097
|
var ImageContainer$2 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13168
13098
|
var StyledTitle = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13169
13099
|
var titlePosition = _a.titlePosition;
|
|
@@ -13175,9 +13105,9 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13175
13105
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
13176
13106
|
return (jsxRuntime.jsxs(Container$B, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$8, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$8, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13177
13107
|
};
|
|
13178
|
-
var templateObject_1$
|
|
13108
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$s;
|
|
13179
13109
|
|
|
13180
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
13110
|
+
var Label$1 = newStyled.span(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
13181
13111
|
var color = _a.color;
|
|
13182
13112
|
return color;
|
|
13183
13113
|
});
|
|
@@ -13190,7 +13120,7 @@ var InputLabel = function (_a) {
|
|
|
13190
13120
|
var theme = useTheme();
|
|
13191
13121
|
return (jsxRuntime.jsxs(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13192
13122
|
};
|
|
13193
|
-
var templateObject_1$
|
|
13123
|
+
var templateObject_1$O, templateObject_2$x;
|
|
13194
13124
|
|
|
13195
13125
|
var containerByStatus = function (theme, status) {
|
|
13196
13126
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13199,7 +13129,7 @@ var containerByStatus = function (theme, status) {
|
|
|
13199
13129
|
return theme.colors.semantic.urgent.color;
|
|
13200
13130
|
return '';
|
|
13201
13131
|
};
|
|
13202
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
13132
|
+
var Container$A = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13203
13133
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13204
13134
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13205
13135
|
});
|
|
@@ -13277,7 +13207,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$b || (templateObject_5
|
|
|
13277
13207
|
return theme.component.input.lineHeight;
|
|
13278
13208
|
});
|
|
13279
13209
|
var ClearInput = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
13280
|
-
var templateObject_1$
|
|
13210
|
+
var templateObject_1$N, templateObject_2$w, templateObject_3$r, templateObject_4$i, templateObject_5$b, templateObject_6$a;
|
|
13281
13211
|
|
|
13282
13212
|
var BaseInput = function (_a) {
|
|
13283
13213
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -13321,7 +13251,7 @@ var Button$3 = function (_a) {
|
|
|
13321
13251
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13322
13252
|
};
|
|
13323
13253
|
|
|
13324
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
13254
|
+
var Container$z = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
13325
13255
|
var theme = _a.theme;
|
|
13326
13256
|
return theme.component.inputCustom.input.borderRadius;
|
|
13327
13257
|
});
|
|
@@ -13342,9 +13272,9 @@ var Custom = function (_a) {
|
|
|
13342
13272
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13343
13273
|
return (jsxRuntime.jsx(Container$z, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13344
13274
|
};
|
|
13345
|
-
var templateObject_1$
|
|
13275
|
+
var templateObject_1$M, templateObject_2$v;
|
|
13346
13276
|
|
|
13347
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13277
|
+
var SuccessContainer = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
13348
13278
|
var size = _a.size;
|
|
13349
13279
|
return (size === 'small' ? '36px' : '');
|
|
13350
13280
|
});
|
|
@@ -13354,9 +13284,9 @@ var Success = function (_a) {
|
|
|
13354
13284
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13355
13285
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13356
13286
|
};
|
|
13357
|
-
var templateObject_1$
|
|
13287
|
+
var templateObject_1$L, templateObject_2$u, templateObject_3$q;
|
|
13358
13288
|
|
|
13359
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13289
|
+
var ButtonContainer = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
13360
13290
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13361
13291
|
return status === exports.InputValidationType.Empty &&
|
|
13362
13292
|
type === 'primary' &&
|
|
@@ -13373,16 +13303,16 @@ var BasePlusButton = function (_a) {
|
|
|
13373
13303
|
}
|
|
13374
13304
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
13375
13305
|
};
|
|
13376
|
-
var templateObject_1$
|
|
13306
|
+
var templateObject_1$K;
|
|
13377
13307
|
|
|
13378
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
13308
|
+
var Container$y = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
13379
13309
|
var IconContainer$2 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
13380
13310
|
var BasePlusIcon = function (_a) {
|
|
13381
13311
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13382
13312
|
var theme = useTheme();
|
|
13383
13313
|
return (jsxRuntime.jsx(Container$y, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13384
13314
|
};
|
|
13385
|
-
var templateObject_1$
|
|
13315
|
+
var templateObject_1$J, templateObject_2$t;
|
|
13386
13316
|
|
|
13387
13317
|
var Input$3 = {
|
|
13388
13318
|
Simple: BaseInput,
|
|
@@ -13391,7 +13321,7 @@ var Input$3 = {
|
|
|
13391
13321
|
SimplePlusIcon: BasePlusIcon,
|
|
13392
13322
|
};
|
|
13393
13323
|
|
|
13394
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
13324
|
+
var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"])), function (_a) {
|
|
13395
13325
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13396
13326
|
return borderRadiusVariant &&
|
|
13397
13327
|
"\n border-radius: 40px;\n ";
|
|
@@ -13497,14 +13427,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13497
13427
|
};
|
|
13498
13428
|
}, [preventTouch, ref, touchStart]);
|
|
13499
13429
|
}
|
|
13500
|
-
var templateObject_1$
|
|
13430
|
+
var templateObject_1$I, templateObject_2$s, templateObject_3$p, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$3;
|
|
13501
13431
|
|
|
13502
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
13432
|
+
var Container$w = newStyled.div(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
13503
13433
|
var ProductGalleryMobile = function (_a) {
|
|
13504
13434
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
13505
13435
|
return (jsxRuntime.jsx(Container$w, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13506
13436
|
};
|
|
13507
|
-
var templateObject_1$
|
|
13437
|
+
var templateObject_1$H;
|
|
13508
13438
|
|
|
13509
13439
|
function _extends() {
|
|
13510
13440
|
_extends = Object.assign || function (target) {
|
|
@@ -13771,7 +13701,7 @@ function useSwipeable(options) {
|
|
|
13771
13701
|
return handlers;
|
|
13772
13702
|
}
|
|
13773
13703
|
|
|
13774
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
13704
|
+
var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
13775
13705
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13776
13706
|
return borderRadiusVariant &&
|
|
13777
13707
|
"\n border-radius: 40px;\n ";
|
|
@@ -13783,16 +13713,16 @@ var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithT
|
|
|
13783
13713
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13784
13714
|
return (jsxRuntime.jsxs(Container$v, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
13785
13715
|
});
|
|
13786
|
-
var templateObject_1$
|
|
13716
|
+
var templateObject_1$G, templateObject_2$r, templateObject_3$o;
|
|
13787
13717
|
|
|
13788
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
13718
|
+
var Button$1 = newStyled.button(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
13789
13719
|
var ArrowButton = function (_a) {
|
|
13790
13720
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13791
13721
|
return (jsxRuntime.jsx(Button$1, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13792
13722
|
};
|
|
13793
|
-
var templateObject_1$
|
|
13723
|
+
var templateObject_1$F;
|
|
13794
13724
|
|
|
13795
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
13725
|
+
var Container$u = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
13796
13726
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13797
13727
|
var SlideDots = function (_a) {
|
|
13798
13728
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -13801,9 +13731,9 @@ var SlideDots = function (_a) {
|
|
|
13801
13731
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13802
13732
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
13803
13733
|
};
|
|
13804
|
-
var templateObject_1$
|
|
13734
|
+
var templateObject_1$E;
|
|
13805
13735
|
|
|
13806
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
13736
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
13807
13737
|
var RightButton = newStyled(NavigationButton)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13808
13738
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13809
13739
|
var SlideNavigation = function (_a) {
|
|
@@ -13817,9 +13747,9 @@ var SlideNavigation = function (_a) {
|
|
|
13817
13747
|
onNavigate(selectedIndex + 1);
|
|
13818
13748
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13819
13749
|
};
|
|
13820
|
-
var templateObject_1$
|
|
13750
|
+
var templateObject_1$D, templateObject_2$q, templateObject_3$n;
|
|
13821
13751
|
|
|
13822
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
13752
|
+
var Container$t = newStyled.div(templateObject_1$C || (templateObject_1$C = __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"])));
|
|
13823
13753
|
var ProductGalleryMobileV2 = function (_a) {
|
|
13824
13754
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
13825
13755
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -13843,7 +13773,7 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
13843
13773
|
}, [index, images]);
|
|
13844
13774
|
return (jsxRuntime.jsxs(Container$t, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
13845
13775
|
};
|
|
13846
|
-
var templateObject_1$
|
|
13776
|
+
var templateObject_1$C;
|
|
13847
13777
|
|
|
13848
13778
|
var __defProp$1 = Object.defineProperty;
|
|
13849
13779
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -13976,7 +13906,7 @@ var Portal = function (_a) {
|
|
|
13976
13906
|
var visibleStyle = function (_a) {
|
|
13977
13907
|
var opened = _a.opened;
|
|
13978
13908
|
return opened
|
|
13979
|
-
? css(templateObject_1$
|
|
13909
|
+
? css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13980
13910
|
};
|
|
13981
13911
|
var transformStyle = function (_a) {
|
|
13982
13912
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
@@ -14024,9 +13954,9 @@ var useModal = function (id) {
|
|
|
14024
13954
|
close: close,
|
|
14025
13955
|
}); }, [close, open, opened]);
|
|
14026
13956
|
};
|
|
14027
|
-
var templateObject_1$
|
|
13957
|
+
var templateObject_1$B, templateObject_2$p, templateObject_3$m, templateObject_4$g, templateObject_5$9, templateObject_6$8;
|
|
14028
13958
|
|
|
14029
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
13959
|
+
var Bar$1 = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14030
13960
|
var height = _a.height;
|
|
14031
13961
|
return height || '0.5rem';
|
|
14032
13962
|
}, function (_a) {
|
|
@@ -14098,9 +14028,9 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14098
14028
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14099
14029
|
return (jsxRuntime.jsxs(Container$r, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14100
14030
|
};
|
|
14101
|
-
var templateObject_1$
|
|
14031
|
+
var templateObject_1$A;
|
|
14102
14032
|
|
|
14103
|
-
var Container$q = newStyled.div(templateObject_1$
|
|
14033
|
+
var Container$q = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
14104
14034
|
var theme = _a.theme;
|
|
14105
14035
|
return theme.component.orderBar.backgroundColor;
|
|
14106
14036
|
});
|
|
@@ -14110,7 +14040,7 @@ var OrderBar = function (_a) {
|
|
|
14110
14040
|
var theme = useTheme();
|
|
14111
14041
|
return (jsxRuntime.jsxs(Container$q, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14112
14042
|
};
|
|
14113
|
-
var templateObject_1$
|
|
14043
|
+
var templateObject_1$z, templateObject_2$o;
|
|
14114
14044
|
|
|
14115
14045
|
var htmlReactParser = {exports: {}};
|
|
14116
14046
|
|
|
@@ -17891,7 +17821,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17891
17821
|
HTMLReactParser$1.attributesToProps;
|
|
17892
17822
|
HTMLReactParser$1.Element;
|
|
17893
17823
|
|
|
17894
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
17824
|
+
var Container$p = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
17895
17825
|
var Card = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
17896
17826
|
var Tag$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __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"])));
|
|
17897
17827
|
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"])));
|
|
@@ -17928,9 +17858,9 @@ var PackCard = function (_a) {
|
|
|
17928
17858
|
currency: currencyCode || 'USD',
|
|
17929
17859
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17930
17860
|
};
|
|
17931
|
-
var templateObject_1$
|
|
17861
|
+
var templateObject_1$y, templateObject_2$n, templateObject_3$l, templateObject_4$f, templateObject_5$8, templateObject_6$7, templateObject_7$6, templateObject_8$5;
|
|
17932
17862
|
|
|
17933
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
17863
|
+
var Container$o = newStyled.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
17934
17864
|
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"])));
|
|
17935
17865
|
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
17936
17866
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -17952,7 +17882,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
17952
17882
|
var background = _a.background;
|
|
17953
17883
|
return background || 'unset';
|
|
17954
17884
|
});
|
|
17955
|
-
var templateObject_1$
|
|
17885
|
+
var templateObject_1$x, templateObject_2$m, templateObject_3$k, templateObject_4$e;
|
|
17956
17886
|
|
|
17957
17887
|
var Pagination = function (_a) {
|
|
17958
17888
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18017,7 +17947,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18017
17947
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18018
17948
|
};
|
|
18019
17949
|
|
|
18020
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
17950
|
+
var Container$n = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18021
17951
|
var width = _a.width;
|
|
18022
17952
|
return width;
|
|
18023
17953
|
}, function (_a) {
|
|
@@ -18035,9 +17965,9 @@ var PaymentMethod = function (_a) {
|
|
|
18035
17965
|
var theme = useTheme();
|
|
18036
17966
|
return (jsxRuntime.jsx(Container$n, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
18037
17967
|
};
|
|
18038
|
-
var templateObject_1$
|
|
17968
|
+
var templateObject_1$w;
|
|
18039
17969
|
|
|
18040
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
17970
|
+
var Container$m = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18041
17971
|
var IMAGE_WIDTH = '63px';
|
|
18042
17972
|
var ImageContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18043
17973
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
@@ -18079,7 +18009,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18079
18009
|
var theme = useTheme();
|
|
18080
18010
|
return (jsxRuntime.jsxs(Container$m, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18081
18011
|
};
|
|
18082
|
-
var templateObject_1$
|
|
18012
|
+
var templateObject_1$v, templateObject_2$l, templateObject_3$j, templateObject_4$d, templateObject_5$7, templateObject_6$6;
|
|
18083
18013
|
|
|
18084
18014
|
var P$1 = newStyled.p(function (_a) {
|
|
18085
18015
|
var color = _a.color;
|
|
@@ -18093,7 +18023,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18093
18023
|
margin: '0.938rem 4.188rem',
|
|
18094
18024
|
});
|
|
18095
18025
|
});
|
|
18096
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18026
|
+
var Bar = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18097
18027
|
var height = _a.height;
|
|
18098
18028
|
return height || '0.5rem';
|
|
18099
18029
|
}, function (_a) {
|
|
@@ -18138,9 +18068,9 @@ var ProgressBar = function (_a) {
|
|
|
18138
18068
|
var theme = useTheme();
|
|
18139
18069
|
return (jsxRuntime.jsxs(Container$l, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18140
18070
|
};
|
|
18141
|
-
var templateObject_1$
|
|
18071
|
+
var templateObject_1$u;
|
|
18142
18072
|
|
|
18143
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
18073
|
+
var Container$k = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
18144
18074
|
var Item$1 = newStyled.span(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
18145
18075
|
var Number$1 = newStyled(Item$1)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
18146
18076
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
@@ -18168,7 +18098,7 @@ var QuantityPicker = function (_a) {
|
|
|
18168
18098
|
}, [value, clamp]);
|
|
18169
18099
|
return (jsxRuntime.jsxs(Container$k, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18170
18100
|
};
|
|
18171
|
-
var templateObject_1$
|
|
18101
|
+
var templateObject_1$t, templateObject_2$k, templateObject_3$i, templateObject_4$c;
|
|
18172
18102
|
|
|
18173
18103
|
/* base styles & size variants */
|
|
18174
18104
|
var CustomRadioStyles$1 = {
|
|
@@ -18237,7 +18167,7 @@ var ContainerStyles$1 = {
|
|
|
18237
18167
|
},
|
|
18238
18168
|
};
|
|
18239
18169
|
|
|
18240
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18170
|
+
var Wrapper$3 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18241
18171
|
var Container$j = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18242
18172
|
var Input$2 = newStyled.input(templateObject_2$j || (templateObject_2$j = __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) {
|
|
18243
18173
|
var disabled = _a.disabled;
|
|
@@ -18257,7 +18187,7 @@ var RadioPrimary = function (_a) {
|
|
|
18257
18187
|
};
|
|
18258
18188
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$j, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18259
18189
|
};
|
|
18260
|
-
var templateObject_1$
|
|
18190
|
+
var templateObject_1$s, templateObject_2$j, templateObject_3$h;
|
|
18261
18191
|
|
|
18262
18192
|
var RadioGroupInput = function (_a) {
|
|
18263
18193
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18336,7 +18266,7 @@ var ContainerStyles = {
|
|
|
18336
18266
|
},
|
|
18337
18267
|
};
|
|
18338
18268
|
|
|
18339
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18269
|
+
var Wrapper$2 = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
18340
18270
|
var Container$i = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18341
18271
|
var Input$1 = newStyled.input(templateObject_2$i || (templateObject_2$i = __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) {
|
|
18342
18272
|
var disabled = _a.disabled;
|
|
@@ -18362,7 +18292,7 @@ var ClubRadioInput = function (_a) {
|
|
|
18362
18292
|
};
|
|
18363
18293
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$i, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
18364
18294
|
};
|
|
18365
|
-
var templateObject_1$
|
|
18295
|
+
var templateObject_1$r, templateObject_2$i, templateObject_3$g;
|
|
18366
18296
|
|
|
18367
18297
|
var ClubRadioGroupInput = function (_a) {
|
|
18368
18298
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18383,7 +18313,7 @@ function formatDate(date) {
|
|
|
18383
18313
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
18384
18314
|
}
|
|
18385
18315
|
|
|
18386
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
18316
|
+
var Container$h = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
18387
18317
|
var Content$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
18388
18318
|
var StarsContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18389
18319
|
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"])));
|
|
@@ -18424,11 +18354,11 @@ var Review$1 = function (_a) {
|
|
|
18424
18354
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$h, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18425
18355
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18426
18356
|
};
|
|
18427
|
-
var templateObject_1$
|
|
18357
|
+
var templateObject_1$q, 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;
|
|
18428
18358
|
|
|
18429
18359
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18430
18360
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18431
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
18361
|
+
var Container$g = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
18432
18362
|
var Heading = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18433
18363
|
var Content = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18434
18364
|
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"])));
|
|
@@ -18480,9 +18410,9 @@ var Review = function (_a) {
|
|
|
18480
18410
|
: description,
|
|
18481
18411
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
18482
18412
|
};
|
|
18483
|
-
var templateObject_1$
|
|
18413
|
+
var templateObject_1$p, 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;
|
|
18484
18414
|
|
|
18485
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
18415
|
+
var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
18486
18416
|
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"])));
|
|
18487
18417
|
var ReviewsCount = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
18488
18418
|
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"])));
|
|
@@ -18498,9 +18428,9 @@ var ReviewsHeader = function (_a) {
|
|
|
18498
18428
|
var theme = useTheme();
|
|
18499
18429
|
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18500
18430
|
};
|
|
18501
|
-
var templateObject_1$
|
|
18431
|
+
var templateObject_1$o, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18502
18432
|
|
|
18503
|
-
var Container$e = newStyled.div(templateObject_1$
|
|
18433
|
+
var Container$e = newStyled.div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
18504
18434
|
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; });
|
|
18505
18435
|
var ScrollToTop = function (_a) {
|
|
18506
18436
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
@@ -18508,7 +18438,7 @@ var ScrollToTop = function (_a) {
|
|
|
18508
18438
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18509
18439
|
return (jsxRuntime.jsxs(Container$e, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18510
18440
|
};
|
|
18511
|
-
var templateObject_1$
|
|
18441
|
+
var templateObject_1$n, templateObject_2$e;
|
|
18512
18442
|
|
|
18513
18443
|
var Input = newStyled.input(function (props) { return ({
|
|
18514
18444
|
padding: props.theme.component.input.padding,
|
|
@@ -18539,7 +18469,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
18539
18469
|
},
|
|
18540
18470
|
}); });
|
|
18541
18471
|
|
|
18542
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
18472
|
+
var Container$d = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
18543
18473
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
18544
18474
|
}));
|
|
18545
18475
|
var Description = newStyled.div({
|
|
@@ -18558,7 +18488,7 @@ var ProductItem = function (_a) {
|
|
|
18558
18488
|
var theme = useTheme();
|
|
18559
18489
|
return (jsxRuntime.jsxs(Container$d, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
18560
18490
|
};
|
|
18561
|
-
var templateObject_1$
|
|
18491
|
+
var templateObject_1$m;
|
|
18562
18492
|
|
|
18563
18493
|
var Container$c = newStyled.div({
|
|
18564
18494
|
display: 'flex',
|
|
@@ -18574,7 +18504,7 @@ var Ul = newStyled.ul({
|
|
|
18574
18504
|
margin: '0px',
|
|
18575
18505
|
padding: '0px',
|
|
18576
18506
|
});
|
|
18577
|
-
var Li = newStyled.li(templateObject_1$
|
|
18507
|
+
var Li = newStyled.li(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
18578
18508
|
padding: [0, '0rem 1rem'],
|
|
18579
18509
|
borderRadius: [0, '0.5rem'],
|
|
18580
18510
|
}));
|
|
@@ -18599,9 +18529,9 @@ var ResultsPanel = function (_a) {
|
|
|
18599
18529
|
var theme = useTheme();
|
|
18600
18530
|
return (jsxRuntime.jsxs(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
18601
18531
|
};
|
|
18602
|
-
var templateObject_1$
|
|
18532
|
+
var templateObject_1$l, templateObject_2$d, templateObject_3$c;
|
|
18603
18533
|
|
|
18604
|
-
var Button = newStyled.button(templateObject_1$
|
|
18534
|
+
var Button = newStyled.button(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
18605
18535
|
right: ['1rem', '7.75rem'],
|
|
18606
18536
|
top: ['0.75rem', '0.75rem'],
|
|
18607
18537
|
}));
|
|
@@ -18610,7 +18540,7 @@ var ClearButton = function (_a) {
|
|
|
18610
18540
|
var theme = useTheme();
|
|
18611
18541
|
return (jsxRuntime.jsx(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
18612
18542
|
};
|
|
18613
|
-
var templateObject_1$
|
|
18543
|
+
var templateObject_1$k;
|
|
18614
18544
|
|
|
18615
18545
|
var SearchIconContainer = newStyled.div({
|
|
18616
18546
|
display: 'flex',
|
|
@@ -18620,7 +18550,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
18620
18550
|
background: 'white',
|
|
18621
18551
|
alignSelf: 'center',
|
|
18622
18552
|
});
|
|
18623
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
18553
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
18624
18554
|
var SearchControl = function (_a) {
|
|
18625
18555
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
18626
18556
|
var theme = useTheme();
|
|
@@ -18636,7 +18566,7 @@ var SearchControl = function (_a) {
|
|
|
18636
18566
|
}
|
|
18637
18567
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
18638
18568
|
};
|
|
18639
|
-
var templateObject_1$
|
|
18569
|
+
var templateObject_1$j;
|
|
18640
18570
|
|
|
18641
18571
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
18642
18572
|
var reducer = function (state, action) {
|
|
@@ -18703,7 +18633,7 @@ var SearchBar = function (_a) {
|
|
|
18703
18633
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
18704
18634
|
};
|
|
18705
18635
|
|
|
18706
|
-
var Container$9 = newStyled.div(templateObject_1$
|
|
18636
|
+
var Container$9 = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
18707
18637
|
var BackArrow = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
18708
18638
|
var BoldSpan = newStyled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
18709
18639
|
var NormalSpan = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
@@ -18714,9 +18644,9 @@ var SearchNavigation = function (_a) {
|
|
|
18714
18644
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18715
18645
|
}) }, void 0)] }, void 0));
|
|
18716
18646
|
};
|
|
18717
|
-
var templateObject_1$
|
|
18647
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$b, templateObject_4$8, templateObject_5$3;
|
|
18718
18648
|
|
|
18719
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
18649
|
+
var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
18720
18650
|
var alignCenter = _a.alignCenter;
|
|
18721
18651
|
return alignCenter &&
|
|
18722
18652
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -18733,9 +18663,9 @@ var ShortBanner = function (_a) {
|
|
|
18733
18663
|
var theme = useTheme();
|
|
18734
18664
|
return (jsxRuntime.jsxs(Container$8, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
18735
18665
|
};
|
|
18736
|
-
var templateObject_1$
|
|
18666
|
+
var templateObject_1$h, templateObject_2$b, templateObject_3$a;
|
|
18737
18667
|
|
|
18738
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
18668
|
+
var TableElement$1 = newStyled.table(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
18739
18669
|
var TableCell$1 = newStyled.td(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
18740
18670
|
var TableHead$1 = newStyled.th(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
18741
18671
|
var TableRow$1 = newStyled.tr(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
@@ -18771,9 +18701,9 @@ var SizeChartTable = function (_a) {
|
|
|
18771
18701
|
backgroundColor: getCellColor(index, cell),
|
|
18772
18702
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
18773
18703
|
};
|
|
18774
|
-
var templateObject_1$
|
|
18704
|
+
var templateObject_1$g, templateObject_2$a, templateObject_3$9, templateObject_4$7;
|
|
18775
18705
|
|
|
18776
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
18706
|
+
var TableElement = newStyled.table(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
18777
18707
|
var TableCell = newStyled.td(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
18778
18708
|
var TableHead = newStyled.th(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
18779
18709
|
var TableRow = newStyled.tr(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
@@ -18782,7 +18712,7 @@ var SizeTable = function (_a) {
|
|
|
18782
18712
|
var theme = useTheme();
|
|
18783
18713
|
return (jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
18784
18714
|
};
|
|
18785
|
-
var templateObject_1$
|
|
18715
|
+
var templateObject_1$f, templateObject_2$9, templateObject_3$8, templateObject_4$6;
|
|
18786
18716
|
|
|
18787
18717
|
var getStylesBySize$4 = function (size) {
|
|
18788
18718
|
switch (size) {
|
|
@@ -18809,7 +18739,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
18809
18739
|
} });
|
|
18810
18740
|
};
|
|
18811
18741
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
18812
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
18742
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
18813
18743
|
};
|
|
18814
18744
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
18815
18745
|
if (disabled)
|
|
@@ -18825,18 +18755,18 @@ var TextButton = function (_a) {
|
|
|
18825
18755
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
18826
18756
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
18827
18757
|
};
|
|
18828
|
-
var templateObject_1$
|
|
18758
|
+
var templateObject_1$e;
|
|
18829
18759
|
|
|
18830
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
18760
|
+
var Container$7 = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
18831
18761
|
var P = newStyled.p(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
18832
18762
|
var PercentageSpan = newStyled.span(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
18833
18763
|
var SizeFitGuide = function (_a) {
|
|
18834
18764
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
18835
18765
|
return (jsxRuntime.jsxs(Container$7, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
18836
18766
|
};
|
|
18837
|
-
var templateObject_1$
|
|
18767
|
+
var templateObject_1$d, templateObject_2$8, templateObject_3$7;
|
|
18838
18768
|
|
|
18839
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
18769
|
+
var ButtonsContainer = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
18840
18770
|
var inline = _a.inline;
|
|
18841
18771
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
18842
18772
|
});
|
|
@@ -18855,9 +18785,9 @@ var SizeSelector = function (_a) {
|
|
|
18855
18785
|
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
18856
18786
|
}) }), void 0)] }), void 0));
|
|
18857
18787
|
};
|
|
18858
|
-
var templateObject_1$
|
|
18788
|
+
var templateObject_1$c;
|
|
18859
18789
|
|
|
18860
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
18790
|
+
var TabContainer = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
18861
18791
|
var titleSize = _a.titleSize;
|
|
18862
18792
|
return titleSize;
|
|
18863
18793
|
}, function (_a) {
|
|
@@ -18874,9 +18804,9 @@ var Tab = function (_a) {
|
|
|
18874
18804
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
18875
18805
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
18876
18806
|
};
|
|
18877
|
-
var templateObject_1$
|
|
18807
|
+
var templateObject_1$b;
|
|
18878
18808
|
|
|
18879
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
18809
|
+
var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
18880
18810
|
var TabList = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"])), function (_a) {
|
|
18881
18811
|
var backgroundColor = _a.backgroundColor;
|
|
18882
18812
|
return backgroundColor;
|
|
@@ -18893,14 +18823,14 @@ var Tabs = function (_a) {
|
|
|
18893
18823
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
18894
18824
|
return (jsxRuntime.jsxs(Container$6, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
18895
18825
|
};
|
|
18896
|
-
var templateObject_1$
|
|
18826
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$6, templateObject_4$5;
|
|
18897
18827
|
|
|
18898
|
-
var Container$5 = newStyled.div(templateObject_1$
|
|
18828
|
+
var Container$5 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
18899
18829
|
var Tag = function (_a) {
|
|
18900
18830
|
var text = _a.text, className = _a.className;
|
|
18901
18831
|
return jsxRuntime.jsx(Container$5, __assign$1({ className: className }, { children: text }), void 0);
|
|
18902
18832
|
};
|
|
18903
|
-
var templateObject_1$
|
|
18833
|
+
var templateObject_1$9;
|
|
18904
18834
|
|
|
18905
18835
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
18906
18836
|
switch (size) {
|
|
@@ -19011,7 +18941,7 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19011
18941
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19012
18942
|
};
|
|
19013
18943
|
|
|
19014
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
18944
|
+
var ImageWrapper = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19015
18945
|
var VideoOverlay = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19016
18946
|
var FullscreenVideo = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19017
18947
|
var ImageVideo = function (_a) {
|
|
@@ -19033,9 +18963,9 @@ var ImageVideo = function (_a) {
|
|
|
19033
18963
|
height: '100%',
|
|
19034
18964
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19035
18965
|
};
|
|
19036
|
-
var templateObject_1$
|
|
18966
|
+
var templateObject_1$8, templateObject_2$6, templateObject_3$5;
|
|
19037
18967
|
|
|
19038
|
-
var ContainerDesktop = css(templateObject_1$
|
|
18968
|
+
var ContainerDesktop = css(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19039
18969
|
var ContainerMobile = css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19040
18970
|
var Container$4 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19041
18971
|
var TextContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
@@ -19068,9 +18998,47 @@ var TextWithImage = function (_a) {
|
|
|
19068
18998
|
},
|
|
19069
18999
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19070
19000
|
};
|
|
19071
|
-
var templateObject_1$
|
|
19001
|
+
var templateObject_1$7, templateObject_2$5, templateObject_3$4, templateObject_4$4;
|
|
19072
19002
|
|
|
19073
|
-
var
|
|
19003
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19004
|
+
var timerColor = _a.timerColor;
|
|
19005
|
+
return timerColor || '';
|
|
19006
|
+
});
|
|
19007
|
+
var timeToSeconds = function (_a) {
|
|
19008
|
+
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
19009
|
+
return hours * 3600 + minutes * 60 + seconds;
|
|
19010
|
+
};
|
|
19011
|
+
var secondsToTime = function (secs) {
|
|
19012
|
+
var hours = Math.floor(secs / 3600);
|
|
19013
|
+
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
19014
|
+
var seconds = secs - hours * 3600 - minutes * 60;
|
|
19015
|
+
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
19016
|
+
};
|
|
19017
|
+
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
19018
|
+
var Timer = function (_a) {
|
|
19019
|
+
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.showHours, showHours = _d === void 0 ? true : _d, _e = _a.timerColor, timerColor = _e === void 0 ? '#292929' : _e, countdown = _a.countdown, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "showHours", "timerColor", "countdown"]);
|
|
19020
|
+
var _f = React$2.useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _f[0], setSecs = _f[1];
|
|
19021
|
+
React$2.useEffect(function () {
|
|
19022
|
+
var timer = setInterval(function () {
|
|
19023
|
+
setSecs(function (seconds) {
|
|
19024
|
+
if (seconds === 1) {
|
|
19025
|
+
clearInterval(timer);
|
|
19026
|
+
onTimeUp();
|
|
19027
|
+
return 0;
|
|
19028
|
+
}
|
|
19029
|
+
return seconds - 1;
|
|
19030
|
+
});
|
|
19031
|
+
}, 1000);
|
|
19032
|
+
if (secs <= 0)
|
|
19033
|
+
clearInterval(timer);
|
|
19034
|
+
return function () { return clearInterval(timer); };
|
|
19035
|
+
}, [onTimeUp, secs]);
|
|
19036
|
+
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19037
|
+
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19038
|
+
};
|
|
19039
|
+
var templateObject_1$6;
|
|
19040
|
+
|
|
19041
|
+
var Wrapper$1 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
19074
19042
|
var GrandTotal = newStyled.h1(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
19075
19043
|
var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
19076
19044
|
var theme = _a.theme;
|
|
@@ -19099,7 +19067,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
|
|
|
19099
19067
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19100
19068
|
});
|
|
19101
19069
|
var TotalLabel = newStyled(Text$8)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19102
|
-
var templateObject_1$
|
|
19070
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
19103
19071
|
|
|
19104
19072
|
var Total = function (_a) {
|
|
19105
19073
|
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;
|
|
@@ -19107,7 +19075,7 @@ var Total = function (_a) {
|
|
|
19107
19075
|
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$3, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19108
19076
|
};
|
|
19109
19077
|
|
|
19110
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19078
|
+
var Wrapper = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19111
19079
|
var color = _a.color;
|
|
19112
19080
|
return color;
|
|
19113
19081
|
});
|
|
@@ -19132,14 +19100,14 @@ var Subtotal = function (_a) {
|
|
|
19132
19100
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19133
19101
|
})] }), void 0));
|
|
19134
19102
|
};
|
|
19135
|
-
var templateObject_1$
|
|
19103
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$2;
|
|
19136
19104
|
|
|
19137
19105
|
var Totals = {
|
|
19138
19106
|
Total: Total,
|
|
19139
19107
|
Subtotal: Subtotal,
|
|
19140
19108
|
};
|
|
19141
19109
|
|
|
19142
|
-
var Container$2 = newStyled.div(templateObject_1$
|
|
19110
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19143
19111
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19144
19112
|
var CheckpointDate$1 = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19145
19113
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
@@ -19191,9 +19159,9 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19191
19159
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19192
19160
|
})] }), void 0));
|
|
19193
19161
|
};
|
|
19194
|
-
var templateObject_1$
|
|
19162
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11;
|
|
19195
19163
|
|
|
19196
|
-
var Container$1 = newStyled.div(templateObject_1$
|
|
19164
|
+
var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19197
19165
|
var CheckpointContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19198
19166
|
var CheckpointDate = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19199
19167
|
var CheckpointDateLabel = newStyled.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
@@ -19231,7 +19199,36 @@ var TrackingProgress = function (_a) {
|
|
|
19231
19199
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19232
19200
|
})] }), void 0));
|
|
19233
19201
|
};
|
|
19234
|
-
var templateObject_1$
|
|
19202
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19203
|
+
|
|
19204
|
+
var TimerContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __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) {
|
|
19205
|
+
var textPosition = _a.textPosition;
|
|
19206
|
+
return textPosition;
|
|
19207
|
+
}, function (_a) {
|
|
19208
|
+
var backgroundColor = _a.backgroundColor;
|
|
19209
|
+
return backgroundColor;
|
|
19210
|
+
}, function (_a) {
|
|
19211
|
+
var borderRadius = _a.borderRadius;
|
|
19212
|
+
return borderRadius || 'unset';
|
|
19213
|
+
}, function (_a) {
|
|
19214
|
+
var borderRadius = _a.borderRadius;
|
|
19215
|
+
return borderRadius || '8px';
|
|
19216
|
+
});
|
|
19217
|
+
var templateObject_1$1;
|
|
19218
|
+
|
|
19219
|
+
var getDefaultCountdown = function () {
|
|
19220
|
+
var tomorrowDate = new Date();
|
|
19221
|
+
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
19222
|
+
tomorrowDate.setHours(0, 0, 0, 0);
|
|
19223
|
+
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
19224
|
+
return Number(totalSeconds.toFixed(0));
|
|
19225
|
+
};
|
|
19226
|
+
|
|
19227
|
+
var HurryUp = function (_a) {
|
|
19228
|
+
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.clockPosition, clockPosition = _e === void 0 ? 'left' : _e, _f = _a.countdown, countdown = _f === void 0 ? getDefaultCountdown() : _f, timerProps = __rest(_a, ["hurryUpText", "backgroundColor", "iconSize", "textPosition", "showTimer", "clockPosition", "countdown"]);
|
|
19229
|
+
var theme = useTheme();
|
|
19230
|
+
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
19231
|
+
};
|
|
19235
19232
|
|
|
19236
19233
|
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
19237
19234
|
var size = _a.size;
|