@trafilea/afrodita-components 6.1.1 → 6.3.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 +43 -32
- package/build/index.esm.js +441 -402
- package/build/index.esm.js.map +1 -1
- package/build/index.js +440 -401
- 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.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as jsx$1,
|
|
1
|
+
import { jsx as jsx$1, jsxs as jsxs$1, Fragment as Fragment$2 } from 'react/jsx-runtime';
|
|
2
2
|
import * as React$2 from 'react';
|
|
3
3
|
import React__default, { forwardRef, useContext, createElement, createContext, Fragment as Fragment$1, useRef, useLayoutEffect, useMemo, useState, useEffect, useCallback, useReducer, createRef, isValidElement, cloneElement } from 'react';
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
@@ -3067,22 +3067,21 @@ var inline = function (text) {
|
|
|
3067
3067
|
};
|
|
3068
3068
|
|
|
3069
3069
|
var ThemeProvider = function (_a) {
|
|
3070
|
-
var theme = _a.theme, children = _a.children;
|
|
3070
|
+
var theme = _a.theme, isSameOriginIcons = _a.isSameOriginIcons, children = _a.children;
|
|
3071
|
+
//TODO Analyze why we are doing this and remove
|
|
3071
3072
|
var parsedTheme = useMemo(function () { return applyVariablesIntoTheme(theme); }, [theme]);
|
|
3072
|
-
|
|
3073
|
+
var themeWithOtherVariables = __assign$1(__assign$1({}, parsedTheme), { assets: __assign$1(__assign$1({}, parsedTheme.assets), { isSameOriginIcons: isSameOriginIcons }) });
|
|
3074
|
+
return (jsx$1(ThemeProvider$1, __assign$1({ theme: themeWithOtherVariables }, { children: jsx$1(AssetsProvider, __assign$1({ assets: themeWithOtherVariables.assets }, { children: children }), void 0) }), void 0));
|
|
3073
3075
|
};
|
|
3074
3076
|
var useTheme = function () { return useTheme$1(); };
|
|
3075
3077
|
var DefaultContainer = function (props) { return jsx$1("div", __assign$1({}, props), void 0); };
|
|
3076
3078
|
var ThemeVariables = function (_a) {
|
|
3077
|
-
var _b;
|
|
3078
|
-
var
|
|
3079
|
-
|
|
3080
|
-
useEffect(function () {
|
|
3081
|
-
setVariables(transformThemeIntoVariables(theme));
|
|
3082
|
-
}, [theme]);
|
|
3083
|
-
return (jsx$1(Container, { children: jsx$1("style", { "data-theme-name": ((_b = theme.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || 'unamed-theme', dangerouslySetInnerHTML: { __html: variables } }, void 0) }, void 0));
|
|
3079
|
+
var theme = _a.theme, _b = _a.Container, Container = _b === void 0 ? DefaultContainer : _b;
|
|
3080
|
+
var variables = transformThemeIntoVariables(theme);
|
|
3081
|
+
return (jsx$1(Container, { children: jsx$1("style", { "data-theme-name": theme.name.toLowerCase(), dangerouslySetInnerHTML: { __html: variables } }, void 0) }, void 0));
|
|
3084
3082
|
};
|
|
3085
3083
|
var AssetsContext = createContext({
|
|
3084
|
+
isSameOriginIcons: false,
|
|
3086
3085
|
cdn: '',
|
|
3087
3086
|
images: {
|
|
3088
3087
|
favicon: '',
|
|
@@ -3091,12 +3090,53 @@ var AssetsContext = createContext({
|
|
|
3091
3090
|
});
|
|
3092
3091
|
var AssetsProvider = function (_a) {
|
|
3093
3092
|
var assets = _a.assets, children = _a.children;
|
|
3094
|
-
|
|
3095
|
-
return jsx$1(AssetsContext.Provider, __assign$1({ value: context }, { children: children }), void 0);
|
|
3093
|
+
return jsx$1(AssetsContext.Provider, __assign$1({ value: assets }, { children: children }), void 0);
|
|
3096
3094
|
};
|
|
3097
3095
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
3098
3096
|
|
|
3099
|
-
var
|
|
3097
|
+
var formatPrice = function (value, _a) {
|
|
3098
|
+
var _b;
|
|
3099
|
+
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;
|
|
3100
|
+
var _f = value.toFixed(3).split('.'), integer = _f[0], fraction = _f[1];
|
|
3101
|
+
// this prevents `Intl.NumberFormat` from rounding the number
|
|
3102
|
+
var valueToFormat = parseFloat("".concat(integer, ".").concat((_b = fraction === null || fraction === void 0 ? void 0 : fraction.slice(0, 2)) !== null && _b !== void 0 ? _b : 0));
|
|
3103
|
+
return new Intl.NumberFormat(locale, {
|
|
3104
|
+
style: 'currency',
|
|
3105
|
+
currency: currency,
|
|
3106
|
+
maximumFractionDigits: 3,
|
|
3107
|
+
}).format(valueToFormat);
|
|
3108
|
+
};
|
|
3109
|
+
|
|
3110
|
+
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) {
|
|
3111
|
+
var height = _a.height;
|
|
3112
|
+
return (height ? height : '1.5em');
|
|
3113
|
+
}, function (_a) {
|
|
3114
|
+
var width = _a.width;
|
|
3115
|
+
return (width ? width : '100%');
|
|
3116
|
+
}, function (_a) {
|
|
3117
|
+
var theme = _a.theme;
|
|
3118
|
+
return theme.colors.background.disabled;
|
|
3119
|
+
}, function (_a) {
|
|
3120
|
+
var theme = _a.theme;
|
|
3121
|
+
return theme.radius.regular;
|
|
3122
|
+
}, function (_a) {
|
|
3123
|
+
var theme = _a.theme;
|
|
3124
|
+
return theme.colors.shades['10'].color;
|
|
3125
|
+
}, function (_a) {
|
|
3126
|
+
var theme = _a.theme;
|
|
3127
|
+
return theme.colors.background.disabled;
|
|
3128
|
+
}, function (_a) {
|
|
3129
|
+
var theme = _a.theme;
|
|
3130
|
+
return theme.colors.shades['10'].color;
|
|
3131
|
+
});
|
|
3132
|
+
var SkeletonBox = function (_a) {
|
|
3133
|
+
var width = _a.width, height = _a.height;
|
|
3134
|
+
var theme = useTheme();
|
|
3135
|
+
return jsx$1(Container$17, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3136
|
+
};
|
|
3137
|
+
var templateObject_1$1O;
|
|
3138
|
+
|
|
3139
|
+
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) {
|
|
3100
3140
|
var width = _a.width;
|
|
3101
3141
|
return width;
|
|
3102
3142
|
}, function (_a) {
|
|
@@ -3125,7 +3165,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1a || (templateObject_2$
|
|
|
3125
3165
|
var opacity = _a.opacity;
|
|
3126
3166
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3127
3167
|
});
|
|
3128
|
-
var templateObject_1$
|
|
3168
|
+
var templateObject_1$1N, templateObject_2$1a;
|
|
3129
3169
|
|
|
3130
3170
|
/* eslint-disable no-undef */
|
|
3131
3171
|
var cache = new Map();
|
|
@@ -3161,19 +3201,26 @@ var fetchWithCache = function (request, saveToCacheFn) {
|
|
|
3161
3201
|
var createIconImage = function (_a) {
|
|
3162
3202
|
var src = _a.src;
|
|
3163
3203
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
3164
|
-
var
|
|
3204
|
+
var localUrl, error_1;
|
|
3165
3205
|
return __generator(this, function (_b) {
|
|
3166
3206
|
switch (_b.label) {
|
|
3167
3207
|
case 0:
|
|
3168
3208
|
_b.trys.push([0, 2, , 3]);
|
|
3169
|
-
return [4 /*yield*/, fetchWithCache(src, function (response) { return
|
|
3209
|
+
return [4 /*yield*/, fetchWithCache(src, function (response) { return __awaiter(void 0, void 0, void 0, function () {
|
|
3210
|
+
var blob;
|
|
3211
|
+
return __generator(this, function (_a) {
|
|
3212
|
+
switch (_a.label) {
|
|
3213
|
+
case 0: return [4 /*yield*/, response.blob()];
|
|
3214
|
+
case 1:
|
|
3215
|
+
blob = _a.sent();
|
|
3216
|
+
return [2 /*return*/, URL.createObjectURL(blob)];
|
|
3217
|
+
}
|
|
3218
|
+
});
|
|
3219
|
+
}); })];
|
|
3170
3220
|
case 1:
|
|
3171
|
-
|
|
3172
|
-
localUrl_1 = URL.createObjectURL(blob);
|
|
3173
|
-
cleanup = function () { return URL.revokeObjectURL(localUrl_1); };
|
|
3221
|
+
localUrl = _b.sent();
|
|
3174
3222
|
return [2 /*return*/, {
|
|
3175
|
-
src:
|
|
3176
|
-
cleanup: cleanup,
|
|
3223
|
+
src: localUrl,
|
|
3177
3224
|
}];
|
|
3178
3225
|
case 2:
|
|
3179
3226
|
error_1 = _b.sent();
|
|
@@ -3196,15 +3243,10 @@ var getIconDimension = function (dimension) {
|
|
|
3196
3243
|
return "".concat(dimension, "rem");
|
|
3197
3244
|
};
|
|
3198
3245
|
|
|
3199
|
-
|
|
3200
|
-
var
|
|
3201
|
-
var
|
|
3202
|
-
var
|
|
3203
|
-
var _c = useState(false), error = _c[0], setError = _c[1];
|
|
3204
|
-
var _d = useState(), localSource = _d[0], setLocalSource = _d[1];
|
|
3205
|
-
var newWidth = width && getIconDimension(width);
|
|
3206
|
-
var newHeight = height ? getIconDimension(height) : getIconDimension(width);
|
|
3207
|
-
var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
|
|
3246
|
+
var IconFromExtSource = function (_a) {
|
|
3247
|
+
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"]);
|
|
3248
|
+
var _b = useState(false), error = _b[0], setError = _b[1];
|
|
3249
|
+
var _c = useState(), localSource = _c[0], setLocalSource = _c[1];
|
|
3208
3250
|
useEffect(function () {
|
|
3209
3251
|
var fetchIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
3210
3252
|
var localSource;
|
|
@@ -3227,22 +3269,35 @@ var Icon$1 = function (_a) {
|
|
|
3227
3269
|
if (!localSource) {
|
|
3228
3270
|
fetchIcon();
|
|
3229
3271
|
}
|
|
3230
|
-
|
|
3231
|
-
|
|
3232
|
-
var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height: newHeight, width: newWidth }, rest);
|
|
3272
|
+
}, [iconURL]);
|
|
3273
|
+
var imageProperties = __assign$1({ alt: title !== null && title !== void 0 ? title : name, 'data-testid': testId, height: height, width: width }, rest);
|
|
3233
3274
|
if (error) {
|
|
3234
|
-
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties,
|
|
3275
|
+
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, { src: iconURL }), void 0);
|
|
3235
3276
|
}
|
|
3236
3277
|
if (!localSource) {
|
|
3237
|
-
return jsx$1(
|
|
3278
|
+
return jsx$1(SkeletonBox, { width: width, height: height }, void 0);
|
|
3238
3279
|
}
|
|
3239
3280
|
if (!fill && !svgProps) {
|
|
3240
3281
|
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3241
3282
|
}
|
|
3283
|
+
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { xlinkHref: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3284
|
+
};
|
|
3285
|
+
|
|
3286
|
+
/* eslint-disable react/forbid-component-props */
|
|
3287
|
+
var UnmemoIcon = function (_a) {
|
|
3288
|
+
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"]);
|
|
3289
|
+
var assets = useTheme().assets;
|
|
3290
|
+
var newWidth = width && getIconDimension(width);
|
|
3291
|
+
var newHeight = height ? getIconDimension(height) : getIconDimension(width);
|
|
3292
|
+
var iconURL = "".concat(assets.cdn, "/icons/").concat(name, ".svg");
|
|
3242
3293
|
var svgSplit = name.split('/');
|
|
3243
3294
|
var svgId = svgSplit[svgSplit.length - 1];
|
|
3244
|
-
|
|
3245
|
-
};
|
|
3295
|
+
if (assets.isSameOriginIcons) {
|
|
3296
|
+
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { xlinkHref: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3297
|
+
}
|
|
3298
|
+
return (jsx$1(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
|
|
3299
|
+
};
|
|
3300
|
+
var Icon$1 = React__default.memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
|
|
3246
3301
|
|
|
3247
3302
|
var Add = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3248
3303
|
|
|
@@ -3985,7 +4040,7 @@ function jsxs(type, props, key) {
|
|
|
3985
4040
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
3986
4041
|
// `variants` styles that are consistent through all themes.
|
|
3987
4042
|
var TAGS = {
|
|
3988
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4043
|
+
hero1: newStyled.h1(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""]))),
|
|
3989
4044
|
hero2: newStyled.h2(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject([""], [""]))),
|
|
3990
4045
|
hero3: newStyled.h3(templateObject_3$U || (templateObject_3$U = __makeTemplateObject([""], [""]))),
|
|
3991
4046
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
@@ -4121,95 +4176,9 @@ var DEFAULTS = {
|
|
|
4121
4176
|
size: 'regular',
|
|
4122
4177
|
},
|
|
4123
4178
|
};
|
|
4124
|
-
var templateObject_1$
|
|
4125
|
-
|
|
4126
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
4127
|
-
var timerColor = _a.timerColor;
|
|
4128
|
-
return timerColor || '';
|
|
4129
|
-
});
|
|
4130
|
-
var timeToSeconds = function (_a) {
|
|
4131
|
-
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
4132
|
-
return hours * 3600 + minutes * 60 + seconds;
|
|
4133
|
-
};
|
|
4134
|
-
var secondsToTime = function (secs) {
|
|
4135
|
-
var hours = Math.floor(secs / 3600);
|
|
4136
|
-
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
4137
|
-
var seconds = secs - hours * 3600 - minutes * 60;
|
|
4138
|
-
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
4139
|
-
};
|
|
4140
|
-
var Timer = function (_a) {
|
|
4141
|
-
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.timerColor, timerColor = _d === void 0 ? '#292929' : _d, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "timerColor"]);
|
|
4142
|
-
var _e = useState(timeToSeconds(rest)), secs = _e[0], setSecs = _e[1];
|
|
4143
|
-
useEffect(function () {
|
|
4144
|
-
var timer = setInterval(function () {
|
|
4145
|
-
setSecs(function (seconds) {
|
|
4146
|
-
if (seconds === 1) {
|
|
4147
|
-
clearInterval(timer);
|
|
4148
|
-
onTimeUp();
|
|
4149
|
-
return 0;
|
|
4150
|
-
}
|
|
4151
|
-
return seconds - 1;
|
|
4152
|
-
});
|
|
4153
|
-
}, 1000);
|
|
4154
|
-
if (secs <= 0)
|
|
4155
|
-
clearInterval(timer);
|
|
4156
|
-
return function () { return clearInterval(timer); };
|
|
4157
|
-
}, [onTimeUp, secs]);
|
|
4158
|
-
var _f = secondsToTime(secs), hours = _f.hours, minutes = _f.minutes, seconds = _f.seconds;
|
|
4159
|
-
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
4160
|
-
};
|
|
4161
|
-
var templateObject_1$1M;
|
|
4162
|
-
|
|
4163
|
-
var TimerContainer = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
4164
|
-
var textPosition = _a.textPosition;
|
|
4165
|
-
return textPosition;
|
|
4166
|
-
}, function (_a) {
|
|
4167
|
-
var backgroundColor = _a.backgroundColor;
|
|
4168
|
-
return backgroundColor;
|
|
4169
|
-
}, function (_a) {
|
|
4170
|
-
var borderRadius = _a.borderRadius;
|
|
4171
|
-
return borderRadius || 'unset';
|
|
4172
|
-
}, function (_a) {
|
|
4173
|
-
var borderRadius = _a.borderRadius;
|
|
4174
|
-
return borderRadius || '8px';
|
|
4175
|
-
});
|
|
4176
|
-
var templateObject_1$1L;
|
|
4177
|
-
|
|
4178
|
-
var HurryUp = function (_a) {
|
|
4179
|
-
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.showSeconds, showSeconds = _e === void 0 ? true : _e, timerColor = _a.timerColor;
|
|
4180
|
-
var theme = useTheme();
|
|
4181
|
-
var _f = React__default.useMemo(function () {
|
|
4182
|
-
var tomorrowDate = new Date();
|
|
4183
|
-
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
4184
|
-
tomorrowDate.setHours(0, 0, 0, 0);
|
|
4185
|
-
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
4186
|
-
var hours = Math.floor(totalSeconds / 3600);
|
|
4187
|
-
var restOfHour = Math.floor(totalSeconds % 3600);
|
|
4188
|
-
var minutes = Math.floor(restOfHour / 60);
|
|
4189
|
-
var seconds = Math.floor(totalSeconds % 60);
|
|
4190
|
-
return {
|
|
4191
|
-
hours: hours,
|
|
4192
|
-
minutes: minutes,
|
|
4193
|
-
seconds: seconds,
|
|
4194
|
-
};
|
|
4195
|
-
}, []), hours = _f.hours, minutes = _f.minutes, seconds = _f.seconds;
|
|
4196
|
-
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsx$1(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && (jsx$1(Timer, { hours: hours, minutes: minutes, seconds: seconds, showSeconds: showSeconds, timerColor: timerColor, onTimeUp: function () { } }, void 0))] }), void 0));
|
|
4197
|
-
};
|
|
4198
|
-
|
|
4199
|
-
var formatPrice = function (value, _a) {
|
|
4200
|
-
var _b;
|
|
4201
|
-
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;
|
|
4202
|
-
var _f = value.toFixed(3).split('.'), integer = _f[0], fraction = _f[1];
|
|
4203
|
-
// this prevents `Intl.NumberFormat` from rounding the number
|
|
4204
|
-
var valueToFormat = parseFloat("".concat(integer, ".").concat((_b = fraction === null || fraction === void 0 ? void 0 : fraction.slice(0, 2)) !== null && _b !== void 0 ? _b : 0));
|
|
4205
|
-
return new Intl.NumberFormat(locale, {
|
|
4206
|
-
style: 'currency',
|
|
4207
|
-
currency: currency,
|
|
4208
|
-
maximumFractionDigits: 3,
|
|
4209
|
-
}).format(valueToFormat);
|
|
4210
|
-
};
|
|
4179
|
+
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;
|
|
4211
4180
|
|
|
4212
|
-
var Container$
|
|
4181
|
+
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"])));
|
|
4213
4182
|
var Card$3 = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4214
4183
|
var Tag$2 = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4215
4184
|
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"])));
|
|
@@ -4217,7 +4186,7 @@ var Check$1 = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTe
|
|
|
4217
4186
|
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"])));
|
|
4218
4187
|
var PackSelectorV2 = function (_a) {
|
|
4219
4188
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4220
|
-
return (jsx$1(Container$
|
|
4189
|
+
return (jsx$1(Container$16, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4221
4190
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4222
4191
|
}) }), void 0));
|
|
4223
4192
|
};
|
|
@@ -4239,27 +4208,27 @@ var PackCard$1 = function (_a) {
|
|
|
4239
4208
|
currency: currencyCode || 'USD',
|
|
4240
4209
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4241
4210
|
};
|
|
4242
|
-
var templateObject_1$
|
|
4211
|
+
var templateObject_1$1L, templateObject_2$18, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4243
4212
|
|
|
4244
|
-
var Container$
|
|
4213
|
+
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"])));
|
|
4245
4214
|
var DropContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4246
4215
|
var DropList = function (_a) {
|
|
4247
4216
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4248
|
-
return (jsx$1(Container$
|
|
4217
|
+
return (jsx$1(Container$15, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4249
4218
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4250
4219
|
}) }, void 0));
|
|
4251
4220
|
};
|
|
4252
|
-
var templateObject_1$
|
|
4221
|
+
var templateObject_1$1K, templateObject_2$17;
|
|
4253
4222
|
|
|
4254
4223
|
var DROPS_TOTAL = 5;
|
|
4255
|
-
var Container$
|
|
4224
|
+
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"])));
|
|
4256
4225
|
var Title$8 = newStyled.p(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4257
4226
|
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"])));
|
|
4258
4227
|
var AbsorbencyLevel = function (_a) {
|
|
4259
4228
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4260
|
-
return (jsxs$1(Container$
|
|
4229
|
+
return (jsxs$1(Container$14, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4261
4230
|
};
|
|
4262
|
-
var templateObject_1$
|
|
4231
|
+
var templateObject_1$1J, templateObject_2$16, templateObject_3$S;
|
|
4263
4232
|
|
|
4264
4233
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4265
4234
|
`),"","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(`
|
|
@@ -4335,7 +4304,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4335
4304
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4336
4305
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4337
4306
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4338
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4307
|
+
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"])));
|
|
4339
4308
|
var Accordion$1 = function (_a) {
|
|
4340
4309
|
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;
|
|
4341
4310
|
var theme = useTheme();
|
|
@@ -4359,9 +4328,9 @@ var Accordion$1 = function (_a) {
|
|
|
4359
4328
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4360
4329
|
} }), void 0));
|
|
4361
4330
|
};
|
|
4362
|
-
var templateObject_1$
|
|
4331
|
+
var templateObject_1$1I;
|
|
4363
4332
|
|
|
4364
|
-
var Container$
|
|
4333
|
+
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"])));
|
|
4365
4334
|
var AccordionOptions = function (_a) {
|
|
4366
4335
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4367
4336
|
var _b = useState({
|
|
@@ -4374,7 +4343,7 @@ var AccordionOptions = function (_a) {
|
|
|
4374
4343
|
}
|
|
4375
4344
|
return false;
|
|
4376
4345
|
};
|
|
4377
|
-
return (jsx$1(Container$
|
|
4346
|
+
return (jsx$1(Container$13, { children: accordions.map(function (accordion, index) {
|
|
4378
4347
|
var forceOpenValue = getForceOpen(index);
|
|
4379
4348
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4380
4349
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4385,7 +4354,7 @@ var AccordionOptions = function (_a) {
|
|
|
4385
4354
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4386
4355
|
}) }, void 0));
|
|
4387
4356
|
};
|
|
4388
|
-
var templateObject_1$
|
|
4357
|
+
var templateObject_1$1H;
|
|
4389
4358
|
|
|
4390
4359
|
var CardSectionType;
|
|
4391
4360
|
(function (CardSectionType) {
|
|
@@ -4547,14 +4516,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4547
4516
|
literal: true,
|
|
4548
4517
|
});
|
|
4549
4518
|
|
|
4550
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4519
|
+
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; });
|
|
4551
4520
|
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"])));
|
|
4552
4521
|
var Error$1 = function (_a) {
|
|
4553
4522
|
var error = _a.error;
|
|
4554
4523
|
var theme = useTheme();
|
|
4555
4524
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4556
4525
|
};
|
|
4557
|
-
var templateObject_1$
|
|
4526
|
+
var templateObject_1$1G, templateObject_2$15;
|
|
4558
4527
|
|
|
4559
4528
|
var BaseSelectButton = function (_a) {
|
|
4560
4529
|
var children = _a.children, as = _a.as;
|
|
@@ -4571,7 +4540,7 @@ function BaseSelectOption(_a) {
|
|
|
4571
4540
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4572
4541
|
}
|
|
4573
4542
|
|
|
4574
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4543
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4575
4544
|
function BaseSelect(_a) {
|
|
4576
4545
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4577
4546
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4581,7 +4550,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4581
4550
|
Options: BaseSelectOptions,
|
|
4582
4551
|
Option: BaseSelectOption,
|
|
4583
4552
|
});
|
|
4584
|
-
var templateObject_1$
|
|
4553
|
+
var templateObject_1$1F;
|
|
4585
4554
|
|
|
4586
4555
|
var CustomButton = newStyled.button(function (_a) {
|
|
4587
4556
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4805,7 +4774,7 @@ var CustomCheckboxStyles = {
|
|
|
4805
4774
|
},
|
|
4806
4775
|
};
|
|
4807
4776
|
|
|
4808
|
-
var Container$
|
|
4777
|
+
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"])));
|
|
4809
4778
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4810
4779
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4811
4780
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4830,9 +4799,9 @@ var Checkbox = function (_a) {
|
|
|
4830
4799
|
}
|
|
4831
4800
|
onChange(e.target.checked);
|
|
4832
4801
|
};
|
|
4833
|
-
return (jsxs$1(Container$
|
|
4802
|
+
return (jsxs$1(Container$12, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4834
4803
|
};
|
|
4835
|
-
var templateObject_1$
|
|
4804
|
+
var templateObject_1$1E, templateObject_2$14;
|
|
4836
4805
|
|
|
4837
4806
|
var CustomOption = newStyled.li(function (_a) {
|
|
4838
4807
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4881,7 +4850,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4881
4850
|
Option: BaseDropdownOption,
|
|
4882
4851
|
});
|
|
4883
4852
|
|
|
4884
|
-
var Container$
|
|
4853
|
+
var Container$11 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject([""], [""])));
|
|
4885
4854
|
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"])));
|
|
4886
4855
|
function SimpleDropdown(_a) {
|
|
4887
4856
|
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;
|
|
@@ -4912,10 +4881,10 @@ function SimpleDropdown(_a) {
|
|
|
4912
4881
|
setSelectedValue(value);
|
|
4913
4882
|
}, [value, options, initialValue]);
|
|
4914
4883
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4915
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4884
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$11 : Fragment$1;
|
|
4916
4885
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4917
4886
|
}
|
|
4918
|
-
var templateObject_1$
|
|
4887
|
+
var templateObject_1$1D, templateObject_2$13;
|
|
4919
4888
|
|
|
4920
4889
|
/* base styles & size variants */
|
|
4921
4890
|
var CustomRadioStyles$2 = {
|
|
@@ -4980,8 +4949,8 @@ var ContainerStyles$2 = {
|
|
|
4980
4949
|
},
|
|
4981
4950
|
};
|
|
4982
4951
|
|
|
4983
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
4984
|
-
var Container$
|
|
4952
|
+
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"])));
|
|
4953
|
+
var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
4985
4954
|
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) {
|
|
4986
4955
|
var disabled = _a.disabled;
|
|
4987
4956
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -5004,9 +4973,9 @@ var RadioInput = function (_a) {
|
|
|
5004
4973
|
var value = event.currentTarget.value;
|
|
5005
4974
|
onChange({ value: value, label: label });
|
|
5006
4975
|
};
|
|
5007
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
4976
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$10, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5008
4977
|
};
|
|
5009
|
-
var templateObject_1$
|
|
4978
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$R;
|
|
5010
4979
|
|
|
5011
4980
|
var TooltipArrow = function (_a) {
|
|
5012
4981
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -5086,7 +5055,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5086
5055
|
}
|
|
5087
5056
|
};
|
|
5088
5057
|
|
|
5089
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5058
|
+
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) {
|
|
5090
5059
|
var position = _a.position;
|
|
5091
5060
|
return getWrapperFlexDirection(position);
|
|
5092
5061
|
});
|
|
@@ -5138,7 +5107,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5138
5107
|
return color;
|
|
5139
5108
|
});
|
|
5140
5109
|
var IconContainer$5 = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5141
|
-
var templateObject_1$
|
|
5110
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$Q, templateObject_4$D, templateObject_5$p, templateObject_6$n, templateObject_7$g;
|
|
5142
5111
|
|
|
5143
5112
|
var Tooltip = function (_a) {
|
|
5144
5113
|
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;
|
|
@@ -5206,7 +5175,7 @@ var getStylesBySize$d = function (size, bordersRounded, theme) {
|
|
|
5206
5175
|
};
|
|
5207
5176
|
}
|
|
5208
5177
|
};
|
|
5209
|
-
var Container
|
|
5178
|
+
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) {
|
|
5210
5179
|
var backgroundColor = _a.backgroundColor;
|
|
5211
5180
|
return backgroundColor;
|
|
5212
5181
|
}, function (_a) {
|
|
@@ -5243,32 +5212,64 @@ var H3$3 = newStyled.h3(templateObject_2$10 || (templateObject_2$10 = __makeTemp
|
|
|
5243
5212
|
var DiscountTag = function (_a) {
|
|
5244
5213
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5245
5214
|
var theme = useTheme();
|
|
5246
|
-
return (jsx$1(Container
|
|
5215
|
+
return (jsx$1(Container$$, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5247
5216
|
};
|
|
5248
|
-
var templateObject_1$
|
|
5217
|
+
var templateObject_1$1A, templateObject_2$10;
|
|
5249
5218
|
|
|
5219
|
+
//TODO Move this to types with ThemeBreakpoints
|
|
5220
|
+
var Viewports = {
|
|
5221
|
+
mobile: 'mobile',
|
|
5222
|
+
tablet: 'tablet',
|
|
5223
|
+
desktop: 'desktop',
|
|
5224
|
+
};
|
|
5250
5225
|
function getWindowDimensions() {
|
|
5226
|
+
if (typeof window === 'undefined')
|
|
5227
|
+
return { width: 0, height: 0 };
|
|
5251
5228
|
var width = window.innerWidth, height = window.innerHeight;
|
|
5252
5229
|
return {
|
|
5253
5230
|
width: width,
|
|
5254
5231
|
height: height,
|
|
5255
5232
|
};
|
|
5256
5233
|
}
|
|
5257
|
-
var
|
|
5258
|
-
|
|
5234
|
+
var getViewport = function (breakpoints, width) {
|
|
5235
|
+
if (width <= breakpoints.mobile)
|
|
5236
|
+
return Viewports.mobile;
|
|
5237
|
+
if (breakpoints.tablet && width <= breakpoints.tablet) {
|
|
5238
|
+
return Viewports.tablet;
|
|
5239
|
+
}
|
|
5240
|
+
return Viewports.desktop;
|
|
5241
|
+
};
|
|
5242
|
+
var useWindowDimensions = function (breakpoints, shouldListenChanges) {
|
|
5243
|
+
var _a = useState(function () {
|
|
5244
|
+
var dimension = getWindowDimensions();
|
|
5245
|
+
return {
|
|
5246
|
+
windowDimensions: dimension,
|
|
5247
|
+
viewport: getViewport(breakpoints, dimension.width),
|
|
5248
|
+
};
|
|
5249
|
+
}), state = _a[0], setState = _a[1];
|
|
5259
5250
|
useEffect(function () {
|
|
5260
5251
|
function handleResize() {
|
|
5261
|
-
|
|
5252
|
+
var newDimension = getWindowDimensions();
|
|
5253
|
+
var newViewport = getViewport(breakpoints, newDimension.width);
|
|
5254
|
+
setState(function (oldState) {
|
|
5255
|
+
if (shouldListenChanges || oldState.viewport !== newViewport) {
|
|
5256
|
+
return {
|
|
5257
|
+
windowDimensions: newDimension,
|
|
5258
|
+
viewport: newViewport,
|
|
5259
|
+
};
|
|
5260
|
+
}
|
|
5261
|
+
return oldState;
|
|
5262
|
+
});
|
|
5262
5263
|
}
|
|
5263
|
-
// calling it here updates the dimensions on first render
|
|
5264
5264
|
handleResize();
|
|
5265
5265
|
window.addEventListener('resize', handleResize);
|
|
5266
5266
|
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5267
|
-
|
|
5268
|
-
|
|
5269
|
-
|
|
5270
|
-
|
|
5271
|
-
|
|
5267
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5268
|
+
}, [shouldListenChanges]);
|
|
5269
|
+
var isMobile = state.viewport === Viewports.mobile;
|
|
5270
|
+
var isTablet = state.viewport === Viewports.tablet;
|
|
5271
|
+
var isDesktop = state.viewport === Viewports.desktop;
|
|
5272
|
+
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5272
5273
|
};
|
|
5273
5274
|
|
|
5274
5275
|
var getStylesBySize$c = function (size, theme) {
|
|
@@ -5311,7 +5312,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5311
5312
|
return (_c = getStylesBySize$c(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5312
5313
|
}
|
|
5313
5314
|
};
|
|
5314
|
-
var Container
|
|
5315
|
+
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"])));
|
|
5315
5316
|
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) {
|
|
5316
5317
|
var weight = _a.weight;
|
|
5317
5318
|
return (weight ? weight : '400');
|
|
@@ -5367,9 +5368,9 @@ var PriceLabel = function (_a) {
|
|
|
5367
5368
|
: ComponentSize.XSmall;
|
|
5368
5369
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5369
5370
|
};
|
|
5370
|
-
return (jsxs$1(Container
|
|
5371
|
+
return (jsxs$1(Container$_, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5371
5372
|
};
|
|
5372
|
-
var templateObject_1$
|
|
5373
|
+
var templateObject_1$1z, templateObject_2$$, templateObject_3$P;
|
|
5373
5374
|
|
|
5374
5375
|
var getStylesBySize$b = function (size) {
|
|
5375
5376
|
switch (size) {
|
|
@@ -5399,7 +5400,7 @@ var getStylesBySize$b = function (size) {
|
|
|
5399
5400
|
};
|
|
5400
5401
|
}
|
|
5401
5402
|
};
|
|
5402
|
-
var Container$
|
|
5403
|
+
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) {
|
|
5403
5404
|
var backgroundColor = _a.backgroundColor;
|
|
5404
5405
|
return backgroundColor;
|
|
5405
5406
|
}, function (_a) {
|
|
@@ -5436,11 +5437,11 @@ var H3$2 = newStyled.h3(templateObject_2$_ || (templateObject_2$_ = __makeTempla
|
|
|
5436
5437
|
var ClubOfferTag = function (_a) {
|
|
5437
5438
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5438
5439
|
var theme = useTheme();
|
|
5439
|
-
return (jsx$1(Container$
|
|
5440
|
+
return (jsx$1(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: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5440
5441
|
};
|
|
5441
|
-
var templateObject_1$
|
|
5442
|
+
var templateObject_1$1y, templateObject_2$_;
|
|
5442
5443
|
|
|
5443
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5444
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5444
5445
|
var PriceLabelV2 = function (_a) {
|
|
5445
5446
|
var _b;
|
|
5446
5447
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay"]);
|
|
@@ -5490,7 +5491,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5490
5491
|
var savetoString = saveto.toFixed(2);
|
|
5491
5492
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5492
5493
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5493
|
-
return (jsxs$1(Container
|
|
5494
|
+
return (jsxs$1(Container$_, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5494
5495
|
marginTop: '-5px',
|
|
5495
5496
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5496
5497
|
marginTop: '-6px',
|
|
@@ -5506,9 +5507,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5506
5507
|
lineHeight: '22px',
|
|
5507
5508
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5508
5509
|
};
|
|
5509
|
-
var templateObject_1$
|
|
5510
|
+
var templateObject_1$1x;
|
|
5510
5511
|
|
|
5511
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5512
|
+
var FlexContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5512
5513
|
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) {
|
|
5513
5514
|
var selected = _a.selected, theme = _a.theme;
|
|
5514
5515
|
return selected
|
|
@@ -5545,8 +5546,8 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5545
5546
|
var selected = _a.selected, theme = _a.theme;
|
|
5546
5547
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5547
5548
|
});
|
|
5548
|
-
var Container$
|
|
5549
|
-
var templateObject_1$
|
|
5549
|
+
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5550
|
+
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;
|
|
5550
5551
|
|
|
5551
5552
|
var radioIds = {
|
|
5552
5553
|
oneTime: {
|
|
@@ -5596,17 +5597,17 @@ var Autoship = function (_a) {
|
|
|
5596
5597
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5597
5598
|
};
|
|
5598
5599
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5599
|
-
return (jsxs$1(Container$
|
|
5600
|
+
return (jsxs$1(Container$Y, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5600
5601
|
? benefitsColor.selected
|
|
5601
5602
|
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxs$1(FlexContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5602
5603
|
};
|
|
5603
5604
|
|
|
5604
|
-
var Img = newStyled.img(templateObject_1$
|
|
5605
|
+
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; });
|
|
5605
5606
|
var Image$3 = function (_a) {
|
|
5606
5607
|
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;
|
|
5607
5608
|
return (jsx$1(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
5608
5609
|
};
|
|
5609
|
-
var templateObject_1$
|
|
5610
|
+
var templateObject_1$1v;
|
|
5610
5611
|
|
|
5611
5612
|
var _a$2;
|
|
5612
5613
|
var BeforeAfterVariant;
|
|
@@ -5621,13 +5622,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5621
5622
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5622
5623
|
_a$2);
|
|
5623
5624
|
|
|
5624
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5625
|
+
var CustomerDetails = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject([""], [""])));
|
|
5625
5626
|
var CustomerInfo = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5626
5627
|
var Name = newStyled.h4(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
5627
5628
|
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"])));
|
|
5628
5629
|
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"])));
|
|
5629
5630
|
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"])));
|
|
5630
|
-
var templateObject_1$
|
|
5631
|
+
var templateObject_1$1u, templateObject_2$Y, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5631
5632
|
|
|
5632
5633
|
var NameWithStars = function (_a) {
|
|
5633
5634
|
var name = _a.name, size = _a.size;
|
|
@@ -5645,7 +5646,7 @@ var ResultFeedback = function (_a) {
|
|
|
5645
5646
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5646
5647
|
};
|
|
5647
5648
|
|
|
5648
|
-
var Container$
|
|
5649
|
+
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; });
|
|
5649
5650
|
var ImageContainer$5 = newStyled.div(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
5650
5651
|
var ImageCard = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
5651
5652
|
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) {
|
|
@@ -5658,7 +5659,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5658
5659
|
var theme = _a.theme, size = _a.size;
|
|
5659
5660
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5660
5661
|
});
|
|
5661
|
-
var templateObject_1$
|
|
5662
|
+
var templateObject_1$1t, templateObject_2$X, templateObject_3$M, templateObject_4$A;
|
|
5662
5663
|
|
|
5663
5664
|
/* base styles & size variants */
|
|
5664
5665
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5733,10 +5734,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
5733
5734
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5734
5735
|
var infoText = buildInfoText(name, age, months);
|
|
5735
5736
|
var Component = componentByVariant[variant];
|
|
5736
|
-
return (jsxs$1(Container$
|
|
5737
|
+
return (jsxs$1(Container$X, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5737
5738
|
};
|
|
5738
5739
|
|
|
5739
|
-
var Section = newStyled.div(templateObject_1$
|
|
5740
|
+
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) {
|
|
5740
5741
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5741
5742
|
});
|
|
5742
5743
|
var CardHeader = function (_a) {
|
|
@@ -5747,16 +5748,16 @@ var CardFooter = function (_a) {
|
|
|
5747
5748
|
var children = _a.children;
|
|
5748
5749
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
5749
5750
|
};
|
|
5750
|
-
var templateObject_1$
|
|
5751
|
+
var templateObject_1$1s;
|
|
5751
5752
|
|
|
5752
|
-
var Body = newStyled.div(templateObject_1$
|
|
5753
|
+
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"])));
|
|
5753
5754
|
var CardBody = function (_a) {
|
|
5754
5755
|
var children = _a.children;
|
|
5755
5756
|
return jsx$1(Body, { children: children }, void 0);
|
|
5756
5757
|
};
|
|
5757
|
-
var templateObject_1$
|
|
5758
|
+
var templateObject_1$1r;
|
|
5758
5759
|
|
|
5759
|
-
var Container$
|
|
5760
|
+
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) {
|
|
5760
5761
|
var flex = _a.flex;
|
|
5761
5762
|
return flex &&
|
|
5762
5763
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5771,23 +5772,23 @@ var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __
|
|
|
5771
5772
|
var Card$1 = function (_a) {
|
|
5772
5773
|
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;
|
|
5773
5774
|
var theme = useTheme();
|
|
5774
|
-
return (jsx$1(Container$
|
|
5775
|
+
return (jsx$1(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));
|
|
5775
5776
|
};
|
|
5776
5777
|
var Card$2 = Object.assign(Card$1, {
|
|
5777
5778
|
Header: CardHeader,
|
|
5778
5779
|
Footer: CardFooter,
|
|
5779
5780
|
Body: CardBody,
|
|
5780
5781
|
});
|
|
5781
|
-
var templateObject_1$
|
|
5782
|
+
var templateObject_1$1q;
|
|
5782
5783
|
|
|
5783
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5784
|
+
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"])));
|
|
5784
5785
|
var StyledContainer = newStyled.div(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5785
5786
|
var TextLabel = newStyled(Text$8)(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
5786
5787
|
var color = _a.color;
|
|
5787
5788
|
return color;
|
|
5788
5789
|
});
|
|
5789
5790
|
var YouAreSaving = newStyled(Text$8)(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
5790
|
-
var templateObject_1$
|
|
5791
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$L, templateObject_4$z;
|
|
5791
5792
|
|
|
5792
5793
|
var Minimalistic = function (_a) {
|
|
5793
5794
|
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;
|
|
@@ -5795,23 +5796,23 @@ var Minimalistic = function (_a) {
|
|
|
5795
5796
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5796
5797
|
};
|
|
5797
5798
|
|
|
5798
|
-
var Container$
|
|
5799
|
+
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"])));
|
|
5799
5800
|
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; });
|
|
5800
5801
|
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; });
|
|
5801
5802
|
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"])));
|
|
5802
5803
|
var Simple = function (_a) {
|
|
5803
5804
|
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;
|
|
5804
5805
|
var theme = useTheme();
|
|
5805
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
5806
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$V, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5806
5807
|
};
|
|
5807
|
-
var templateObject_1$
|
|
5808
|
+
var templateObject_1$1o, templateObject_2$V, templateObject_3$K, templateObject_4$y;
|
|
5808
5809
|
|
|
5809
5810
|
var Bundle = {
|
|
5810
5811
|
Minimalistic: Minimalistic,
|
|
5811
5812
|
Simple: Simple,
|
|
5812
5813
|
};
|
|
5813
5814
|
|
|
5814
|
-
var Container$
|
|
5815
|
+
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) {
|
|
5815
5816
|
var displayBNPL = _a.displayBNPL;
|
|
5816
5817
|
return (displayBNPL ? 'flex' : 'none');
|
|
5817
5818
|
});
|
|
@@ -5826,43 +5827,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
5826
5827
|
console.error('Icon', iconName, 'not found');
|
|
5827
5828
|
return null;
|
|
5828
5829
|
}
|
|
5829
|
-
return (jsx$1(Container$
|
|
5830
|
+
return (jsx$1(Container$U, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5830
5831
|
};
|
|
5831
|
-
var templateObject_1$
|
|
5832
|
+
var templateObject_1$1n, templateObject_2$U, templateObject_3$J;
|
|
5832
5833
|
|
|
5833
|
-
var Text$7 = newStyled.span(templateObject_1$
|
|
5834
|
+
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; });
|
|
5834
5835
|
var Title$5 = function (_a) {
|
|
5835
5836
|
var title = _a.title;
|
|
5836
5837
|
var theme = useTheme();
|
|
5837
5838
|
return jsx$1(Text$7, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5838
5839
|
};
|
|
5839
|
-
var templateObject_1$
|
|
5840
|
+
var templateObject_1$1m;
|
|
5840
5841
|
|
|
5841
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5842
|
+
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; });
|
|
5842
5843
|
var Promo = function (_a) {
|
|
5843
5844
|
var text = _a.text;
|
|
5844
5845
|
var theme = useTheme();
|
|
5845
5846
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5846
5847
|
};
|
|
5847
|
-
var templateObject_1$
|
|
5848
|
+
var templateObject_1$1l;
|
|
5848
5849
|
|
|
5849
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5850
|
+
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; });
|
|
5850
5851
|
var Description$1 = function (_a) {
|
|
5851
5852
|
var text = _a.text;
|
|
5852
5853
|
var theme = useTheme();
|
|
5853
5854
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5854
5855
|
};
|
|
5855
|
-
var templateObject_1$
|
|
5856
|
+
var templateObject_1$1k;
|
|
5856
5857
|
|
|
5857
|
-
var Container$
|
|
5858
|
+
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"); });
|
|
5858
5859
|
var CloseButton$1 = function (_a) {
|
|
5859
5860
|
var onClick = _a.onClick, size = _a.size;
|
|
5860
5861
|
var theme = useTheme();
|
|
5861
|
-
return (jsx$1(Container$
|
|
5862
|
+
return (jsx$1(Container$T, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
5862
5863
|
};
|
|
5863
|
-
var templateObject_1$
|
|
5864
|
+
var templateObject_1$1j;
|
|
5864
5865
|
|
|
5865
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
5866
|
+
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) {
|
|
5866
5867
|
var backgroundColor = _a.backgroundColor;
|
|
5867
5868
|
return backgroundColor;
|
|
5868
5869
|
}, function (_a) {
|
|
@@ -5877,7 +5878,7 @@ var OfferBanner = function (_a) {
|
|
|
5877
5878
|
var theme = useTheme();
|
|
5878
5879
|
return (jsx$1(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
5879
5880
|
};
|
|
5880
|
-
var templateObject_1$
|
|
5881
|
+
var templateObject_1$1i;
|
|
5881
5882
|
|
|
5882
5883
|
var CartProductItem = {
|
|
5883
5884
|
Title: Title$5,
|
|
@@ -5887,36 +5888,7 @@ var CartProductItem = {
|
|
|
5887
5888
|
CloseButton: CloseButton$1,
|
|
5888
5889
|
};
|
|
5889
5890
|
|
|
5890
|
-
var Container$
|
|
5891
|
-
var height = _a.height;
|
|
5892
|
-
return (height ? height : '1.5em');
|
|
5893
|
-
}, function (_a) {
|
|
5894
|
-
var width = _a.width;
|
|
5895
|
-
return (width ? width : '100%');
|
|
5896
|
-
}, function (_a) {
|
|
5897
|
-
var theme = _a.theme;
|
|
5898
|
-
return theme.colors.background.disabled;
|
|
5899
|
-
}, function (_a) {
|
|
5900
|
-
var theme = _a.theme;
|
|
5901
|
-
return theme.radius.regular;
|
|
5902
|
-
}, function (_a) {
|
|
5903
|
-
var theme = _a.theme;
|
|
5904
|
-
return theme.colors.shades['10'].color;
|
|
5905
|
-
}, function (_a) {
|
|
5906
|
-
var theme = _a.theme;
|
|
5907
|
-
return theme.colors.background.disabled;
|
|
5908
|
-
}, function (_a) {
|
|
5909
|
-
var theme = _a.theme;
|
|
5910
|
-
return theme.colors.shades['10'].color;
|
|
5911
|
-
});
|
|
5912
|
-
var SkeletonBox = function (_a) {
|
|
5913
|
-
var width = _a.width, height = _a.height;
|
|
5914
|
-
var theme = useTheme();
|
|
5915
|
-
return jsx$1(Container$T, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
5916
|
-
};
|
|
5917
|
-
var templateObject_1$1g;
|
|
5918
|
-
|
|
5919
|
-
var Container$S = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
5891
|
+
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"])));
|
|
5920
5892
|
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"])));
|
|
5921
5893
|
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"])));
|
|
5922
5894
|
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"])));
|
|
@@ -5929,7 +5901,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
5929
5901
|
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
5930
5902
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$S, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
5931
5903
|
};
|
|
5932
|
-
var templateObject_1$
|
|
5904
|
+
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;
|
|
5933
5905
|
|
|
5934
5906
|
var Spacing = function (_a) {
|
|
5935
5907
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -5937,7 +5909,7 @@ var Spacing = function (_a) {
|
|
|
5937
5909
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
5938
5910
|
};
|
|
5939
5911
|
|
|
5940
|
-
var Container$R = newStyled('div')(templateObject_1$
|
|
5912
|
+
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"])));
|
|
5941
5913
|
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"])));
|
|
5942
5914
|
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"])));
|
|
5943
5915
|
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) {
|
|
@@ -5951,12 +5923,12 @@ var StrengthBars = function (_a) {
|
|
|
5951
5923
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
5952
5924
|
return (jsxs$1(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
5953
5925
|
};
|
|
5954
|
-
var templateObject_1$
|
|
5926
|
+
var templateObject_1$1g, templateObject_2$S, templateObject_3$H, templateObject_4$w;
|
|
5955
5927
|
|
|
5956
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
5957
|
-
var templateObject_1$
|
|
5928
|
+
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"])));
|
|
5929
|
+
var templateObject_1$1f;
|
|
5958
5930
|
|
|
5959
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
5931
|
+
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) {
|
|
5960
5932
|
var marginRight = _a.marginRight;
|
|
5961
5933
|
return marginRight;
|
|
5962
5934
|
});
|
|
@@ -5972,7 +5944,7 @@ var StarList = function (_a) {
|
|
|
5972
5944
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
5973
5945
|
}) }, void 0));
|
|
5974
5946
|
};
|
|
5975
|
-
var templateObject_1$
|
|
5947
|
+
var templateObject_1$1e;
|
|
5976
5948
|
|
|
5977
5949
|
/* base styles & size variants */
|
|
5978
5950
|
var LabelStyles = {
|
|
@@ -6013,8 +5985,8 @@ var LabelStyles = {
|
|
|
6013
5985
|
});
|
|
6014
5986
|
},
|
|
6015
5987
|
};
|
|
6016
|
-
var Container$P = newStyled.a(templateObject_1$
|
|
6017
|
-
var templateObject_1$
|
|
5988
|
+
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"])));
|
|
5989
|
+
var templateObject_1$1d;
|
|
6018
5990
|
|
|
6019
5991
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6020
5992
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6065,7 +6037,7 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6065
6037
|
height: height,
|
|
6066
6038
|
});
|
|
6067
6039
|
});
|
|
6068
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6040
|
+
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"])));
|
|
6069
6041
|
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"])));
|
|
6070
6042
|
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"])));
|
|
6071
6043
|
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; });
|
|
@@ -6154,7 +6126,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6154
6126
|
};
|
|
6155
6127
|
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));
|
|
6156
6128
|
};
|
|
6157
|
-
var templateObject_1$
|
|
6129
|
+
var templateObject_1$1c, templateObject_2$R, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6158
6130
|
|
|
6159
6131
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6160
6132
|
var width = _a.width, height = _a.height;
|
|
@@ -6164,7 +6136,7 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6164
6136
|
height: height,
|
|
6165
6137
|
});
|
|
6166
6138
|
});
|
|
6167
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6139
|
+
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; });
|
|
6168
6140
|
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"])));
|
|
6169
6141
|
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"])));
|
|
6170
6142
|
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; });
|
|
@@ -6252,9 +6224,9 @@ var ProductItemTK = function (_a) {
|
|
|
6252
6224
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6253
6225
|
} }, { 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));
|
|
6254
6226
|
};
|
|
6255
|
-
var templateObject_1$
|
|
6227
|
+
var templateObject_1$1b, templateObject_2$Q, templateObject_3$F, templateObject_4$u, templateObject_5$k, templateObject_6$i, templateObject_7$c;
|
|
6256
6228
|
|
|
6257
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
6229
|
+
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"])));
|
|
6258
6230
|
function withProductGrid(ProductItemComponent, data) {
|
|
6259
6231
|
function WithProductGrid(props) {
|
|
6260
6232
|
return (jsx$1(Container$M, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6264,7 +6236,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6264
6236
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6265
6237
|
return WithProductGrid;
|
|
6266
6238
|
}
|
|
6267
|
-
var templateObject_1$
|
|
6239
|
+
var templateObject_1$1a;
|
|
6268
6240
|
|
|
6269
6241
|
var Collection = {
|
|
6270
6242
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6311,7 +6283,7 @@ var OutOfStock = function (_a) {
|
|
|
6311
6283
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6312
6284
|
};
|
|
6313
6285
|
|
|
6314
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6286
|
+
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"])));
|
|
6315
6287
|
newStyled(lt.Label)(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6316
6288
|
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"])));
|
|
6317
6289
|
var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
@@ -6333,9 +6305,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6333
6305
|
Option: Option,
|
|
6334
6306
|
OptionsContainer: OptionsContainer,
|
|
6335
6307
|
});
|
|
6336
|
-
var templateObject_1$
|
|
6308
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$j;
|
|
6337
6309
|
|
|
6338
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
6310
|
+
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) {
|
|
6339
6311
|
var borderColor = _a.borderColor;
|
|
6340
6312
|
return borderColor;
|
|
6341
6313
|
}, function (_a) {
|
|
@@ -6349,7 +6321,7 @@ var PatternSelector = function (_a) {
|
|
|
6349
6321
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6350
6322
|
return (jsx$1(Container$L, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6351
6323
|
};
|
|
6352
|
-
var templateObject_1$
|
|
6324
|
+
var templateObject_1$18, templateObject_2$O;
|
|
6353
6325
|
|
|
6354
6326
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6355
6327
|
if (options == null || options.length === 0) {
|
|
@@ -6407,7 +6379,7 @@ var SingleColorPicker = function (_a) {
|
|
|
6407
6379
|
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));
|
|
6408
6380
|
};
|
|
6409
6381
|
|
|
6410
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6382
|
+
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'); });
|
|
6411
6383
|
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"])));
|
|
6412
6384
|
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) {
|
|
6413
6385
|
return props.rightToLeft &&
|
|
@@ -6421,7 +6393,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
6421
6393
|
var theme = useTheme();
|
|
6422
6394
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$1, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6423
6395
|
};
|
|
6424
|
-
var templateObject_1$
|
|
6396
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$h;
|
|
6425
6397
|
|
|
6426
6398
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6427
6399
|
__proto__: null,
|
|
@@ -6449,7 +6421,7 @@ var sizeMapper = (_a = {},
|
|
|
6449
6421
|
_a[ComponentSize.Large] = 'large',
|
|
6450
6422
|
_a[ComponentSize.XSmall] = 'small',
|
|
6451
6423
|
_a);
|
|
6452
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6424
|
+
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) {
|
|
6453
6425
|
var wide = _a.wide;
|
|
6454
6426
|
return (wide ? '100%' : 'fit-content');
|
|
6455
6427
|
}, function (_a) {
|
|
@@ -6472,7 +6444,7 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$14 || (templateObj
|
|
|
6472
6444
|
return theme.colors.text.disabled;
|
|
6473
6445
|
});
|
|
6474
6446
|
var StyledIcon = newStyled(Icon$1)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6475
|
-
var templateObject_1$
|
|
6447
|
+
var templateObject_1$16, templateObject_2$M;
|
|
6476
6448
|
|
|
6477
6449
|
var BaseCTA = function (_a) {
|
|
6478
6450
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
@@ -6539,7 +6511,7 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6539
6511
|
} }), void 0));
|
|
6540
6512
|
};
|
|
6541
6513
|
|
|
6542
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
6514
|
+
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; });
|
|
6543
6515
|
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"])));
|
|
6544
6516
|
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; });
|
|
6545
6517
|
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; });
|
|
@@ -6548,9 +6520,9 @@ var Note = function (_a) {
|
|
|
6548
6520
|
var theme = useTheme();
|
|
6549
6521
|
return (jsxs$1(Container$K, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6550
6522
|
};
|
|
6551
|
-
var templateObject_1$
|
|
6523
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$C, templateObject_4$r;
|
|
6552
6524
|
|
|
6553
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6525
|
+
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) {
|
|
6554
6526
|
var theme = _a.theme;
|
|
6555
6527
|
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 ");
|
|
6556
6528
|
});
|
|
@@ -6593,9 +6565,9 @@ var DeliveryDetails = function (_a) {
|
|
|
6593
6565
|
var theme = useTheme();
|
|
6594
6566
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6595
6567
|
};
|
|
6596
|
-
var templateObject_1$
|
|
6568
|
+
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;
|
|
6597
6569
|
|
|
6598
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6570
|
+
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) {
|
|
6599
6571
|
var top = _a.top;
|
|
6600
6572
|
return top;
|
|
6601
6573
|
}, function (_a) {
|
|
@@ -6649,15 +6621,15 @@ var Drawer = function (_a) {
|
|
|
6649
6621
|
}, [isOpen, onClose, onOpen]);
|
|
6650
6622
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
6651
6623
|
};
|
|
6652
|
-
var templateObject_1$
|
|
6624
|
+
var templateObject_1$13, templateObject_2$J;
|
|
6653
6625
|
|
|
6654
|
-
var List = newStyled.ul(templateObject_1$
|
|
6626
|
+
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"])));
|
|
6655
6627
|
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"])));
|
|
6656
6628
|
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"])));
|
|
6657
6629
|
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"])));
|
|
6658
6630
|
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; });
|
|
6659
6631
|
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; });
|
|
6660
|
-
var templateObject_1$
|
|
6632
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$A, templateObject_4$p, templateObject_5$g, templateObject_6$f;
|
|
6661
6633
|
|
|
6662
6634
|
var DropdownListIcons = function (_a) {
|
|
6663
6635
|
var items = _a.items;
|
|
@@ -6670,13 +6642,13 @@ var Dropdown = function (_a) {
|
|
|
6670
6642
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(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));
|
|
6671
6643
|
};
|
|
6672
6644
|
|
|
6673
|
-
var DropdownContainer = newStyled.div(templateObject_1
|
|
6645
|
+
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"])));
|
|
6674
6646
|
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"])));
|
|
6675
6647
|
var SizeLabel = newStyled.span(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6676
6648
|
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"])));
|
|
6677
6649
|
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"])));
|
|
6678
6650
|
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"])));
|
|
6679
|
-
var templateObject_1
|
|
6651
|
+
var templateObject_1$11, templateObject_2$H, templateObject_3$z, templateObject_4$o, templateObject_5$f, templateObject_6$e;
|
|
6680
6652
|
|
|
6681
6653
|
var SizeDropdown = function (_a) {
|
|
6682
6654
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6699,7 +6671,7 @@ var SizeDropdown = function (_a) {
|
|
|
6699
6671
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(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: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
6700
6672
|
};
|
|
6701
6673
|
|
|
6702
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
6674
|
+
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; });
|
|
6703
6675
|
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; });
|
|
6704
6676
|
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"])));
|
|
6705
6677
|
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"])));
|
|
@@ -6711,7 +6683,7 @@ var DropdownDialog = function (_a) {
|
|
|
6711
6683
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6712
6684
|
}) }), void 0) }), void 0));
|
|
6713
6685
|
};
|
|
6714
|
-
var templateObject_1$
|
|
6686
|
+
var templateObject_1$10, templateObject_2$G, templateObject_3$y, templateObject_4$n;
|
|
6715
6687
|
|
|
6716
6688
|
function FilteringDropdown(_a) {
|
|
6717
6689
|
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;
|
|
@@ -6744,7 +6716,7 @@ function FilteringDropdown(_a) {
|
|
|
6744
6716
|
}) }, void 0)] }), void 0));
|
|
6745
6717
|
}
|
|
6746
6718
|
|
|
6747
|
-
var Title$1 = newStyled.div(templateObject_1
|
|
6719
|
+
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; });
|
|
6748
6720
|
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; });
|
|
6749
6721
|
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"])));
|
|
6750
6722
|
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'); });
|
|
@@ -6754,9 +6726,9 @@ var Accordion = function (_a) {
|
|
|
6754
6726
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6755
6727
|
return (jsxs$1(Container$J, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
6756
6728
|
};
|
|
6757
|
-
var templateObject_1
|
|
6729
|
+
var templateObject_1$$, templateObject_2$F, templateObject_3$x, templateObject_4$m;
|
|
6758
6730
|
|
|
6759
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
6731
|
+
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; });
|
|
6760
6732
|
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"])));
|
|
6761
6733
|
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"])));
|
|
6762
6734
|
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"])));
|
|
@@ -6766,7 +6738,7 @@ var OptionContainer = newStyled.div(templateObject_7$a || (templateObject_7$a =
|
|
|
6766
6738
|
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; });
|
|
6767
6739
|
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"])));
|
|
6768
6740
|
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"])));
|
|
6769
|
-
var templateObject_1$
|
|
6741
|
+
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;
|
|
6770
6742
|
|
|
6771
6743
|
var getStylesBySize$7 = function (size, theme) {
|
|
6772
6744
|
switch (size) {
|
|
@@ -6831,7 +6803,7 @@ var SelectorSecondary = function (_a) {
|
|
|
6831
6803
|
} }), id: id }, void 0));
|
|
6832
6804
|
};
|
|
6833
6805
|
|
|
6834
|
-
var UL = newStyled.ul(templateObject_1$
|
|
6806
|
+
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"])));
|
|
6835
6807
|
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; });
|
|
6836
6808
|
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"])));
|
|
6837
6809
|
var Tags = function (_a) {
|
|
@@ -6841,7 +6813,7 @@ var Tags = function (_a) {
|
|
|
6841
6813
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
6842
6814
|
}) }), void 0));
|
|
6843
6815
|
};
|
|
6844
|
-
var templateObject_1$
|
|
6816
|
+
var templateObject_1$Z, templateObject_2$D, templateObject_3$v;
|
|
6845
6817
|
|
|
6846
6818
|
var Filters = function (_a) {
|
|
6847
6819
|
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;
|
|
@@ -6977,7 +6949,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
6977
6949
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
6978
6950
|
};
|
|
6979
6951
|
|
|
6980
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
6952
|
+
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"])));
|
|
6981
6953
|
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"])));
|
|
6982
6954
|
var FitGuarantee = function (_a) {
|
|
6983
6955
|
var _b;
|
|
@@ -6996,9 +6968,9 @@ var FitGuarantee = function (_a) {
|
|
|
6996
6968
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
6997
6969
|
} }, { children: title }), void 0), jsx$1(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));
|
|
6998
6970
|
};
|
|
6999
|
-
var templateObject_1$
|
|
6971
|
+
var templateObject_1$Y, templateObject_2$C;
|
|
7000
6972
|
|
|
7001
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
6973
|
+
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"])));
|
|
7002
6974
|
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; });
|
|
7003
6975
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7004
6976
|
border: 'none',
|
|
@@ -7014,9 +6986,9 @@ var FitPredictor = function (_a) {
|
|
|
7014
6986
|
var theme = useTheme();
|
|
7015
6987
|
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));
|
|
7016
6988
|
};
|
|
7017
|
-
var templateObject_1$
|
|
6989
|
+
var templateObject_1$X, templateObject_2$B;
|
|
7018
6990
|
|
|
7019
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
6991
|
+
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) {
|
|
7020
6992
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
7021
6993
|
return borderRadiusVariant &&
|
|
7022
6994
|
"\nborder-radius: 20px;\n";
|
|
@@ -7031,7 +7003,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
7031
7003
|
var theme = useTheme();
|
|
7032
7004
|
return (jsx$1(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
7033
7005
|
};
|
|
7034
|
-
var templateObject_1$
|
|
7006
|
+
var templateObject_1$W;
|
|
7035
7007
|
|
|
7036
7008
|
var Button$5 = newStyled.button(function () { return ({
|
|
7037
7009
|
background: 'transparent',
|
|
@@ -11275,14 +11247,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11275
11247
|
return Slider;
|
|
11276
11248
|
}(React__default.Component);
|
|
11277
11249
|
|
|
11278
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11250
|
+
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) {
|
|
11279
11251
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11280
11252
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11281
11253
|
}, function (_a) {
|
|
11282
11254
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11283
11255
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11284
11256
|
});
|
|
11285
|
-
var templateObject_1$
|
|
11257
|
+
var templateObject_1$V;
|
|
11286
11258
|
|
|
11287
11259
|
var getStylesBySize$6 = function (size) {
|
|
11288
11260
|
// rem units
|
|
@@ -11341,7 +11313,7 @@ var SliderNavigation = function (_a) {
|
|
|
11341
11313
|
} }, { 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));
|
|
11342
11314
|
};
|
|
11343
11315
|
|
|
11344
|
-
var horizontalStyles = css(templateObject_1$
|
|
11316
|
+
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"])));
|
|
11345
11317
|
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"])));
|
|
11346
11318
|
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) {
|
|
11347
11319
|
var position = _a.position;
|
|
@@ -11372,7 +11344,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11372
11344
|
arrowPadding: 1.625,
|
|
11373
11345
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11374
11346
|
};
|
|
11375
|
-
var templateObject_1$
|
|
11347
|
+
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;
|
|
11376
11348
|
|
|
11377
11349
|
var propTypes = {exports: {}};
|
|
11378
11350
|
|
|
@@ -12965,7 +12937,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
12965
12937
|
afterZoomOut: PropTypes.func
|
|
12966
12938
|
} : {};
|
|
12967
12939
|
|
|
12968
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
12940
|
+
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) {
|
|
12969
12941
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
12970
12942
|
return borderRadiusVariant &&
|
|
12971
12943
|
"\n border-radius: 40px;\n ";
|
|
@@ -12984,9 +12956,9 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
12984
12956
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
12985
12957
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(Video$1, { children: jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxs$1(VideoTag$1, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsx$1(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
12986
12958
|
};
|
|
12987
|
-
var templateObject_1$
|
|
12959
|
+
var templateObject_1$T, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
12988
12960
|
|
|
12989
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
12961
|
+
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"])));
|
|
12990
12962
|
var ProductGallery = function (_a) {
|
|
12991
12963
|
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;
|
|
12992
12964
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -12998,7 +12970,7 @@ var ProductGallery = function (_a) {
|
|
|
12998
12970
|
setSelectedImage(value);
|
|
12999
12971
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
13000
12972
|
};
|
|
13001
|
-
var templateObject_1$
|
|
12973
|
+
var templateObject_1$S;
|
|
13002
12974
|
|
|
13003
12975
|
var getStylesBySize$5 = function (size) {
|
|
13004
12976
|
switch (size) {
|
|
@@ -13019,7 +12991,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13019
12991
|
};
|
|
13020
12992
|
}
|
|
13021
12993
|
};
|
|
13022
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
12994
|
+
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) {
|
|
13023
12995
|
var backgroundColor = _a.backgroundColor;
|
|
13024
12996
|
return backgroundColor;
|
|
13025
12997
|
}, function (_a) {
|
|
@@ -13049,9 +13021,9 @@ var IconButton = function (_a) {
|
|
|
13049
13021
|
var theme = useTheme();
|
|
13050
13022
|
return (jsx$1(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));
|
|
13051
13023
|
};
|
|
13052
|
-
var templateObject_1$
|
|
13024
|
+
var templateObject_1$R;
|
|
13053
13025
|
|
|
13054
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13026
|
+
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; });
|
|
13055
13027
|
var AmazonButton = function (_a) {
|
|
13056
13028
|
var onClick = _a.onClick;
|
|
13057
13029
|
return (jsx$1(StyledButton$1, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13060,7 +13032,7 @@ var PaypalButton = function (_a) {
|
|
|
13060
13032
|
var onClick = _a.onClick;
|
|
13061
13033
|
return (jsx$1(StyledButton$1, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13062
13034
|
};
|
|
13063
|
-
var templateObject_1$
|
|
13035
|
+
var templateObject_1$Q;
|
|
13064
13036
|
|
|
13065
13037
|
var useOnClickOutside = function (ref, handler) {
|
|
13066
13038
|
useEffect(function () {
|
|
@@ -13134,7 +13106,7 @@ var IconsWithTitle = function (_a) {
|
|
|
13134
13106
|
return (jsx$1(Fragment$2, { children: jsxs$1(Container$C, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(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));
|
|
13135
13107
|
};
|
|
13136
13108
|
|
|
13137
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
13109
|
+
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'); });
|
|
13138
13110
|
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'); });
|
|
13139
13111
|
var StyledTitle = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13140
13112
|
var titlePosition = _a.titlePosition;
|
|
@@ -13146,9 +13118,9 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13146
13118
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
13147
13119
|
return (jsxs$1(Container$B, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$8, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$8, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13148
13120
|
};
|
|
13149
|
-
var templateObject_1$
|
|
13121
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$s;
|
|
13150
13122
|
|
|
13151
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
13123
|
+
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) {
|
|
13152
13124
|
var color = _a.color;
|
|
13153
13125
|
return color;
|
|
13154
13126
|
});
|
|
@@ -13161,7 +13133,7 @@ var InputLabel = function (_a) {
|
|
|
13161
13133
|
var theme = useTheme();
|
|
13162
13134
|
return (jsxs$1(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13163
13135
|
};
|
|
13164
|
-
var templateObject_1$
|
|
13136
|
+
var templateObject_1$O, templateObject_2$x;
|
|
13165
13137
|
|
|
13166
13138
|
var containerByStatus = function (theme, status) {
|
|
13167
13139
|
if (status === InputValidationType.Valid)
|
|
@@ -13170,7 +13142,7 @@ var containerByStatus = function (theme, status) {
|
|
|
13170
13142
|
return theme.colors.semantic.urgent.color;
|
|
13171
13143
|
return '';
|
|
13172
13144
|
};
|
|
13173
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
13145
|
+
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) {
|
|
13174
13146
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13175
13147
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13176
13148
|
});
|
|
@@ -13248,7 +13220,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$b || (templateObject_5
|
|
|
13248
13220
|
return theme.component.input.lineHeight;
|
|
13249
13221
|
});
|
|
13250
13222
|
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"])));
|
|
13251
|
-
var templateObject_1$
|
|
13223
|
+
var templateObject_1$N, templateObject_2$w, templateObject_3$r, templateObject_4$i, templateObject_5$b, templateObject_6$a;
|
|
13252
13224
|
|
|
13253
13225
|
var BaseInput = function (_a) {
|
|
13254
13226
|
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"]);
|
|
@@ -13292,7 +13264,7 @@ var Button$3 = function (_a) {
|
|
|
13292
13264
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13293
13265
|
};
|
|
13294
13266
|
|
|
13295
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
13267
|
+
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) {
|
|
13296
13268
|
var theme = _a.theme;
|
|
13297
13269
|
return theme.component.inputCustom.input.borderRadius;
|
|
13298
13270
|
});
|
|
@@ -13313,9 +13285,9 @@ var Custom = function (_a) {
|
|
|
13313
13285
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13314
13286
|
return (jsx$1(Container$z, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13315
13287
|
};
|
|
13316
|
-
var templateObject_1$
|
|
13288
|
+
var templateObject_1$M, templateObject_2$v;
|
|
13317
13289
|
|
|
13318
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13290
|
+
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) {
|
|
13319
13291
|
var size = _a.size;
|
|
13320
13292
|
return (size === 'small' ? '36px' : '');
|
|
13321
13293
|
});
|
|
@@ -13325,9 +13297,9 @@ var Success = function (_a) {
|
|
|
13325
13297
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13326
13298
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13327
13299
|
};
|
|
13328
|
-
var templateObject_1$
|
|
13300
|
+
var templateObject_1$L, templateObject_2$u, templateObject_3$q;
|
|
13329
13301
|
|
|
13330
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13302
|
+
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) {
|
|
13331
13303
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13332
13304
|
return status === InputValidationType.Empty &&
|
|
13333
13305
|
type === 'primary' &&
|
|
@@ -13344,16 +13316,16 @@ var BasePlusButton = function (_a) {
|
|
|
13344
13316
|
}
|
|
13345
13317
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
13346
13318
|
};
|
|
13347
|
-
var templateObject_1$
|
|
13319
|
+
var templateObject_1$K;
|
|
13348
13320
|
|
|
13349
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
13321
|
+
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"])));
|
|
13350
13322
|
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"])));
|
|
13351
13323
|
var BasePlusIcon = function (_a) {
|
|
13352
13324
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13353
13325
|
var theme = useTheme();
|
|
13354
13326
|
return (jsx$1(Container$y, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13355
13327
|
};
|
|
13356
|
-
var templateObject_1$
|
|
13328
|
+
var templateObject_1$J, templateObject_2$t;
|
|
13357
13329
|
|
|
13358
13330
|
var Input$3 = {
|
|
13359
13331
|
Simple: BaseInput,
|
|
@@ -13362,7 +13334,7 @@ var Input$3 = {
|
|
|
13362
13334
|
SimplePlusIcon: BasePlusIcon,
|
|
13363
13335
|
};
|
|
13364
13336
|
|
|
13365
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
13337
|
+
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) {
|
|
13366
13338
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13367
13339
|
return borderRadiusVariant &&
|
|
13368
13340
|
"\n border-radius: 40px;\n ";
|
|
@@ -13468,14 +13440,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13468
13440
|
};
|
|
13469
13441
|
}, [preventTouch, ref, touchStart]);
|
|
13470
13442
|
}
|
|
13471
|
-
var templateObject_1$
|
|
13443
|
+
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;
|
|
13472
13444
|
|
|
13473
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
13445
|
+
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"])));
|
|
13474
13446
|
var ProductGalleryMobile = function (_a) {
|
|
13475
13447
|
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;
|
|
13476
13448
|
return (jsx$1(Container$w, { children: jsx$1(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13477
13449
|
};
|
|
13478
|
-
var templateObject_1$
|
|
13450
|
+
var templateObject_1$H;
|
|
13479
13451
|
|
|
13480
13452
|
function _extends() {
|
|
13481
13453
|
_extends = Object.assign || function (target) {
|
|
@@ -13742,7 +13714,7 @@ function useSwipeable(options) {
|
|
|
13742
13714
|
return handlers;
|
|
13743
13715
|
}
|
|
13744
13716
|
|
|
13745
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
13717
|
+
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) {
|
|
13746
13718
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13747
13719
|
return borderRadiusVariant &&
|
|
13748
13720
|
"\n border-radius: 40px;\n ";
|
|
@@ -13754,27 +13726,27 @@ var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a,
|
|
|
13754
13726
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13755
13727
|
return (jsxs$1(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')) && (jsxs$1(Fragment$2, { children: [jsx$1(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), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(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')) && (jsx$1("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));
|
|
13756
13728
|
});
|
|
13757
|
-
var templateObject_1$
|
|
13729
|
+
var templateObject_1$G, templateObject_2$r, templateObject_3$o;
|
|
13758
13730
|
|
|
13759
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
13731
|
+
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"])));
|
|
13760
13732
|
var ArrowButton = function (_a) {
|
|
13761
13733
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13762
13734
|
return (jsx$1(Button$1, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13763
13735
|
};
|
|
13764
|
-
var templateObject_1$
|
|
13736
|
+
var templateObject_1$F;
|
|
13765
13737
|
|
|
13766
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
13738
|
+
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"])));
|
|
13767
13739
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13768
13740
|
var SlideDots = function (_a) {
|
|
13769
13741
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13770
13742
|
var theme = useTheme();
|
|
13771
|
-
return (jsx$1(Container$u, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon
|
|
13743
|
+
return (jsx$1(Container$u, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13772
13744
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13773
|
-
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
13745
|
+
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
13774
13746
|
};
|
|
13775
|
-
var templateObject_1$
|
|
13747
|
+
var templateObject_1$E;
|
|
13776
13748
|
|
|
13777
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
13749
|
+
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"])));
|
|
13778
13750
|
var RightButton = newStyled(NavigationButton)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13779
13751
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13780
13752
|
var SlideNavigation = function (_a) {
|
|
@@ -13788,9 +13760,9 @@ var SlideNavigation = function (_a) {
|
|
|
13788
13760
|
onNavigate(selectedIndex + 1);
|
|
13789
13761
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13790
13762
|
};
|
|
13791
|
-
var templateObject_1$
|
|
13763
|
+
var templateObject_1$D, templateObject_2$q, templateObject_3$n;
|
|
13792
13764
|
|
|
13793
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
13765
|
+
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"])));
|
|
13794
13766
|
var ProductGalleryMobileV2 = function (_a) {
|
|
13795
13767
|
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;
|
|
13796
13768
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -13814,7 +13786,7 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
13814
13786
|
}, [index, images]);
|
|
13815
13787
|
return (jsxs$1(Container$t, { children: [jsx$1(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
13816
13788
|
};
|
|
13817
|
-
var templateObject_1$
|
|
13789
|
+
var templateObject_1$C;
|
|
13818
13790
|
|
|
13819
13791
|
var __defProp$1 = Object.defineProperty;
|
|
13820
13792
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -13947,7 +13919,7 @@ var Portal = function (_a) {
|
|
|
13947
13919
|
var visibleStyle = function (_a) {
|
|
13948
13920
|
var opened = _a.opened;
|
|
13949
13921
|
return opened
|
|
13950
|
-
? css(templateObject_1$
|
|
13922
|
+
? 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 "])));
|
|
13951
13923
|
};
|
|
13952
13924
|
var transformStyle = function (_a) {
|
|
13953
13925
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
@@ -13995,9 +13967,9 @@ var useModal = function (id) {
|
|
|
13995
13967
|
close: close,
|
|
13996
13968
|
}); }, [close, open, opened]);
|
|
13997
13969
|
};
|
|
13998
|
-
var templateObject_1$
|
|
13970
|
+
var templateObject_1$B, templateObject_2$p, templateObject_3$m, templateObject_4$g, templateObject_5$9, templateObject_6$8;
|
|
13999
13971
|
|
|
14000
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
13972
|
+
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) {
|
|
14001
13973
|
var height = _a.height;
|
|
14002
13974
|
return height || '0.5rem';
|
|
14003
13975
|
}, function (_a) {
|
|
@@ -14069,9 +14041,9 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14069
14041
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14070
14042
|
return (jsxs$1(Container$r, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14071
14043
|
};
|
|
14072
|
-
var templateObject_1$
|
|
14044
|
+
var templateObject_1$A;
|
|
14073
14045
|
|
|
14074
|
-
var Container$q = newStyled.div(templateObject_1$
|
|
14046
|
+
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) {
|
|
14075
14047
|
var theme = _a.theme;
|
|
14076
14048
|
return theme.component.orderBar.backgroundColor;
|
|
14077
14049
|
});
|
|
@@ -14081,7 +14053,7 @@ var OrderBar = function (_a) {
|
|
|
14081
14053
|
var theme = useTheme();
|
|
14082
14054
|
return (jsxs$1(Container$q, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14083
14055
|
};
|
|
14084
|
-
var templateObject_1$
|
|
14056
|
+
var templateObject_1$z, templateObject_2$o;
|
|
14085
14057
|
|
|
14086
14058
|
var htmlReactParser = {exports: {}};
|
|
14087
14059
|
|
|
@@ -17862,7 +17834,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17862
17834
|
HTMLReactParser$1.attributesToProps;
|
|
17863
17835
|
HTMLReactParser$1.Element;
|
|
17864
17836
|
|
|
17865
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
17837
|
+
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"])));
|
|
17866
17838
|
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"])));
|
|
17867
17839
|
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"])));
|
|
17868
17840
|
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"])));
|
|
@@ -17899,9 +17871,9 @@ var PackCard = function (_a) {
|
|
|
17899
17871
|
currency: currencyCode || 'USD',
|
|
17900
17872
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17901
17873
|
};
|
|
17902
|
-
var templateObject_1$
|
|
17874
|
+
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;
|
|
17903
17875
|
|
|
17904
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
17876
|
+
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"])));
|
|
17905
17877
|
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"])));
|
|
17906
17878
|
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
17907
17879
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -17923,7 +17895,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
17923
17895
|
var background = _a.background;
|
|
17924
17896
|
return background || 'unset';
|
|
17925
17897
|
});
|
|
17926
|
-
var templateObject_1$
|
|
17898
|
+
var templateObject_1$x, templateObject_2$m, templateObject_3$k, templateObject_4$e;
|
|
17927
17899
|
|
|
17928
17900
|
var Pagination = function (_a) {
|
|
17929
17901
|
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;
|
|
@@ -17988,7 +17960,7 @@ var PaginatorBlog = function (_a) {
|
|
|
17988
17960
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
17989
17961
|
};
|
|
17990
17962
|
|
|
17991
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
17963
|
+
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) {
|
|
17992
17964
|
var width = _a.width;
|
|
17993
17965
|
return width;
|
|
17994
17966
|
}, function (_a) {
|
|
@@ -18006,9 +17978,9 @@ var PaymentMethod = function (_a) {
|
|
|
18006
17978
|
var theme = useTheme();
|
|
18007
17979
|
return (jsx$1(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: createElement(Icon) }), void 0));
|
|
18008
17980
|
};
|
|
18009
|
-
var templateObject_1$
|
|
17981
|
+
var templateObject_1$w;
|
|
18010
17982
|
|
|
18011
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
17983
|
+
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"])));
|
|
18012
17984
|
var IMAGE_WIDTH = '63px';
|
|
18013
17985
|
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);
|
|
18014
17986
|
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({
|
|
@@ -18050,7 +18022,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18050
18022
|
var theme = useTheme();
|
|
18051
18023
|
return (jsxs$1(Container$m, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(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));
|
|
18052
18024
|
};
|
|
18053
|
-
var templateObject_1$
|
|
18025
|
+
var templateObject_1$v, templateObject_2$l, templateObject_3$j, templateObject_4$d, templateObject_5$7, templateObject_6$6;
|
|
18054
18026
|
|
|
18055
18027
|
var P$1 = newStyled.p(function (_a) {
|
|
18056
18028
|
var color = _a.color;
|
|
@@ -18064,7 +18036,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18064
18036
|
margin: '0.938rem 4.188rem',
|
|
18065
18037
|
});
|
|
18066
18038
|
});
|
|
18067
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18039
|
+
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) {
|
|
18068
18040
|
var height = _a.height;
|
|
18069
18041
|
return height || '0.5rem';
|
|
18070
18042
|
}, function (_a) {
|
|
@@ -18109,9 +18081,9 @@ var ProgressBar = function (_a) {
|
|
|
18109
18081
|
var theme = useTheme();
|
|
18110
18082
|
return (jsxs$1(Container$l, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18111
18083
|
};
|
|
18112
|
-
var templateObject_1$
|
|
18084
|
+
var templateObject_1$u;
|
|
18113
18085
|
|
|
18114
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
18086
|
+
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; });
|
|
18115
18087
|
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"])));
|
|
18116
18088
|
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"])));
|
|
18117
18089
|
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)'; });
|
|
@@ -18139,7 +18111,7 @@ var QuantityPicker = function (_a) {
|
|
|
18139
18111
|
}, [value, clamp]);
|
|
18140
18112
|
return (jsxs$1(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: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(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));
|
|
18141
18113
|
};
|
|
18142
|
-
var templateObject_1$
|
|
18114
|
+
var templateObject_1$t, templateObject_2$k, templateObject_3$i, templateObject_4$c;
|
|
18143
18115
|
|
|
18144
18116
|
/* base styles & size variants */
|
|
18145
18117
|
var CustomRadioStyles$1 = {
|
|
@@ -18208,7 +18180,7 @@ var ContainerStyles$1 = {
|
|
|
18208
18180
|
},
|
|
18209
18181
|
};
|
|
18210
18182
|
|
|
18211
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18183
|
+
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"])));
|
|
18212
18184
|
var Container$j = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18213
18185
|
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) {
|
|
18214
18186
|
var disabled = _a.disabled;
|
|
@@ -18228,7 +18200,7 @@ var RadioPrimary = function (_a) {
|
|
|
18228
18200
|
};
|
|
18229
18201
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$j, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18230
18202
|
};
|
|
18231
|
-
var templateObject_1$
|
|
18203
|
+
var templateObject_1$s, templateObject_2$j, templateObject_3$h;
|
|
18232
18204
|
|
|
18233
18205
|
var RadioGroupInput = function (_a) {
|
|
18234
18206
|
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 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18307,7 +18279,7 @@ var ContainerStyles = {
|
|
|
18307
18279
|
},
|
|
18308
18280
|
};
|
|
18309
18281
|
|
|
18310
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18282
|
+
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"])));
|
|
18311
18283
|
var Container$i = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18312
18284
|
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) {
|
|
18313
18285
|
var disabled = _a.disabled;
|
|
@@ -18333,7 +18305,7 @@ var ClubRadioInput = function (_a) {
|
|
|
18333
18305
|
};
|
|
18334
18306
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$i, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(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));
|
|
18335
18307
|
};
|
|
18336
|
-
var templateObject_1$
|
|
18308
|
+
var templateObject_1$r, templateObject_2$i, templateObject_3$g;
|
|
18337
18309
|
|
|
18338
18310
|
var ClubRadioGroupInput = function (_a) {
|
|
18339
18311
|
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 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18354,7 +18326,7 @@ function formatDate(date) {
|
|
|
18354
18326
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
18355
18327
|
}
|
|
18356
18328
|
|
|
18357
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
18329
|
+
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"])));
|
|
18358
18330
|
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"])));
|
|
18359
18331
|
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"])));
|
|
18360
18332
|
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"])));
|
|
@@ -18395,11 +18367,11 @@ var Review$1 = function (_a) {
|
|
|
18395
18367
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$h, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18396
18368
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18397
18369
|
};
|
|
18398
|
-
var templateObject_1$
|
|
18370
|
+
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;
|
|
18399
18371
|
|
|
18400
18372
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18401
18373
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18402
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
18374
|
+
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"])));
|
|
18403
18375
|
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"])));
|
|
18404
18376
|
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"])));
|
|
18405
18377
|
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"])));
|
|
@@ -18451,9 +18423,9 @@ var Review = function (_a) {
|
|
|
18451
18423
|
: description,
|
|
18452
18424
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
18453
18425
|
};
|
|
18454
|
-
var templateObject_1$
|
|
18426
|
+
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;
|
|
18455
18427
|
|
|
18456
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
18428
|
+
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"])));
|
|
18457
18429
|
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"])));
|
|
18458
18430
|
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"])));
|
|
18459
18431
|
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"])));
|
|
@@ -18469,9 +18441,9 @@ var ReviewsHeader = function (_a) {
|
|
|
18469
18441
|
var theme = useTheme();
|
|
18470
18442
|
return (jsxs$1(Container$f, { children: [jsx$1(Text$8, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$8, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18471
18443
|
};
|
|
18472
|
-
var templateObject_1$
|
|
18444
|
+
var templateObject_1$o, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18473
18445
|
|
|
18474
|
-
var Container$e = newStyled.div(templateObject_1$
|
|
18446
|
+
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"])));
|
|
18475
18447
|
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; });
|
|
18476
18448
|
var ScrollToTop = function (_a) {
|
|
18477
18449
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
@@ -18479,7 +18451,7 @@ var ScrollToTop = function (_a) {
|
|
|
18479
18451
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18480
18452
|
return (jsxs$1(Container$e, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18481
18453
|
};
|
|
18482
|
-
var templateObject_1$
|
|
18454
|
+
var templateObject_1$n, templateObject_2$e;
|
|
18483
18455
|
|
|
18484
18456
|
var Input = newStyled.input(function (props) { return ({
|
|
18485
18457
|
padding: props.theme.component.input.padding,
|
|
@@ -18510,7 +18482,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
18510
18482
|
},
|
|
18511
18483
|
}); });
|
|
18512
18484
|
|
|
18513
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
18485
|
+
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({
|
|
18514
18486
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
18515
18487
|
}));
|
|
18516
18488
|
var Description = newStyled.div({
|
|
@@ -18529,7 +18501,7 @@ var ProductItem = function (_a) {
|
|
|
18529
18501
|
var theme = useTheme();
|
|
18530
18502
|
return (jsxs$1(Container$d, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
18531
18503
|
};
|
|
18532
|
-
var templateObject_1$
|
|
18504
|
+
var templateObject_1$m;
|
|
18533
18505
|
|
|
18534
18506
|
var Container$c = newStyled.div({
|
|
18535
18507
|
display: 'flex',
|
|
@@ -18545,7 +18517,7 @@ var Ul = newStyled.ul({
|
|
|
18545
18517
|
margin: '0px',
|
|
18546
18518
|
padding: '0px',
|
|
18547
18519
|
});
|
|
18548
|
-
var Li = newStyled.li(templateObject_1$
|
|
18520
|
+
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({
|
|
18549
18521
|
padding: [0, '0rem 1rem'],
|
|
18550
18522
|
borderRadius: [0, '0.5rem'],
|
|
18551
18523
|
}));
|
|
@@ -18570,9 +18542,9 @@ var ResultsPanel = function (_a) {
|
|
|
18570
18542
|
var theme = useTheme();
|
|
18571
18543
|
return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
18572
18544
|
};
|
|
18573
|
-
var templateObject_1$
|
|
18545
|
+
var templateObject_1$l, templateObject_2$d, templateObject_3$c;
|
|
18574
18546
|
|
|
18575
|
-
var Button = newStyled.button(templateObject_1$
|
|
18547
|
+
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({
|
|
18576
18548
|
right: ['1rem', '7.75rem'],
|
|
18577
18549
|
top: ['0.75rem', '0.75rem'],
|
|
18578
18550
|
}));
|
|
@@ -18581,7 +18553,7 @@ var ClearButton = function (_a) {
|
|
|
18581
18553
|
var theme = useTheme();
|
|
18582
18554
|
return (jsx$1(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
18583
18555
|
};
|
|
18584
|
-
var templateObject_1$
|
|
18556
|
+
var templateObject_1$k;
|
|
18585
18557
|
|
|
18586
18558
|
var SearchIconContainer = newStyled.div({
|
|
18587
18559
|
display: 'flex',
|
|
@@ -18591,7 +18563,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
18591
18563
|
background: 'white',
|
|
18592
18564
|
alignSelf: 'center',
|
|
18593
18565
|
});
|
|
18594
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
18566
|
+
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"])));
|
|
18595
18567
|
var SearchControl = function (_a) {
|
|
18596
18568
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
18597
18569
|
var theme = useTheme();
|
|
@@ -18607,7 +18579,7 @@ var SearchControl = function (_a) {
|
|
|
18607
18579
|
}
|
|
18608
18580
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
18609
18581
|
};
|
|
18610
|
-
var templateObject_1$
|
|
18582
|
+
var templateObject_1$j;
|
|
18611
18583
|
|
|
18612
18584
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
18613
18585
|
var reducer = function (state, action) {
|
|
@@ -18674,7 +18646,7 @@ var SearchBar = function (_a) {
|
|
|
18674
18646
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(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));
|
|
18675
18647
|
};
|
|
18676
18648
|
|
|
18677
|
-
var Container$9 = newStyled.div(templateObject_1$
|
|
18649
|
+
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"])));
|
|
18678
18650
|
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"])));
|
|
18679
18651
|
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"])));
|
|
18680
18652
|
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"])));
|
|
@@ -18685,9 +18657,9 @@ var SearchNavigation = function (_a) {
|
|
|
18685
18657
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18686
18658
|
}) }, void 0)] }, void 0));
|
|
18687
18659
|
};
|
|
18688
|
-
var templateObject_1$
|
|
18660
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$b, templateObject_4$8, templateObject_5$3;
|
|
18689
18661
|
|
|
18690
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
18662
|
+
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) {
|
|
18691
18663
|
var alignCenter = _a.alignCenter;
|
|
18692
18664
|
return alignCenter &&
|
|
18693
18665
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -18704,9 +18676,9 @@ var ShortBanner = function (_a) {
|
|
|
18704
18676
|
var theme = useTheme();
|
|
18705
18677
|
return (jsxs$1(Container$8, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
18706
18678
|
};
|
|
18707
|
-
var templateObject_1$
|
|
18679
|
+
var templateObject_1$h, templateObject_2$b, templateObject_3$a;
|
|
18708
18680
|
|
|
18709
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
18681
|
+
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; });
|
|
18710
18682
|
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; });
|
|
18711
18683
|
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; });
|
|
18712
18684
|
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; });
|
|
@@ -18742,9 +18714,9 @@ var SizeChartTable = function (_a) {
|
|
|
18742
18714
|
backgroundColor: getCellColor(index, cell),
|
|
18743
18715
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1(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 (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
18744
18716
|
};
|
|
18745
|
-
var templateObject_1$
|
|
18717
|
+
var templateObject_1$g, templateObject_2$a, templateObject_3$9, templateObject_4$7;
|
|
18746
18718
|
|
|
18747
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
18719
|
+
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; });
|
|
18748
18720
|
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; });
|
|
18749
18721
|
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; });
|
|
18750
18722
|
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; });
|
|
@@ -18753,7 +18725,7 @@ var SizeTable = function (_a) {
|
|
|
18753
18725
|
var theme = useTheme();
|
|
18754
18726
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
18755
18727
|
};
|
|
18756
|
-
var templateObject_1$
|
|
18728
|
+
var templateObject_1$f, templateObject_2$9, templateObject_3$8, templateObject_4$6;
|
|
18757
18729
|
|
|
18758
18730
|
var getStylesBySize$4 = function (size) {
|
|
18759
18731
|
switch (size) {
|
|
@@ -18780,7 +18752,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
18780
18752
|
} });
|
|
18781
18753
|
};
|
|
18782
18754
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
18783
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
18755
|
+
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));
|
|
18784
18756
|
};
|
|
18785
18757
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
18786
18758
|
if (disabled)
|
|
@@ -18796,18 +18768,18 @@ var TextButton = function (_a) {
|
|
|
18796
18768
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
18797
18769
|
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));
|
|
18798
18770
|
};
|
|
18799
|
-
var templateObject_1$
|
|
18771
|
+
var templateObject_1$e;
|
|
18800
18772
|
|
|
18801
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
18773
|
+
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"])));
|
|
18802
18774
|
var P = newStyled.p(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
18803
18775
|
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"])));
|
|
18804
18776
|
var SizeFitGuide = function (_a) {
|
|
18805
18777
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
18806
18778
|
return (jsxs$1(Container$7, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
18807
18779
|
};
|
|
18808
|
-
var templateObject_1$
|
|
18780
|
+
var templateObject_1$d, templateObject_2$8, templateObject_3$7;
|
|
18809
18781
|
|
|
18810
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
18782
|
+
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) {
|
|
18811
18783
|
var inline = _a.inline;
|
|
18812
18784
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
18813
18785
|
});
|
|
@@ -18826,9 +18798,9 @@ var SizeSelector = function (_a) {
|
|
|
18826
18798
|
}, size: 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));
|
|
18827
18799
|
}) }), void 0)] }), void 0));
|
|
18828
18800
|
};
|
|
18829
|
-
var templateObject_1$
|
|
18801
|
+
var templateObject_1$c;
|
|
18830
18802
|
|
|
18831
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
18803
|
+
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) {
|
|
18832
18804
|
var titleSize = _a.titleSize;
|
|
18833
18805
|
return titleSize;
|
|
18834
18806
|
}, function (_a) {
|
|
@@ -18845,9 +18817,9 @@ var Tab = function (_a) {
|
|
|
18845
18817
|
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;
|
|
18846
18818
|
return (jsx$1(Fragment$2, { children: jsx$1(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));
|
|
18847
18819
|
};
|
|
18848
|
-
var templateObject_1$
|
|
18820
|
+
var templateObject_1$b;
|
|
18849
18821
|
|
|
18850
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
18822
|
+
var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
18851
18823
|
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) {
|
|
18852
18824
|
var backgroundColor = _a.backgroundColor;
|
|
18853
18825
|
return backgroundColor;
|
|
@@ -18864,14 +18836,14 @@ var Tabs = function (_a) {
|
|
|
18864
18836
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
18865
18837
|
return (jsxs$1(Container$6, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
18866
18838
|
};
|
|
18867
|
-
var templateObject_1$
|
|
18839
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$6, templateObject_4$5;
|
|
18868
18840
|
|
|
18869
|
-
var Container$5 = newStyled.div(templateObject_1$
|
|
18841
|
+
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"])));
|
|
18870
18842
|
var Tag = function (_a) {
|
|
18871
18843
|
var text = _a.text, className = _a.className;
|
|
18872
18844
|
return jsx$1(Container$5, __assign$1({ className: className }, { children: text }), void 0);
|
|
18873
18845
|
};
|
|
18874
|
-
var templateObject_1$
|
|
18846
|
+
var templateObject_1$9;
|
|
18875
18847
|
|
|
18876
18848
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
18877
18849
|
switch (size) {
|
|
@@ -18982,7 +18954,7 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
18982
18954
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
18983
18955
|
};
|
|
18984
18956
|
|
|
18985
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
18957
|
+
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"])));
|
|
18986
18958
|
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"])));
|
|
18987
18959
|
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"])));
|
|
18988
18960
|
var ImageVideo = function (_a) {
|
|
@@ -19004,9 +18976,9 @@ var ImageVideo = function (_a) {
|
|
|
19004
18976
|
height: '100%',
|
|
19005
18977
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19006
18978
|
};
|
|
19007
|
-
var templateObject_1$
|
|
18979
|
+
var templateObject_1$8, templateObject_2$6, templateObject_3$5;
|
|
19008
18980
|
|
|
19009
|
-
var ContainerDesktop = css(templateObject_1$
|
|
18981
|
+
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"])));
|
|
19010
18982
|
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"])));
|
|
19011
18983
|
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);
|
|
19012
18984
|
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"])));
|
|
@@ -19039,9 +19011,47 @@ var TextWithImage = function (_a) {
|
|
|
19039
19011
|
},
|
|
19040
19012
|
} }, 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));
|
|
19041
19013
|
};
|
|
19042
|
-
var templateObject_1$
|
|
19014
|
+
var templateObject_1$7, templateObject_2$5, templateObject_3$4, templateObject_4$4;
|
|
19015
|
+
|
|
19016
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19017
|
+
var timerColor = _a.timerColor;
|
|
19018
|
+
return timerColor || '';
|
|
19019
|
+
});
|
|
19020
|
+
var timeToSeconds = function (_a) {
|
|
19021
|
+
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
19022
|
+
return hours * 3600 + minutes * 60 + seconds;
|
|
19023
|
+
};
|
|
19024
|
+
var secondsToTime = function (secs) {
|
|
19025
|
+
var hours = Math.floor(secs / 3600);
|
|
19026
|
+
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
19027
|
+
var seconds = secs - hours * 3600 - minutes * 60;
|
|
19028
|
+
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
19029
|
+
};
|
|
19030
|
+
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
19031
|
+
var Timer = function (_a) {
|
|
19032
|
+
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"]);
|
|
19033
|
+
var _f = useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _f[0], setSecs = _f[1];
|
|
19034
|
+
useEffect(function () {
|
|
19035
|
+
var timer = setInterval(function () {
|
|
19036
|
+
setSecs(function (seconds) {
|
|
19037
|
+
if (seconds === 1) {
|
|
19038
|
+
clearInterval(timer);
|
|
19039
|
+
onTimeUp();
|
|
19040
|
+
return 0;
|
|
19041
|
+
}
|
|
19042
|
+
return seconds - 1;
|
|
19043
|
+
});
|
|
19044
|
+
}, 1000);
|
|
19045
|
+
if (secs <= 0)
|
|
19046
|
+
clearInterval(timer);
|
|
19047
|
+
return function () { return clearInterval(timer); };
|
|
19048
|
+
}, [onTimeUp, secs]);
|
|
19049
|
+
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19050
|
+
return (jsxs$1(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));
|
|
19051
|
+
};
|
|
19052
|
+
var templateObject_1$6;
|
|
19043
19053
|
|
|
19044
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19054
|
+
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"])));
|
|
19045
19055
|
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; });
|
|
19046
19056
|
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) {
|
|
19047
19057
|
var theme = _a.theme;
|
|
@@ -19070,7 +19080,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
|
|
|
19070
19080
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19071
19081
|
});
|
|
19072
19082
|
var TotalLabel = newStyled(Text$8)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19073
|
-
var templateObject_1$
|
|
19083
|
+
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;
|
|
19074
19084
|
|
|
19075
19085
|
var Total = function (_a) {
|
|
19076
19086
|
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;
|
|
@@ -19078,7 +19088,7 @@ var Total = function (_a) {
|
|
|
19078
19088
|
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$3, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19079
19089
|
};
|
|
19080
19090
|
|
|
19081
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19091
|
+
var Wrapper = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19082
19092
|
var color = _a.color;
|
|
19083
19093
|
return color;
|
|
19084
19094
|
});
|
|
@@ -19103,14 +19113,14 @@ var Subtotal = function (_a) {
|
|
|
19103
19113
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19104
19114
|
})] }), void 0));
|
|
19105
19115
|
};
|
|
19106
|
-
var templateObject_1$
|
|
19116
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$2;
|
|
19107
19117
|
|
|
19108
19118
|
var Totals = {
|
|
19109
19119
|
Total: Total,
|
|
19110
19120
|
Subtotal: Subtotal,
|
|
19111
19121
|
};
|
|
19112
19122
|
|
|
19113
|
-
var Container$2 = newStyled.div(templateObject_1$
|
|
19123
|
+
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"])));
|
|
19114
19124
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19115
19125
|
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; });
|
|
19116
19126
|
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'); });
|
|
@@ -19162,9 +19172,9 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19162
19172
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19163
19173
|
})] }), void 0));
|
|
19164
19174
|
};
|
|
19165
|
-
var templateObject_1$
|
|
19175
|
+
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;
|
|
19166
19176
|
|
|
19167
|
-
var Container$1 = newStyled.div(templateObject_1$
|
|
19177
|
+
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"])));
|
|
19168
19178
|
var CheckpointContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19169
19179
|
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; });
|
|
19170
19180
|
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'); });
|
|
@@ -19202,7 +19212,36 @@ var TrackingProgress = function (_a) {
|
|
|
19202
19212
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19203
19213
|
})] }), void 0));
|
|
19204
19214
|
};
|
|
19205
|
-
var templateObject_1$
|
|
19215
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19216
|
+
|
|
19217
|
+
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) {
|
|
19218
|
+
var textPosition = _a.textPosition;
|
|
19219
|
+
return textPosition;
|
|
19220
|
+
}, function (_a) {
|
|
19221
|
+
var backgroundColor = _a.backgroundColor;
|
|
19222
|
+
return backgroundColor;
|
|
19223
|
+
}, function (_a) {
|
|
19224
|
+
var borderRadius = _a.borderRadius;
|
|
19225
|
+
return borderRadius || 'unset';
|
|
19226
|
+
}, function (_a) {
|
|
19227
|
+
var borderRadius = _a.borderRadius;
|
|
19228
|
+
return borderRadius || '8px';
|
|
19229
|
+
});
|
|
19230
|
+
var templateObject_1$1;
|
|
19231
|
+
|
|
19232
|
+
var getDefaultCountdown = function () {
|
|
19233
|
+
var tomorrowDate = new Date();
|
|
19234
|
+
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
19235
|
+
tomorrowDate.setHours(0, 0, 0, 0);
|
|
19236
|
+
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
19237
|
+
return Number(totalSeconds.toFixed(0));
|
|
19238
|
+
};
|
|
19239
|
+
|
|
19240
|
+
var HurryUp = function (_a) {
|
|
19241
|
+
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"]);
|
|
19242
|
+
var theme = useTheme();
|
|
19243
|
+
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
19244
|
+
};
|
|
19206
19245
|
|
|
19207
19246
|
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) {
|
|
19208
19247
|
var size = _a.size;
|