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